Hvordan du bruker tre kolonneoppsett i CSS3 - dummies

Tre kolonneoppsett i CSS3 brukes ofte på nettsteder som gir en liste over generiske koblinger på den ene siden av siden, innhold i midten og annonsering eller sidespesifikke koblinger på den andre siden.

Dynamisk stasjon-layoutsider viser en bruk av dette layoutet hvor du ser en liste over tilbud i venstre rute, de faktiske layoutene i innholdsruten og en liste over sponsorer i den høyre ruten.

Det er variasjoner på dette temaet. Et eksempel vises på Electronic Frontier Foundation-siden der du ser nettstedslinker i venstre rute, informasjon om EFF i innholdsruten og nyhetskoblinger i høyre rute.

Du kan se en liste over de tre kolonneoppsettene på CSS Library. Som med to-kolonneoppsettene, finner du en blanding av faste og flytende layouter når du arbeider med tre-kolonneoppsettene.

Det er selvfølgelig flere typer tre-kolonneoppsett enn det er to-kolonneoppsett fordi flere permutasjoner er mulige. I noen av oppsettene er en av sidekolonnene flytende, så er innholds-kolonnen. Det er enda et oppsett der alle tre kolonnene er flytende, noe som betyr at hele oppsettet vil endre størrelsen på den for å matche den nåværende nettleservinduet.

Den ene typen tre-kolonneformat mangler fra dette nettstedet er en der de to kolonnene er justert, en over toppen av den andre. Dette skjemaet brukes vanligvis til online dokumentasjon, for eksempel Java 7 API.

En vei rundt dette problemet er å bruke et annet produkt, for eksempel UI Layout-plugin-modulen for jQuery. Et annet alternativ er å endre CSS Fast Layout # 3. 3- (Fast-Fixed-Fixed) layout.

Du trenger ikke gjøre noen endringer i HTML-delen av dette eksemplet. HTML5-versjonen av oppsettet ser slik ut. (Du finner fullstendig kode for dette eksemplet i kapittel 07-mappen for den nedlastbare koden som ThreeColumnHelpLayout. HTML.)

CSS Fast Layout # 3. 3- (Fast-Fixed-Fixed)

CSS Fast Layout # 3. 3 (Fast Fixed)
Innholdskolonne: Fast 
Venstre kolonne: 180px 
Høyre kolonne: 190px 
Footer

CSS starter med koden fra nettstedet. For å kunne endre denne koden for å gi formatet som kreves for hjelpedokumentasjon, må du gjøre noen små endringer. Følgende fremgangsmåte forteller deg hvordan.

1. Endre egenskapen med marginal igjen for #rightcolumn-stilen til -840px.

   Denne endringen gjør det til høyre og venstre kolonner.

2. Endre breddeegenskapen for #rightcolumn-stilen til 180px.

   Denne endringen gjør de høyre og venstre kolonnene like bredde.

3. Legg til en høydeverdiens verdi på 250px til både #leftcolumn og #rightcolumn stiler.

   Denne endringen tillater at begge kolonnene bruker halvparten av ledig plass for innhold.

4. Legg til en marginal topp eiendomsverdi på 250px til #rightcolumn-stilen.

   Denne endringen posisjonerer høyre kolonne under den venstre kolonnen.

5. Legg den resulterende siden i nettleseren din.

   Du ser en tre-kolonne-layout som denne:

   

Dynamiske stasjonsmalene er fleksible og kan ofte tjene andre formål med noen få små endringer. Det viktigste er å starte med et oppsett som ser nærmere på hva du vil bruke.