Skjul/vis tekst i venstre spalte
Vis/skjul tekst i højre spalte
I eksempel 8 demonstrerede jeg, hvorledes du kunne kombinere to nyttige design-principper til et layout med to lige høje spalter.
Det er en ret simpel sag at spejlvende hele eksempel 8 for at få den side, du her kigger på. Det vigtigste er i stylesheet'et at udskifte ordet left med ordet right og vice versa:
div#side {
width:90%;
max-width:50em;}
div#menucol {
width:185px;
float:right;
padding-top:1.5em;
padding-right:10px;}
div#wrapper {
background-image:url(res/leftcolbg200.png);
background-repeat:repeat-y;
background-position:right top;
border-left:1px solid #257;} /* Ny border */
#container {
width: 100%;
float: left;
margin-right: -202px;}
div#indhold {
padding-top:1.5em;
margin: 0 202px 0 0;
padding-right:1em;
padding-left:1em;} /* Ny padding */
Du må ikke lade dig forvirre af, at jeg bruger den samme baggrundsgrafik til en højre menuspalte som jeg har brugt i tidligere eksemplers venstre menuspalte. Det kan jeg gøre, fordi min grafik er symmetrisk om den lodrette akse.
Bemærk i dette eksempel endvidere, at layoutet er flydende, i og med
div#side-elementet, der omfatter alt indhold på siden, har fået en bredde
på 90% (af browservinduets bredde).
Dermed bliver artikelspalten smallere eller bredere alt efter browservinduets
størrelse, mens menuspalten bevarer sin bredde på 195 pixel (width
+ padding).
Dog kun op til en vis grænse, det jeg har sat en max-width
på div#side-elementet på 50 em. Derved undgår jeg at artiklens linier bliver alt
for lange, hvad de ellers ville gøre, hvis siden blev vist på en skærm med en
meget stor opløsning.
I nogle tilfælde ville det imidlertid være en fordel, hvis vi kunne udnytte skærmarealet lidt bedre end med denne løsning. Det er emnet for eksempel 10, hvor jeg demonstrerer brugen af min-width til at sikre, at siden aldrig bliver smallere end jeg har bestemt, og brugen af max-width til at sikre at bredden øges, men ikke så meget som browservinduet øges i bredde. En lags reduceret proportionalitet, kan man sige.
8. august 2007