div mit bg-image wird nicht richtig gefloatet

[Gunnar Bittersmann]

@@klaas:

nuqneH

<div id="logo"><img src="/images/logo.png" alt="Logo" /></div>

Das 'div[@id="logo"]' ist völlig überflüssig. Du kannst auch das 'img'-Element per CSS formatieren.

<div id="content">
    <div id="top"></div>
    <div id="canvas">
        lorem ipsum
    </div>
    <div id="bottom"></div>
</div>

'div[@id="top"]' und 'div[@id="top"]' (oder 'div[@id="canvas-bottom"]' und 'div[@id="canvas-bottom"]'?) sind völlig überflüssig. Du kannst auch den im 'div[@id="content"]' sowieso vorhandenen Elementen Hintergrundbilder geben:

#canvas>:first-child  
{  
  background: url(/images/canvas-top.png) no-repeat;  
  height: 28px;  
}  
  
#canvas>:last-child  
{  
  background: url(/images/canvas-bottom.png) no-repeat;  
  height: 28px;  
}

Oder natürlich, wenn als erstes die Überschrift 'h1' kommt:

h1  
{  
  background: url(/images/canvas-top.png) no-repeat;  
  height: 28px;  
}

Oder Pseudoelemente erzeugen:

#canvas:before  
{  
  background: url(/images/canvas-top.png) no-repeat;  
  height: 28px;  
}  
  
#canvas:after  
{  
  background: url(/images/canvas-bottom.png) no-repeat;  
  height: 28px;  
}

Aber all das ist in vernünftigen[tm] Browsern gar nicht nötig, da ein Element ja mehrere Hintergrundbilder haben kann [CSS3-BACKGROUND]:

#canvas  
{  
  background: url(/images/canvas-top.png) top no-repeat, url(/images/canvas-bottom.png) bottom no-repeat, url(/images/canvas-line.png) repeat-y;  
}

Aber Hintergrundbilder sind vielleicht auch gar nicht nötig, da ein Schatteneffekt auch per CSS ('box-shadow' mit browserspezifischen Präfixen) erzeugt werden kann. Für IE gibt es den proprietären Shadow-Filter.

Und auch das 'div[@id="canvas"]' ist völlig überflüssig. Du kannst das Logo absolut positionieren und 'body' den Hintergrund und Schatten geben und entsprechenden linken Abstand. Siehe http://bittersmann.de/samples/jeans.

Qapla'