En gennemgang med eksempler af hvordan du bruger float-egenskaben til at lave 2- og 3-spaltede layouts uden brug af tabeller.
De fleste af siderne har nogle funktioner, der viser og skjuler tekst i den smalle spalte og skjuler og viser tekst i den brede spalte. Det er naturligvis for at demonstrere forholdene omkring lige høje spalter og nedrykning af sidefoden.
I mange tilfælde er effekten ikke umiddelbart synlig. Du må scrolle for at få syn for sagen.
Hvis dette stof – det vil sige layout af websider ved hjælp af
float-egenskaben – forekommer dig lidt eksotisk,
vil jeg meget anbefale, at du i hvert
fald løseligt gennemlæser alle eksemplerne. Eksemplerne bygger på hinanden,
så at sige, så de senere eksempler til en vis grad forudsætter kendskab til
de ting, der er forklaret i de foregående eksempler.
Jeg har i tidens løb fået et utal af e-mails fra folk, der har ønsket en uddybning af det jeg har skrevet i mine bøger eller forklaret på mine websider. Jeg bestræber mig selvfølgelig på at besvare alle sådanne e-mails så fyldestgørende som muligt, og mange af dem har også givet anledning til rettelser eller omskrivning af mine artikler.
Sådan vil det også fortsat være. Men mine erfaringer med dette får mig til at komme med nogle få råd til dig:
Du kan returnere til denne side fra en eksempelside ved at klikke på sidehovedets overskrift CSS layout. Du kan også bruge sidenummermenuen nederst på alle sider.
De to sidstnævnte kan forekomme ret uoverskuelige. Et visuelt mere overskueligt eksempel er mit ældre eksempel: Eksempel 2a til min tidligere artikel om 3 lige høje spalter med CSS.
Men det lader sig ikke skjule, at det er ret indviklet. Det er der også andre og smartere websidekonstruktører end undertegnede der synes, så derfor har også jeg været på jagt efter
“Den hellige gral” i webdesign er et trespaltet layout med sidehoved og sidefod, hvor sidefoden flytter sig nedad i forhold til sidens indhold, hvor alle spalter ser lige høje ud og hvor spalternes indhold i kildekoden kan anbringes efter forgodtbefindende. Eller noget i den retning.
Sandheden om det, der også er blevet kaldt "The One True Layout" er den samme som sandheden om det bæger, Jesus drak af under den sidste nadver – ingen ved hvordan det så ud, heller ikke Spielberg eller Indiana Jones.
Sandheden om webdesign er, at der er mange forskellige forskellige metoder til at nå det samme mål.
I eksempel 12 præsenterer jeg min løsning med skyldighed til ganske mange artikler om dette emne på positioniseverything.net og alistapart.com. Den forløsende artikel har været Matthew Levines In Search of the Holy Grail. Det er 3 spalter i “den rigtige orden” i kildekoden: Først sidehoved, dernæst midterste spalte, venstre spalte, højre spalte, sidefoden og til sidst navigationsbjælken. Stylesheet'et til denne løsning er rigeligt kommenteret i eksemplet, der er flere små nyttige CSS-tricks, som ikke mindst stammmer fra ovennævnte websteder.
2. oktober 2007