Favoritlayout 3

3 kolonner, elastisk midterkolonne, sidehoved og sidefod

Principlayout 5 danner grundlag for dette populære design, 3 spalter med en elastisk midte. En af grundene til populariteten er – tror jeg – at det giver dig en fin mulighed for at forsyne en webside med såvel en hovedmenu som en undermenu. En anden grund er, at det giver rige muligheder for at bringe annoncer på websiden uden at de stiller sig direkte i vejen for artiklens tekst.

Personligt har jeg ikke brudt mig meget om dette layout, jeg synes det efterlader for lidt plads til artikelstoffet, ca. 40 tegn på denne side, når den vises i et 800 pixel bredt browservindue. Det følgende afsnit viser et par linier mumletekst, hvor de første 65 tegn har grå baggrund.

Men jeg har heller aldrig skullet lave annoncebærende websider.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod

Html-kode

Skitsen til kildekoden er som følger:

<div id="page">
  <div id="banner">
  ...
  </div>
  <div id="indhold">
  ...
  </div>
  <div id="leftcol">
  ...
  </div>
  <div id="rightcol">
  ...
  </div>
  <div id="footer">
  ...
  </footer>
</div>

Websidens bredde

I dette eksempel er websidens bredde, som defineret ved #page-elementet, sat til 90 procent af browservinduets bredde, i modsætning til de tidligere favoriteksempler, der alle havde en fikseret bredde på 45 em.

Inde i #page-elementet er de 5 ørige elementer placeret. Både højre og venstre kolonne er absolut positionerede, så du kan indsættes kildekoden hvor det passer dig, blot du holder dig inden for #page-elementet.

Det grundlæggende stylesheet for siden ligner meget det fra Principlayout 5:

div#indhold {
  margin: 0 170px 0 180px; 
  padding:0 1em;}
  
#leftcol { 
  position:absolute;
  left:0;
  top:80px;
  width:180px;}
  
#rightcol { 
  position:absolute;
  right:0;
  top:96px;
  width:160px; }

#indhold-elementet har her en venstre og højre padding på 1 em. Det betyder, at jeg kan udnytte den fulde bredde af venstre kolonne til en menu og nogle infobokse der er 180 pixel brede.

For højre kolonnes vedkommende er jeg nødt til at gøre den lidt smallere end #indhold-elementets højre margin tillader, på grund af spaltestregen.

Bemærk menuen i højre kolonne. Den formateres af det samme stylesheet, jeg har brugt på alle de tidligere favotrit layout eksempler. Men da højre spalte er en smule smallere end venstre spalte, er denne menu forsynet med et ekstra klassenavn:

<ul class="cssmenu rmenu">

Det er absolut tilladt at have flere klassenavne knyttet til et element på denne måde, og alle moderne browsere fortolker dem ens og korrekt. Det betyder, at min formdeklaration for .rmenu, se herunder, sætter en anden bredde på menuen end den, der gælder for .cssmenu. Jeg skal blot huske at sætte klassenavnet rmenu efter klassenavnet cssmenu.

ul.rmenu {width:160px;}
* html  ul.rmenu li a{width:150px;}

Resten af layoutet er vel egentlig blot et spørgsmål om flere eller færre streger, baggrundsfarve eller grafiske baggrunde.

Det er værd endnu en gang at notere sig at denne layout-metodes største mangel er, at de absolut positionerede css-kasser, #leftcol og #rightcol, ikke har en iboende højde. Deres højde afhænger helt og aldeles af indholdets mængde. Konsekvensen er, at du ikke umiddelbart kan lægge en baggrundsfarve eller en baggrundsgrafik ind, så det syner som om farve eller grafikken fylder hele spalten.

Lige høje kolonner

Netop dette problem har kaldt en del kreative kræfter frem hos forskellige designere, som jeg fortæller om i et par separate artikler: Webside layout med float-egenskaben og Gelé-layout.

Der er dog en kvikfix løsning, som jeg fortæller om i artiklen Principlayout 7. Med dette princip i bagagen har jeg lavet en alternativ version af denne side med kulørt baggrund bag de to smalle spalter: Favoritlayout 4.

Kildekoden

Hvis du vil se html-kildekoden og stylesheet'et for hele siden, må du bruge browserens Vis kilde funktion.

Favorit-layouts

Retur til foregående side