Der 1.Hack: “Eingebettete Boxen” (nested boxes)

Dieser erste Hack ist vermutlich der am einfachsten zu implementierende. Wenn wir keinen border-Effekt (Rahmen) benötigen, können wir die Innenabstände einfach dadurch setzen, dass wir alle unsere Boxelemente (<div>, <p>, <blockquote>, etc.) ohne Angaben zu padding und margin in jeweils eine unsichtbare Box einbetten.

Diese unsichtbaren Boxen erhalten dann jeweils die Angaben zu padding

Benötigen wir hingegen den border-Effekt, packen wir in unsere Beispielbox (ohne Angaben zu Rändern und Rahmen) einfach eine zweite Box, bei der wir dann unsere Ränder und Rahmen definieren. Dazu gehen wir wie folgt vor:

Definition unserer Beispielbox:

1
2
3
4
5
6
7
8

#ContentBox {
     width: 220px;
     background-color: yellow;
}
/* Definition unserer Rahmen-Box */
#RahmenBox {
  border: 10px solid black;
  }

Die angesprochene Verschachtelung innerhalb des HTML-Quellcodes sieht dann wiefolgt aus:

1
2
3
4
5
6
7

<body>
   <div id="ContentBox">
     <div id="RahmenBox">
       <p>Content</p>
     </div>
   </div>
 </body>

Der komplette Quellcode ssieht nun so aus: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

<html>
  <head>
    <title>1. Hack</title>
    <style type="text/css">
      #ContentBox {
        width: 220px;
        background-color: #FFFF00;
      }
      #RahmenBox {
        border: 10px solid black;
      }      
    </style>
  </head>
  <body>
    <div id="ContentBox">
      <div id="RahmenBox">
        <p>
          Diese Box ist innen 200px breit und hat einen Rahmen 
          mit der Dicke 10px. 200px+10px+10px = 220px
        </p>
      </div>
    </div>
  </body>
</html>

Das Ergebnis ist tatsächlich genau das, was wir erwartet haben. Eine Box die innen genau 200px breit ist und aussen einen Rahmen hat der sie auf insgesamt 220px Breite bringt. (200px + 10px + 10px = 220px)

Diese Box ist innen 200px breit und hat einen Rahmen mit der Dicke 10px. 200px+10px+10px = 220px

Der Haken bei der Sache

  • Nachteil dieser beschriebenen Methode ist, dass der Quellcode durch die zusätzlichen Rahmenboxen aufgebläht und damit unsauber wird. Und wer will dies schon guten Gewissens tun?
  • Im Internet Explorer 6 ist der Box Model Bug wieder beseitigt, so dass dieser und alle anderen Hacks überflüssig sind, wenn man auf die 5er Versionen keine Rücksicht zu nehmen braucht.
  • Solltet ihr aus irgendeinem Grund keine Doctype Definition in euer HTML-Dokument schreiben, so verhält sich der IE 6 wie sein Vorgänger IE 5 und damit tritt der Box Modell Bug wieder auf. Gut zu wissen für Tests und hilfreich zu wissen fürs Debuggen.
  • Er neigt dazu sich wie ein IE5/Win zu verhalten, wenn man mit XHTML Dokumenten arbeitet, die UTF-8 kodiert sind.

Pages: 1 2 3 4 5