Webdesign 101 demoside

CSS layout

2-spaltet layout med lige høje spalter

Højrestillet menuspalte med brug af negative marginer

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