Hvordan lage en venstre kolonne CSS
Webutviklere bruker Cascading Style Sheets å arrangere deler av websider inn i kompliserte oppsett med overskrifter, søyler og bunntekst. Oppsett stylet med CSS take "<div>" koder som gruppeinnhold sammen og gi dem bredder og flyter å lage søylene sett på nettsider over hele Internett. Du må først opprette din sidebar i HTML og stilen den ved hjelp av "float: left" for å lage en venstre kolonne ved hjelp av CSS.
Bruksanvisning
1 Åpne din webside i Notepad, slik at du kan redigere sin kode. Finn hoveddelen av innholdet i koden din, og pakk den i "<div>" koder. Gi div ID-navn, slik at du kan referere til den i CSS senere:
<Div id = "innhold">
<H2> Innhold Tittel </ h2>
<P> En tekstavsnitt ... </ p>
</ Div>
2 Under "<div>" du opprettet for hovedinnholdet på siden, legge til et nytt sett med "<div>" koder til inneholder din sidebar innhold:
<Div id = "sidebar">
</ Div>
Legg noe innhold du vil skal vises i sidepanelet mellom de nye "<div>" koder. Dette settet med tags trenger en ID-navnet, slik at du kan style den i CSS. Typisk sidebar innhold omfatter lister med lenker, "om meg" Profiler og kontaktskjemaer, men du kan legge til noe du liker denne paragraf.
3 Gå tilbake til toppen av koden og legge til "<style>" kodene mellom "<head>" koder hvis du ser ingen der:
<Style type = "text / css">
</ Style>
Legg inn CSS-koden mellom "<style>" tags. Du kan også plassere CSS-kode inne i et eksternt stilark hvis nettstedet allerede bruker det.
4 Velg både innhold og sidebar divs i CSS-kode:
innhold {
}
sidebar {
}
Endre navn "innhold" og "sidebar" til ID-navnene du ga dine divs, men beholde den stekte symboler som CSS trenger disse for å vite for å lete etter ID-navn i stedet for koder eller klasser.
5 Sett bredden av hver div:
innhold {
width: 80%;
}
sidebar {
bredde: 20%;
}
Du kan også stille inn bredden i pikselverdier som "200px" for å gi divs faste bredder. Bredden av hver div kan ikke gå over 100 prosent eller maksimalt antall piksler for design, men du kan sette dem under 100 prosent for å skape rom for marger eller utfylling.
6 Legg til "flyte" eiendom til sidepanelet div for å gjøre det vise ved siden av innholdet div i stedet for under. Still "flyte" til venstre når du ønsker å plassere sidepanelet på venstre side av innhold:
sidebar {
bredde: 20%;
float: left;
}