Slik bygger du en sentrert fast bredde Flytende layout for HTML5 og CSS3 Programmering

Fastbreddeoppsett er vanlige, men de ser litt rart ut hvis nettleseren ikke er bredden som er angitt i CSS3. Hvis nettleseren er for smal, vil oppsettet ikke fungere, og den andre kolonnen vil (vanligvis) gå ned til neste linje.

Hvis nettleseren er for bred, ser siden ut til å bli scrunched på venstre margin med stor hvit plass til høyre.

Den naturlige løsningen er å lage en relativt smal fast bredde-design som er sentrert på hele siden.

Noen har kalt denne typen design (flytende flytende med sentrering i nettleseren) en jello layout fordi den ikke er ganske væsken og ikke helt fast.

Gjør en surrogatkropp med en all div

I alle fall krever HTML bare ett nytt element, en all div som inneholder alt annet inne i kroppen:

fixedWidthCentered. html

Fast bredde Sentrert layout

Venstre kolonne

Høyre kolonne
Footer

Hele siden innholdet er nå innkapslet i en spesiell div. Denne diven blir endret til en standard bredde (typisk 640 eller 800 piksler). Alt elementet vil være sentrert i kroppen, og de andre elementene vil bli plassert inne i alt som om det var kroppen:

#all {width: 800px; høyde: 600px; margin-left: auto; margin-høyre: auto; grense: 1px solid grå;} #header {bakgrunnsfarge: # e2e393; grensebunn: 3px solid svart; tekst-align: center; bredde: 800px; høyde: 100px; padding-top: 1em;} #left {float: left; bredde: 200px; fjern: venstre; grense-høyre: 1px solid svart; høyde: 400px; polstring-høyre:. 5em;} #right {float: left; bredde: 580px; høyde: 400px; padding-left:. 5em;} #footer {width: 800px; høyde: 60px; tekst-align: center; bakgrunnsfarge: # e2e393; border-top: 3px dobbel svart; polstring-bunn: 1em; Clear: both;}

Slik fungerer jello-oppsettet

Denne koden ligner stilen, men den har noen viktige nye funksjoner:

• Den alle -elementet har en fast bredde. Dette elementets bredde bestemmer bredden på den faste delen av siden.

• alle trenger også en fast høyde. Hvis du ikke angir en høyde, vil alle være 0 piksler høye fordi alle elementene inne i det er floated.

• Center. Husk at du skal sentrere divisjoner (eller andre blokkeringselementer) du angir margin-venstre og margin-høyre begge til auto.

• Do ikke float alle . Marginen: auto trick fungerer ikke på flytede elementer. alle bør ikke ha et float attributt sett.

• Kontroller at innvendige bredder legger opp til all s bredde. Hvis alle har en bredde på 800 piksler, må du sørge for at breddene, kantene og kantene av alle elementene i det hele legger opp til nøyaktig 800 piksler. Hvis du går enda en piksel over, vil noe spilles over og ødelegge effekten. Du må kanskje fla med breddene for å få alt til å fungere.

• Juster høydene: Hvis designen har en fast høyde, må du også fikle med høydene for å få alt til å se akkurat riktig ut. Beregninger får deg til å lukke, men du må vanligvis bruke litt tid på å fitte med nøyaktige målinger for å få alt akkurat.

Begrensninger av jellooppsettet

Jellooppsett representerer et kompromiss mellom faste og flytende layouter, men de er ikke perfekte:

• Implisitt minimumbredde: Veldig smale nettlesere (som mobiltelefoner) kan ikke gjengi Oppsettet slik du vil. Heldigvis vil innholdet fortsatt være synlig, men ikke i akkurat det formatet du ønsket.

• Slettet skjermrom: Hvis du gjør den gjengitte delen av siden smal, blir ikke mye plass brukt i nettlesere med høyere oppløsning. Dette kan være frustrerende.

• Kompleksitet: Selv om denne layoutteknikken er langt enklere enn tabellbaserte oppsett, er det fortsatt litt involvert. Du må planlegge divs for å gjøre denne typen layoutarbeid.