Webdesign 101 demoside

CSS layout

2-spaltet layout med lige høje spalter

Ens spaltehøjde, vilkårlig længde på begge spalter

Skjul/vis tekst i højre spalte
Vis/skjul tekst i venstre spalte

I de foregående eksempler på layout med float-egenskaben tegnede jeg en eller to spaltestreger, til adskillelse af spalterne, ved at give #indhold-kassen en border-left, hhv. border-right.

En sådan spaltestreg går kun fra top til bund, hvis indholdet i #indhold-kassen altid fylder mere end indholdet i højre eller venstre spalte, eller – for det trespaltede layouts vedkommende – i begge spalter.

Laver du skabeloner til et websted med mange sider, kan du ikke altid være sikker på, at hver eneste side i al fremtid vil have sådanne egenskaber.

Før vi kaster ud i øvelsen med at få det til at se ud, som om to eller flere spalter er lige høje, skal vi først gøre os klart, at i almindeligt flydende eller elastisk webdesign vil vi aldrig kunne opnå at vide den nøjagtige højde på et givet element.

Metodikken

Den grundlæggende metodik i den øvelse, jeg beskriver på denne og følgende sider, beror på følgende principielle HTML-kode:

<div id="wrapper">
<div id="indhold">
[ Arikeltekst ]
</div>
<div id="menucol">
[ Menuspaltens indhold ]
</div>
<div class="clb"></div>
</div>

Det synes klart, at underkanten af #wrapper-elementet vil blive presset nedad af indholdet i enten #indhold-elementet eller #menucol-elementet, uanset hvilket af disse elementer der har det meste indhold.

Dette vil tydeligt kunne ses, dersom vi giver #wrapper-elementet en baggrundsfarve.

Det er afgørende, at du på den ene eller den anden måde clear'er de to float'ede elementer, #indhold og #menucol, ellers vil #wrapper-elementet ikke udvides som følge af indholdet af de to elementer.

Jeg har skrevet mere om denne sag i artiklen Floatede elementer i en wrapper, der også beskriver forskellige metoder til at foretage denne clear'ing.

#wrapper-elementets baggrund

Det synes klart, at dersom vi med held kan forsynes #wrapper-elementet med baggrundsfarve, kan vi lige så vel bruge en baggrundsgrafik. Passende udformet kan vi sørge for at denne grafik har en bredde, der netop svarer til den ønskede bredde af vores menukolonne. En sådan grafik ser du på denne side. Den er lys grå med en smal blå border på højre og venstre side, og har følgende udseende:

Stylesheet'et for de operative elementer på denne side er:

div#indhold {
  padding-top:1.5em;
  margin: 0 0 0 202px;
  padding-left:1em;}
div#menucol {
  width:185px;
  float:left;
  padding-top:1.5em;
  padding-left:10px;}
div#wrapper {
  background-image:url(res/leftcolbg200.png);
  background-repeat:repeat-y;
  background-position:left top; }
 #textright {display:block;}
 #textleft {display:none;}
  .clear {clear:both;height:0;}

Bemærk her at menuspaltens bredde er fikseret til 195 pixel. Baggundsgrafikken skal nødvendigvis have en bredde, i dette tilfælde en fikseret bredde, der skal være større end eller lig med menuspaltens bredde.

Eftersom den her anvendte baggrundsgrafik er symmetrisk omkring den lodrette akse, kan den uden videre genanvendes i et layout med en højrestillet menuspalte, jf. eksempel 6a.

Mangler ved dette layout

Da dette layout bygger på, at kun ét element float'es, skal dette element nødvendigvis komme før artikelspalten i kildekoden. Hvorledes dette ordnes, så menuen kommer efter artikelindholdet, beskriver jeg i eksempel 7.

8. august 2007