Hvordan lage en Side Bar med to kolonner
En sidelinjen kan vises på venstre eller høyre på websiden. Plassere den på venstre trekker lesere til side bar når de først åpner websiden. Blogger vise ofte siden barer på høyre side av siden. En side bar med to kolonner gir deg ekstra plass til å vise lenker, reklame og bilder uten å forstyrre din hovedinnhold. Du kan bruke Cascading Style Sheets (CSS) til å flyte sidefeltet på siden din.
Bruksanvisning
1 Start en tekstredigeringsprogram, for eksempel Notisblokk, TextPad eller EditPad. Velg "File" og "Open" fra menyen og dobbeltklikk på HTML-filen du ønsker å endre.
2 Sett inn følgende kode mellom HEAD taggen. Det skaper en stil for hovedinnhold og side bar med to kolonner. For å justere bredden på sidelinjen og innhold, endrer pikslene innenfor "width".
<Style type = "text / css">
<! -
kropp, html {
margin: 0;
padding: 0;
}
wrapper {
width: 950px;
margin: 0 auto;
}
hoved~~POS=TRUNC {
float: left;
width: 550px;
}
sidebar {
float: left;
bredde: 350 piksler;
}
kolonne 1 {
float: left;
bredde: 160 piksler;
padding: 2 piksler;
margin: 2 piksler;
border: 1px solid black;
}
COLUMN2 {
float: left;
bredde: 160 piksler;
padding: 2 piksler;
margin: 2 piksler;
border: 1px solid black;
}
->
</ Style>
3 Sett inn følgende kode mellom BODY-koden for å vise sidefeltet med kolonner på høyre side av siden:
<Div id = "wrapper">
<Div id = "main"> Hoved innholdet på nettstedet ditt går her ... </ div>
<Div id = "sidebar">
<Div id = "kolonne 1"> <p> Innholdet i den første kolonnen gå her ... </ p> </ div>
<Div id = "COLUMN2"> <p> Innholdet i den andre kolonnen gå her ... </ p> </ div>
</ Div>
</ Div>
4 Sett inn følgende kode mellom BODY-koden for å vise sidefeltet med kolonner på venstre side av siden:
<Div id = "wrapper">
<Div id = "sidebar">
<Div id = "kolonne 1"> <p> Innholdet i den første kolonnen gå her ... </ p> </ div>
<Div id = "COLUMN2"> <p> Innholdet i den andre kolonnen gå her ... </ p> </ div>
</ Div>
<Div id = "main"> Hoved innholdet på nettstedet ditt går her ... </ div>
</ Div>
5 Erstatte innholdet mellom <div> koder, for eksempel "Innholdet i den første siden bar gå her .." og "Den viktigste innholdet på nettstedet ditt går her ..." med innholdet du vil ha med på websiden.
6 Velg "File" og "Save" fra menyen for å oppdatere HTML-fil.