Hvordan man bygger en fast bredde Flytende layout for HTML5 og CSS3 programmering - dummies

Fluidoppsett er veldig bra. De er veldig fleksible, og de er ikke vanskelig å bygge i HTML5 og CSS3. Noen ganger er det imidlertid hyggelig å bruke en fast breddeoppsett, spesielt hvis du vil at layoutet ditt skal passe til et bestemt bakgrunnsbilde.

Den primære egenskapen til en fast breddeoppsett er bruken av en fast måling (nesten alltid piksler), i stedet for de prosentvise målingene som brukes i en væskelayout.

Slik setter du opp HTML

Som vanlig er HTML-koden minimal. inneholder noen få navngitte divs.

fixedwidth. html

Fast breddeoppsett

Venstre kolonne

Høyre kolonne
Fotfeste

Fest bredden med CSS

Etter at HTML er opprettet, kan du bruke CSS til å håndheve ordningen med to kolonner.

Her er CSS-koden:

#header {bakgrunnsfarge: # e2e393; grensebunn: 3px solid svart; tekstjustering: senter; bredde: 800px; padding-top: 1em;} # venstre {float: left; bredde: 200px; fjern: venstre; grense-høyre: 1px solid svart; høyde: 30em; overløp: auto; polstring-høyre:. 5em;} #right {float: left; bredde: 570px; høyde: 30em; overløp: auto; padding-left:. 5em;} #footer {width: 800px; tekst-align: center; bakgrunnsfarge: # e2e393; border-top: 3px dobbel svart; klare: begge;}

Det er alt ganske greit:

1. Farge hvert element for å se hva som skjer.

   Begynn med å gi hver div en annen bakgrunnsfarge slik at du kan se hva som skjer.

2. Bestem totalbredden på oppsettet.

   Velg en målbredde for hele oppsettet. 800 piksler er valgt fordi det er en rimelig standard bredde.

3. Juster bredden på de sidevennlige elementene.

   Det er ofte enklest å starte med elementer som topptekst og bunntekst som ofte tar opp hele bredden av designet.

4. Flyt kolonnene.

   Flyt hver kolonne til venstre.

5. Angi kolonnebredder.

   Begynn med å gjøre kolonnebreddene opp til bredden på hele designen. Senere justerer du litt for marginer og grenser.

6. Fjern den venstre kolonnen.

   Kontroller at venstre kolonne har den klare: venstre regelen som er brukt.

7. Sett kolonnehøyder.

   Gi hver kolonne samme høyde. Dette gjør at det ser ut som om du legger til grenser eller bakgrunnsfarger i kolonnene.

8. Juster grenser og polstring.

   Bruk grenser, polstring og margin for å justere siden din for å få det utseendet du vil ha.

9. Juster bredder igjen.

   Legge til grenser, polstring og margin kan endre bredden på de eksisterende elementene.Når du har endret disse egenskapene, ta nøye med på oppsettet ditt for å være sikker på at det ikke ble ødelagt, og endre de forskjellige breddene om nødvendig.