Webdesign 101 demoside

CSS layout

2-spaltet layout med negative marginer

2-spaltet layout med lige høje spalter, vilkårlig placering af menukolonnen.

Skjul/vis tekst i højre spalte
Vis/skjul tekst i venstre spalte

I eksempel 5 lagde vi grundstenen til den layoutmodel, vi her arbejder med:

div#indhold {
  width:30em;
  float:right;
  border-left:1px solid #257;
  padding-left:1em;}
div#menucol {
  width:13em;
  float:left;
  padding-top:1.5em;}

I eksempel 6 viste jeg hvordan vi ved hjælp af et #wrapper-element, der omslutter menuspalte og indholdsspalte kunne lave en grafisk bagggrund for menuspalten:

<div id="side">
  <div id="sidehoved">
  [ Sidehoved ]
  </div>
  <div id="navbar">
  [ Navigationsbjælke ]
  </div>
  <div id="wrapper">
    <div id="menucol">
    [ Menupanel mm. ]
    </div><!-- Slut #menucol -->
    <div id="indhold">
    [ Artikeltekst ]
    </div><!-- Slut #indhold -->
  <div class="clear"> </div>
  </div> <!-- Slut #wrapper -->
  <div id="sidefod">
  [ Sidefod ]
  </div>
</div><!-- Slut #side -->

Stylesheet'et til den HTML-konstruktion ser således ud:

div#indhold {
  padding-top:1.5em;
  margin: 0 0 0 202px;
  padding-left:1em;}
div#menucol {
  width:185px;
  float:left;
  padding-top:1.5em;
  padding-left:10px;}
div#wrapper {
  background-image:url(res/leftcolbg200.png);
  background-repeat:repeat-y;
  background-position:left top; }

Faktorernes orden

Den HTML-kode, vi efterstræber, ser således ud, efter at vi har byttet rundt på kildekodens orden på de to vigtige elementer her:

<div id="side">
  <div id="sidehoved">
  [ Sidehoved ]
  </div>
  <div id="navbar">
  [ Navigationsbjælke ]
  </div>
  <div id="wrapper">
    <div id="indhold">
    [ Artikeltekst ]
    </div><!-- Slut #indhold -->
    <div id="menucol">
    [ Menupanel mm. ]
    </div><!-- Slut #menucol -->
  <div class="clear"> </div>
  </div> <!-- Slut #wrapper -->
  <div id="sidefod">
  [ Sidefod ]
  </div>
</div><!-- Slut #side -->

Hvis du et nu holder øjnene stiftet rettet mod vort #indhold-element, og omgiver dettte med endnu et div-element, får du følgende:

<div id="side">
  <div id="sidehoved">
  [ Sidehoved ]
  </div>
  <div id="navbar">
  [ Navigationsbjælke ]
  </div>
  <div id="wrapper">
    <div id="container">
      <div id="indhold">
      [ Artikeltekst ]
      </div><!-- Slut #indhold -->
    </div> <!-- Slut #container -->
  </div>
    <div id="menucol">
    [ Menupanel mm. ]
    </div><!-- Slut #menucol -->
  <div class="clear"></div>
  </div> <!-- Slut #wrapper -->
  <div id="sidefod">
  [ Sidefod ]
  </div>
</div><!-- Slut #side -->

Styleheet'et for to involverede elementer – #container og #indhold – ser nu således ud:

#container {
  width: 100%;
  float: right;
  margin-left: -202px;} 
div#indhold {
  padding-top:1.5em;
  margin: 0 0 0 202px;
  padding-left:1em;}

Vi har nu et element, #container, der er 100 procent bredt (i forhold til div#side-elementet, der omslutter alt indhold på siden), som er er float'et til højre og som har en negativ venstre margin på 202 pixel.

Reglerne for float siger, at indhold, der ikke er float'et, skal flyde op på venstre side af et højre-float'et element, hvis der ellers er plads til det. Og den plads har vi netop skabt ved hjælp af den negative margin.

Min intution gør oprør her, men hvis man sætter sig ned med håndbogen (Fodnote) og tænker så det rasler, kan man godt følge ræsonnementet.

Og selv om man ikke kan, er denne side og utallige andre sider på nettet bevis på at resultatet er som ønsket.

For en ordens skyld hele stylesheet'et til de operative elementer (alt mellem sidehovedet og sidefoden):

div#menucol {
  width:185px;
  float:left;
  padding-top:1.5em;
  padding-left:5px;}
div#wrapper {
  background-image:url(res/leftcolbg200.png);
  background-repeat:repeat-y;
  background-position:left top; } 
#container {
  width: 100%;
  float: right;
  margin-left: -202px;} 
div#indhold {
  padding-top:1.5em;
  margin: 0 0 0 202px;
  padding-left:1em;} 

“Håndbogen” er Eric Meyer: Cascading Style Sheets, 2nd Edition, O'Reilly 2004. Ryan Brills artikel Creating Liquid Layouts with Negative Margins på webstedet A List Apart var min indgang til denne teknik, som siden er blevet anvendt af mange andre end denne artikels forfatter.

I slutningen af artiklen giver Ryan en opskrift på et layout med 3 spalter. Vær varsom med den, der er en væsentlig mangel, som jeg skriver om i min artikel om dette emne: 3 spalter med ensartet højde.

8. august 2007