Float-layout med 3 spalter
eksempel 4

Dette eksempel er mere udfyldt end de foregående eksempler. Dermed illustreres bedre nogle af de udfordringer, der kan opstå i forbindelse med omsætningen af et principlayout til en faktisk webside.

Udgangspunktet er eksempel 3, der i det store og hele er bevaret, men med nogle enkelte tilføjelser og rettelser.

Banner

Banneret eller sidehovedet, som nogle foretrækker at kalde det, er indsat som et absolut positioneret element, der indeholder dels et billede og dels overskriften. Jeg foretrækker her at indsætte billedet som et html-element. På den måde kan jeg give billedet er bredde på 100 procent (i mit stylesheet), og det vil så blive smallere eller bredere alt efter browservinduets bredde. Højden af billedet er 130 pixel, mens jeg har givet #banner-elementet en højde på 150 pixel. Dermed bliver der 20 pixel tom plads til indsætningen af en navigationsbjælke.

Navigationsbjælken

Da jeg har nøje styr på højden af de elementer, der indgår i toppen af siden, er det intet problem at indsætte navigationsbjælken til sidst i kildekoden. Det er det, jeg foretrækker af hensyn til søgerobotterne. Jeg ønsker at de skal læse artiklen før noget andet læses.

For at det kan ske, opretter jeg et absolut positioneret element #menubox, der placeres 130 pixel fra browservinduets overkant. Dette element skal have en eksplicit højde og bredde. Det er fordi jeg bruger float-egenskaben i den egentlige menu, og så kan jeg ikke regne med at menukassen vil tage mål efter sit indhold, således som det ellers ville være tilfældet.

Den egentlige menu i navigationsbjælken udgøres af en uordnet liste. Hvorledes en sådan laves til en vandret menubjælke har jeg gennemgået blandt andet i artiklen Introduktion til stylesheet-formaterede menuer med eksemplet 100 procent bred navigationsbjælke.

Det er dette eksempel, jeg har brugt på denne side, med de ændringer, der nu er nødvendiggjort af denne eksempelside.

Her vil jeg især påpege, at det er nødvendigt med en vis påpasselighed med de lodrette mål: Højden på menuens links skal være nøjagtigt som højden på menukassen.

Linielængde

De første 60 tegn i den første linie i denne artikel er forsynet med en grå baggrund. Hensigten er blot at vise, hvor lang en linie på 60 tegn er ved 100 procent skriftstørrelse.

Der er mange spørgsmål vedrørende webdesign, som det kan være svært at svare konkret på, men én ting er alle enige om: Den bedste og mest læsevenlige linielængde er mellem 60 og 75 tegn.

Kommer linierne til at indeholde meget over 75 tegn, bliver teksten meget vanskelig at læse, og lysten til at læse teksten bliver også mærkbart ringere, selv om det drejer sig om stof, vi er meget interesserede i.

Problemet er ikke så stort ved et 3-spaltet layout som ved 1-spaltede eller 2-spaltede layouts. Lidt afhængigt af skrifttype kan der være over 100 tegn på en linie, der går fra kant til kant i et browservindue, der er 800 pixel bredt.

I mit normale 2-spaltede layout er der afsat 230 pixel til en højrestillet menukolonne. I et 800 pixel bredt browservindue er der derfor 570 pixel tilovers til artikeltekst. Det giver ved 100 procent skriftstørrelse ca. 75 tegn. I praksis bliver det nærmere 65-70 tegn, fordi der jo også skal være plads til marginer og/eller padding mellem sidens kolonner.

Men hvad nu hvis browseren maksimeres til de 1280 gange 1024 skærmbillede, jeg normalt arbejder med? Ja så øges linielængden til vel over 100 pixel.

Det er jo ikke så godt. Men her kommer max-width-egenskaben ind i billedet. max-width-egenskaben angiver den største bredde et element kan have. Så hvis jeg sætter max-width til 75 em for hele siden – inlusive den højrestillede kolonne og den elastiske artikelkolonne, bliver artiklens linielængde aldrig over 70-75 tegn.

max-width-egenskaben

For at du kan vurdere effekten af max-width-egenskaben har jeg lavet en kopi af denne side, hvor #page-elementet, der omslutter alt indhold på siden, har fået egenskaben max-width:55em;. Det er eksempel 4a.

Bruger du Internet Explorer 6, vil du ikke kunne se nogen forskel på denne side og eksempel 4, for så vidt angår bredden af siden og dermed linielængden. Denne browser fortolker nemlig under normale omstændigheder ikke egenskaben max-width. Bruger du en bedre browser som f.eks. Firefox, Opera, Mozilla eller Netscape 6 eller 7, vil du kunne se en dramatisk effekt: Siden kan simpelthen ikke blive bredere end de 55em, svarende til ca. 900 pixel.

På trods af, at Internet Explorer 5 og 6 ikke tolker max-width-egenskaben, bruger jeg den alligevel. Dels er der flere og flere der har fået øje for, at Firefox, der er en gratis browser, er klasser bedre end Internet Explorer. Og det er ikke alene på punkter, som kun en websidekonstruktør interesserer sig for.

Og dels fordi Internet Explorer 7, som er frigivet netop som jeg skriver denne revision af websiden, som håbet under- støtter max-width.

Deans IE 7 patch

I forhold til IE5 og IE6 kan du jo bruge Dean Edwards' IE 7 patch, som jeg har beskrevet på websiden om dette nyttige JavaScript.

Min pointe her er, at hvis du er hip på at din linielængde under ingen omstændigheder må overstige et vist antal tegn, heller ikke i Internet Explorer, har du i max-width og IE 7 et redskab til dette.

Skal det være rigtig fint, sætter du max-width i em'er, for så bliver linielængden altid den samme, selvom læseren bruger browserens tekststørrelsesværktøj til at øge skriftstørrelsen.

Stylesheet

Stylesheet'et til denne side kan du se ved at bruge browserens Vis kilde-funktion. Det er forsynet med rigelige kommentarer, der nok skulle klare eventuelle tvivlspørgsmål.

April 2007.

 

OBS! OBS! OBS!

I dette eksempel er venstre spalte absolut positioneret. Det har den konsekvens, at denne spalte ikke har indflydelse på sidens højde. Derimod vil sidefoden blive presset nedad af indholdet i midterspalten eller i højre spalte, alt efter hvilken af disse, der har det meste indhold.