Webdesign 101 demoside

CSS layout

2-spaltet layout med navigationsbjælke og menupanel

float-egenskaben bruges til at oprette to spalter.

Omfatter et websted mere end 5-7 websider er det som regel utilstrækkeligt med en navigationsbjælke, hvor der kun er begrænset plads, hvis ikke navigationsbjælken skal blive alt for lang (bred).

I et menupanel kan der være flere menupunkter, selv om der selvfølgelig også her er en øvre grænse.

Dett eksempel viser en ganske populær løsning på problemet med links til mange sider. Ideen er kort, at navigationsbjælken omfatter links til forskellige sektioner på webstedet, mens menupanelet udgør links til de enkelte sider i de forskellige sektioner. Er der i sektionsmenuen tale om links til én af flere sider om samme emne, ses dette ofte, som her, illustreret ved hjælp af tre punktummer.

HTML-kildekode

<div id="side">
  <div id="sidehoved">
  [ Sidehovedets indhold ]
  </div>
  <div id="navbar">
  [ Navbar kode ]
  </div>
  <div id="menucol">
  [ Menupanel kode ]
  </div>
  <div id="indhold" class="clear">
  [ Artikeltekst ]
  </div>
  <div id="sidefod">
  [ Sidefodens indhold ]
  </div>
</div>

Menupanelet

Den eneste forskel i forhold til det 1-spaltede layout er indsætningen af elementet div#menucol, der indeholder HTML-koden til det venstrestillede menupanel. Denne HTML-kode har følgende udseende:

<ul class="menu">
<li><a href="/csslayout/">
CSS-layout af websider</a></li>
<li><a href="/fonts/">
Skrifter på websider</a></li>
<li><a href="/design/styleswitch.php">
Brugervalgte stylesheets</a></li>
<li><a href="/www/cssmenu/eksempelsite/page1.html">
Menuers tilgængelighed</a></li>
<li><a href="/css/roundcorners/">
Runde hjørner</a></li>
<li><a href="/www/background/">
Baggrundsgrafik</a></li>
</ul>

Igen ser du opstillingen af links som en uordnet liste. Det er stylesheet'et for denne liste, der sørger for at give den det særlige udseende. Også formateringen af et lodretstillet menupanel er der redegjort for i den artikel, hvorfra jeg hentede stylesheet'et til navigationsbjælken, Introduktion til stylesheet-formaterede menuer. Det er mit kvikfix-eksempel 1.

Layout

Hvordan får vi nu de to elementer – div#menucol og div#indhold –til at stå ved siden af hinanden? Svaret på det er brug af float-egenskaben, mere specifikt:

div#menucol {
  /*background:pink;*/
  width:12em;
  float:left;
  padding-top:25px;}
div#indhold {
  /*background:yellow;*/
  padding-top:25px ;
  margin: 0 0 0 13em;}

Ovenstående er et udpluk af den CSS-kode, der formaterer denne side. Du ser, at jeg har givet elementet div#menucol en bredde på 12em og egenskaben float:left, samt at jeg har sat en venstre margin på div#indhold elementet på 13em.

Reglerne for float er, at et element, der i kildekoden følger efter et left-float'et element, flyder op på højre side af dette, og at et element, der i kildekoden følger efter et right-float'et element, flyder op på venstre side af dette. I begge tilfælde forudsættes det, at dette andet element ikke er bredere, end at der er plads til det. Og det er denne plads, jeg skaber ved at give div#indhold-elementet i eksemplet en venstre margin på 13em. Det kan siges, at dette elements bredde er den samme som bredden af det overordnede element minus 13em.

Bemærk de udkommenterede farver i stylesheet-koden. Dem har jeg brugt til tydeligt at vise, hvor brede og høje de to omhandlede elementer er. Teori er jo meget godt, men praksis kan somme tider snyde os.

Brugen af en sådan bagrundsfarve demonstrerer med al ønskelig tydelighed at de to spalter er præcis så høje som indholdet tilsiger. Vi kan derfor ikke forsyne menukolonnen med en særlig baggrundsfarve eller en baggrundsgrafik, der giver udseende af, at de to kolonner er lige høje.

Vores muligheder for en visuel adskillelse af de to kolonner indskrænger sig til oprettelsen af en spaltestreg som den, du ser til venstre for denne tekst, ved hjælp af en tilføjelse til formdeklarationen for indholdselementet:

div#indhold {
  /*background:yellow;*/
  padding-top:40px ;
  margin: 0 0 0 15em;
  padding-left:1em;
  border-left:1px solid #257;}

En note om spalternes position

Bemærk, at det naturlige omløb på siden – det vil sige den orden, elementerne er indsat i kildekoden – er 1) sidehoved, 2) navbar og 3) et float'et element og et element, der flyder op på siden af det float'ede element, således at disse to sidstnævnte elementer holder overkant.

Men hvor er den overkant i forhold til sidehoved og navigationsbjælke? Det nøjagtige mål kan være ligemeget (i denne konstruktion), men vi vil gerne have menupanelet i venstre spalte og h2-overskriften i højre spalte til at stå nogenlunde lige højt oppe ved siden af hinanden.

Det burde sådan set være ligetil at give de to elementer #menucol og #indhold hver en padding-top på 20-30-40 pixel. Det er det desværre bare ikke.

Sagen er i al sin korthed, at de tre-fire mest anvendte browsere (Firefox, Internet Explorer 6 og 7 og Opera) beregner højden af navigationsbjælken på forskellige måder. Elementet er en uordnet liste, der i sig selv ingen højde har, men hvis højde skabes af indholdet; men indholdet er left-float'ede blokelementer,der heller ikke øver nogen indflydelse på elementernes omløb.

Der er to løsninger på problemet, enten at beregne højden af div#navbar-elementet eller sørge for at de left-float'ede elementer skubber underkanten af div#navbar-elementet derned hvor vi sådan set regner med at den skulle være.

I dette eksempel har jeg brugt den sidste løsning, som jeg har skrevet en hel del om i artiklen Float wrapping. Jeg anbefaler at du læser denne artikel, for vi får god brug for de principper, der er beskrevet i den, når vi skal arbejde videre med float-layouts.

Mangler ved dette layout

Jeg kan ikke nok understrege, at dette i mine øjne er måden at lave et 2-spaltet layout på, i hvert fald for den websidekonstruktør, der endnu er på sine første svømmeture og ikke har vovet sig ud på det dybe vand.

De mere garvede vil indse, at et sådant layout ikke altid er tilstrækkeligt. De mest indlysende mangler er
– den allerede beskrevne, at du ikke kan skabe et visuelt mere attraktivt udtryk ved at få to kortere spalter til at se lige høje ud;
– at float-mekanismen kræver at det float'ede element kommer først i kildekoden. I forhold til søgerobotter, PDA'er og talende browsere vil det som regel være fordelagtigt at have den egentlige artikeltekst først.

Det er måske heller ikke indlysende hvordan du laver et sådant layout med en højrestillet menuspalte eller hvordan du bruger de her beskrevne principper til at lave et 3-spaltet layout.

De to sidstnævnte udfordringer er hurtigt løst, se eksempel 3 og eksempel 4. Problemet med ensartet kolonnehøjde kræver lidt mere, men jeg kommer til det i tur og orden, eksempel 5 og følgende.

8. august 2007