Alt er i endring.
I helgen leste jeg en veldig interessant bok: "Alt du vet om CSS er feil". Boken illustrerer hvordan, nå at IE har bestått ACID 2-testen, kan vi endelig begynne å bygge våre nettsider på de riktige måtene. Hittil har vi blitt tvunget til å implementere hack for å danne det perfekte oppsettet - absolutt posisjonering, usikre flyter osv. Men det begynner å forandre seg! Jeg skal vise deg hvordan i tjue minutter.

CSS-tabeller er så mye enklere å bruke at det er verdt å vedta dem så snart du muligens kan.
-Kevin Yank

Denne opplæringen vil vise deg hvordan du skal bygge opp layoutene dine i fremtiden. Faktisk bør du bruke disse metodene akkurat nå! I stedet for å stole på flyter og absolutt posisjonering for å bygge våre layouter, vil vi i stedet fokusere på å bruke css tabeller.

Trinn 1: Opprette en to-kolonne layout den nåværende måten

Å vite at IE7 og nedenfor ikke gjenkjenner CSS-tabellegenskapene, må vi først bygge vår utrolige enkle side på den "gamle" måten. Lim inn følgende kode i "index.html" -filen din.

  
 
 
 Min topptekst
 
 
 
 
1
 
2
 
3
 
4
 
 
 -- dummy tekst-- 
 
 
 
Min bunntekst
 
 
 

Det er ikke for mye at vi må gå over. Vi har laget innholdet for vårt to kolonnearrangement. Navigeringen (#nav) vil bli floated til venstre for hovedinnholdet (#primaryContent). La oss gå videre og legge til litt rask styling. Jeg skal bruke bakgrunnsfarger (grimme også!), Slik at du enkelt kan bestemme hvor hver div begynner og slutter.

Trinn 2: Legge til CSS

 / * Tilbakestill bare noen få elementer * / h1, ul, li margin: 0; polstring: 0; listestil: none;  p margin: 0; polstring: .5em 0;  / * Hovedinnhold styling * / #wrap width: 800px; margin: auto;  #header, #footer bakgrunn: rød;  #nav bakgrunn: grå; bredde: 150px; flyte: venstre;  #primaryContent bakgrunn: gul; margin-venstre: 150px; polstring: 0 .5em; 

Vi har satt en bredde til sidebaret (#nav) på 150px og har drevet det til venstre. I stedet for å flytte primærinnholdsseksjonen i tillegg, ville det være bedre å bare legge til en venstre margin som er lik bredden på sidelinjen. Vi legger også til litt polstring for å skyve teksten bort fra kantene på div.

 #primaryContent bakgrunn: gul; margin-venstre: 150px; polstring: 0 .5em; 

Du burde ende opp med noe som ligner på dette:

Umiddelbart (etter at blikket fra de forferdelige farger går bort) ser du at den grå bakgrunnen i sidefeltet ikke strekker seg til bunnen. Dette skyldes at flytede elementer bare tar opp så mye plass som nødvendig.

En løsning ville være å hardkode en bestemt høyde, men dette er en dårlig ide. Hva om hovedinnholdet endres? Du må gå tilbake til CSS-filen din for å justere høydeverdien igjen. Så ikke gjør det! I stedet er den aksepterte løsningen å skape et bakgrunnsbilde og fliser det vertikalt. Dette kalles å lage faux kolonner. "Bare flytt deg til Photoshop, opprett et lerret på 800 x 10 piksler, og sett inn de riktige fargene. Du vet at sidefeltet har en grå bakgrunn og er 150 piksler bred, så bruk bare markeringsverktøyet til utvalget det området, og fyll det med grått. Når du gjør det samme for den forferdelige gule, vil du ende opp med dette:

Lagre det i roten til løsningen din og ring den til "bg.png". Vi kan nå vertikalt flisere dette bildet, og dermed skape faux kolonner.

 #main background: url (... /bg.png) repeat-y; 

Nå har vi lykkes med å lage illusjonen om like kolonner.

Trinn 3: Den nye veien

Så det var ikke alt sammen for vanskelig! Men det trengte fortsatt for mye tid til å lage noe så enkelt som en to-kolonneoppsett. Vi måtte til og med gå inn i Photoshop for å fullføre utseendet! Denne gangen, la oss gjenskape nettstedet ved hjelp av CSS-tabeller. Ikke bekymre deg, veldig lite trenger å forandre seg!

Fortsett å minne deg selv, IE7 og under gjenkjenner ikke CSS-tabeller. Så, i hvert fall for nå, må vi fortsatt bruke metoden som vi har utført over. Opprett et nytt stilark og ring det "ie.css". Kopier og lim inn alt CSS som vi har skrevet inn i denne filen. Ikke slett det fra "default.css". Vi fjerner ganske enkelt noen få stiler. Vi vil ikke implementere noen hack eller flyter for å lage våre kolonner denne gangen.

Fjern følgende stiler fra "standard.css" stilark.

 / * Fordi vi skal bruke et "bord" -layout, trenger vi ikke å flette et bakgrunnsbilde! * / #main bakgrunn: url (... /bg.png) repeat-y;  / * Ingen flyter! * / #nav float: left;  / * Ingen flyter = ingen venstre margin. * / #primaryContent margin-left: 150px; 

Implementere CSS-tabeller

Nå som du har fjernet unødvendige stiler, la oss legge til noen nye! Først må vi opprette to kolonner i vår "main" div: en for navigasjonen, og den andre for det primære innholdet. La oss stille inn displaytypen #main for å være en tabell.

 #main display: table; 

Deretter bør vi erklære elementene #nav og #primaryContent for å være tabellceller.

 #nav, #primiaryContent display: tabell-celle; 

Tro det eller ei, det er alt vi trenger for å lage vårt kolonnearrangement. Vi har allerede satt bredden på navigasjonen til 150px bred. PrimaryContent div vil bare fylle gjenværende plass. Her er et øyeblikksbilde av vårt layout ved hjelp av CSS-tabeller.

Det ser ut akkurat det samme! Men vi brukte ikke noen flyter eller absolutt posisjonering! Men som jeg sa før, hvis vi nå ser på nettstedet vårt i IE, ser vi.

Selv om IE8 vil vise nettstedet riktig, vil IE7 og under ikke. For å kompensere, må vi inkludere et betinget stilark. (Det er derfor vi reddet CSS fra vårt opprinnelige layout og plasserte det i "ie.css").

Nå er alt bra! Moderne nettlesere vil gjengi nettstedet ved hjelp av CSS-tabeller, og IE vil bruke den tradisjonelle flytemetoden.

Den sanne kraften

Den sanne kraften kommer til spill når vi gjør endringer. For eksempel, tenk at vi, nedover veien, bestemmer oss for å legge til en tredje kolonne på nettstedet vårt. Vi kan oppnå dette på omtrent tretti sekunder.

Trinn 1: Legg til ytterligere markering

Etter den avsluttende taggen i primaryContent div, legg til den nye kolonnen.

... 

 #secondaryContent width: 90px; display: tabell-celle; bakgrunn: oransje;