Principeksempel 7

Ens kolonnehøjde

Retur til foregående

Skjul/vis tekst

Linket herover skjuler teksten i højre kolonne (og viser teksten igen, hvis du klikker en gang til). Meningen er at demonstrere, at den tilsyneladende højde af den smalle kolonne er uafhængig af indholdet, så længe indholdet af højre kolonne altid er mindre end indholdet af venstre kolonne.

Sidens layout er baseret på Principlayout 3. Men i stedet for at lave en bred højre margin, der skaber plads til den absolut positionerede css-kasse #rightcol, har jeg sat margin-bredden til 0 og til gengæld lavet en 200 pixel bred border#indhold-kassens højre side:

#indhold {
  margin:0; 
  border-width:0 200px 0 1px;
  border-style:solid;
  border-right-color:silver;
  border-left-color:black;
  background-color:#eef;
  padding:0 1em;}

#rightcol-elementet er uforandret i forhold til principlayout 3:

#rightcol { 
  position:absolute;
  right:20px;
  top:80px;
  width:170px; }

Det betyder, at dette element placerer sig samme sted som før, men nu er pladsen, hvor elementet er, ikke en margin, der i sagens natur ikke kan have en farve, men i stedet en border, der kan gives en kulør.

Det er fortsat således, at du ikke ustraffet kan have et indhold i den højre spalte, der fylder mere i højden end artiklen i venstre spalte. For at lave et layout, hvor alle kolonner syner lige høje, uanset hvilken en af dem der har det meste indhold, skal vi tage mere avancerede teknikker i brug. Dem forklarer jeg om i et par separate artikler: Layout med negative marginer og Variabel max-width.

Jeg har brugt det her beskrevne princip i favoritlayout 4.

Grafisk baggrund

Det kan også lade sig gøre at indsætte en grafisk baggrund i form af en grafik til fliselægning. I givet fald skal den lægges ind som en baggrundsgrafik i #indhold-elementet, fordi de to brede rammekanter “tilhører” dette element. Vi må så lægge en tekstcontainer rundt om selve teksten og give den en hvid baggrundsfarve, som så dækker over den grafisk baggrund inde i selve #indhold-kassen.

CSS-standarden siger nemlig, at et elements baggrund skal strække sig ud under border. Det sker da også i de fleste browsere, men desværre kommer Internet Explorer igen til kort. Eksperimentet kan gennemføres så det tegner den nydeligste grafiske baggrund bag de to smalle spalter – hvis vel at mærke siden betragtes i Firefox, Opera eller en anden moderne browser, der tolker CSS-standarden nogenlunde korrekt.

Højre kolonne

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.