Favoritlayout 4

Lige høje kolonner

Vis/skjul tekst i venstre kolonne.
Vis/skjul tekst i højre kolonne.

Dette eksempel er en kombination af favoritlayout 3 og principlayout 7, hvori jeg demonstrerede, hvordan vi kan få det til at se ud, som om spalterne er lige høje.

Ideen er, at vi i stedet for de brede marginer, vi sædvanligvis sætter på den midterste kolonne, sætter marginerne til 0 og i stedet indsætter nogle rammekanter (borders), der er lige så brede som vore marginer var.

Det stylesheet, der skaber effekten på denne side, er for de væsentligste deles vedkommende:

#indhold {
  /* Før: margin: 0 170px 0 180px; */
  margin:0;
  border-width:0 180px 0 200px; /* Ny */
  border-style:solid;
  border-left-color:#dedede;
  border-right-color:#dedede;  }

#leftcol { 
  position:absolute;
  left:10px;
  top:80px;
  width:180px;}
  
#rightcol { 
  position:absolute;
  right:10px;
  top:96px;
  width:160px;
}

Disse tre formdeklarationer

  1. sætter nogle brede rammekanter (borders) i venstre og højre side af #indhold-elementet
  2. sætter farve på disse rammekanter
  3. positionerer et 180 pixel bredt #leftcol-element oven i den venstre border, 10 pixel til højre for #page-elementets venstre kant
  4. positionerer et 160 pixel bredt #rightcol-element oven i højre border,10 pixel fra #page-elementets højre kant.

Streger

I et CSS-baseret layout skabes vandrette og lodrette streger af en tynd border omkring de de forskellige elementer. Afstanden mellem noget tekst og en streg skabes sædvanligvis af padding-egenskaben, mens stregens afstand til andre elementer sædvanligvis skabes af margin-egenskaben.

I dette eksempel må vi imidlertid gå lidt utraditionelt tilværks, idet de to væsentlige sider af #indhold-kassen allerede har en border, nemlig den meget brede border, der skaber plads til venstre og højre spalte.

Derfor laver jeg stregerne på højre og venstre side af alt indholdet ved at sætte en border-left og en border-right#page-elementet. Og derfor er jeg nødt til at fjerne border-left og border-right fra #banner- og #footer-elementerne.

Stregerne på venstre og højre side af #indhold-elementet kan laves ved at omslutte indholdet med en “wrapper”, eller en #textcontainer som jeg kalder den:

#textcontainer {
  margin:0;
  border-width: 0 1px;
  border-style: solid;
  border-color:black;
  padding:0 1em;
  position:relative;}

Når jeg har fjernet padding-left og padding-right fra #indhold-elementet presser teksten #textcontainer helt ud til siderne. padding-left og padding-right#textcontainer skaber nu luft mellem teksten og den border-left og border-right, der laver stregerne.

position:relative burde være overflødig, men er en god universalkur for en række dårligdomme i Internet Explorers CSS-fortolkning, således også her: Hvis jeg ikke havde gjort det, ville stregerne forsvinde i denne browser.

Varierende indholdsmængde

Med dette princip i bagagen har jeg lavet en version af denne side med kulørt baggrund bag de to smalle spalter, hvor du kan afprøve påstanden om, at de tre spalter altid vil se lige høje ud, uanset hvilken af de tre kolonner der har mest indhold: Favoritlayout 4a.

Retur til foregående

Mumletekst

Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.

Kildekoden

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

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam bibendum tempor nulla. Sed commodo. Aliquam feugiat lorem nec sem. Nullam consequat tristique libero. Suspendisse id erat. Duis ante sem, laoreet nec, nonummy non, posuere at, sapien. Nam porta. Cras sapien tortor, vehicula at, scelerisque quis, consequat at, enim. Fusce quis tortor. Quisque magna. Proin nunc. Phasellus purus metus, tempus a, lobortis in, mollis sed, erat. Nulla facilisi. Curabitur wisi.

Quisque posuere lobortis turpis. Aenean eu lacus. Donec sed lacus eget dui rhoncus tempor. Pellentesque tellus tortor, mattis non, posuere ac, mattis sed, diam. Maecenas accumsan libero sit amet libero. Sed velit ligula, vulputate sit amet, commodo non, ultrices vel, velit. Donec vitae risus quis erat semper congue. Nunc ornare faucibus enim. Aenean pretium elit nec velit. Phasellus commodo, nibh at vulputate dapibus, nisl quam venenatis sem, quis ornare nunc nulla ut libero. Aenean ipsum. Fusce lacinia congue mauris. Maecenas non libero. Nullam eget enim. Integer iaculis arcu dictum ligula. Ut neque ipsum, vestibulum ut, interdum at, aliquam vel, felis.

Favorit-layouts

Praesent imperdiet volutpat enim. Donec eget lectus. Morbi ornare dui vel eros. Morbi sit amet magna. Proin a tortor et mi iaculis cursus. Vivamus iaculis felis in justo. Donec dolor dolor, mollis et, sodales eget, vestibulum id, sapien. Proin fringilla risus ut lorem. Phasellus quis leo et sem tincidunt ultricies. Etiam dui lorem, gravida ac, volutpat at, mollis eu, wisi. Nam iaculis cursus arcu. Donec cursus, sem quis pulvinar bibendum, est leo sodales felis, sed laoreet lectus nibh at lacus. Sed erat. Aenean volutpat lacus sit amet pede. Duis nibh dui, tempor in, dictum non, ornare ac, ante. Nulla semper eros in justo. Nulla vel mauris.

Suspendisse mi pede, feugiat non, volutpat ut, placerat vitae, urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla a tellus. Quisque dolor nisl, placerat a, mollis ac, dignissim at, turpis. Curabitur wisi enim, commodo sit amet, iaculis et, ullamcorper non, quam. Donec arcu arcu, adipiscing a, tincidunt ut, laoreet non, eros. Proin bibendum gravida nisl. Nullam scelerisque consectetuer magna. Nam interdum risus non tortor. Donec eget sapien. In scelerisque, enim vitae porta vehicula, nibh ipsum elementum ipsum, eget hendrerit urna enim eu libero. Donec ornare lacinia diam. Phasellus venenatis lacus ac nulla. Integer euismod. Praesent nec purus. Mauris eget magna.