Infopanel
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
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.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
3 lige høje spalter
Vis/skjul tekst
i venstre kolonne.
Skjul/vis tekst
i midterste kolonne.
Vis/skjul tekst
i højre kolonne.
I eksempel 8 og eksempel 9 så vi, hvorledes vi kunne skabe en illusion af ens spaltehøjde i et tospaltet layout, samtidig med at vi – uanset om menuspalten var venstre- eller højrestillet, kunne anbringe menukoden i bunden af kildekoden.
Illusionen er skabt af det forhold, at begge spalter er
indeholdt i et #wrapper-element, hvis underkant skubbes nedad
af spalternes tekstindhold (og af billeder, hvis vi have haft
sådanne), således at en passende baggrundsgrafik i #wrapper-elementet
skaber en tilsyneladende baggrund for den smalle spalte.
Men hvis nu slår endnu en wrapper (Det engelske udsagnsord “to wrap” betyder “at pakke ind” og navneordsformen betyder således “indpakning”) om det hele, og på én eller anden måde sørger for at denne ekstra wrapper også omslutter en tredie spalte, vil såvel denne spalte som vor allerede eksisterende wrapper presse underkanten af vores nye wrapper nedad, igen uanset hvilket af de to elementer, der har det meste indhold.
HTML-kode og CSS-kode
<div id="side">
<div id="sidehoved">
[ sidehoved ]
</div>
<div id="navbar">
[ Navigationsbjælke ]
</div>
<div id="ydreboks">
<div id="indreboks">
<div id="container">
<div id="content">
<div id="newscol">
[ Venstre spalte ]
</div> <!-- slut #newscol -->
<div id="indhold">
[ Artikelindhold ]
</div><!-- Slut #indhold -->
</div><!-- Slut #content -->
</div><!-- Slut #container -->
<div id="menucol">
[ Menupanel ]
</div><!-- Slut #menucol -->
<!-- clear #indreboks -->
<div class="clb"> </div>
</div><!-- Slut #indreboks -->
</div><!-- Slut #ydreboks -->
<div id="sidefod">
[ Sidefod ]
</div>
</div>
8. august 2007