div mit bg-image wird nicht richtig gefloatet

[klaas]

Hallo,
so soll meine Seite mal aussehen:

xxxxxxxx xxxxxxxxxxxxxxxxxxxxxxx
x Logo x x lorem ipsum         x
xxxxxxxx x                     x
         x                     x
         x       Inhalt        x
         x                     x
         x                     x
         x                     x
         x                     x
         xxxxxxxxxxxxxxxxxxxxxxx

Die Inhalt-Box hat einen schönen Rahmen mit Schlagschatten. Mein HTML sieht daher so aus:

<div id="logo"><img src="/images/logo.png" alt="Logo" /></div>  
  
<div id="content">  
  
    <div id="top"></div>  
  
    <div id="canvas">  
        lorem ipsum  
    </div>  
  
    <div id="bottom"></div>  
  
 </div> 

Und das derzeitige CSS:

#logo{  
	float:left;  
}  
  
#content{  
}  
  
#canvas{  
	min-height:600px;  
	background:url(/images/canvas-line.png) repeat-y;  
	padding:0 40px;  
	margin:0;  
}  
  
#canvas-top{  
	margin:0;  
	padding:0;  
	background:url(/images/canvas-top.png) no-repeat;  
	height:28px;  
}  
  
#canvas-bottom{  
	margin:0;  
	padding:0;  
	background:url(/images/canvas-bottom.png) no-repeat;  
	height:28px;  
}

Problem:
Der (Text-)Inhalt von "content" wird zwar um das logo gefloatet, aber nicht der Rahmen. Weder die horizontalen noch die vertikalen Linien. Die Box "klebt" also in der linken oberen Ecke und wird vom Logo überdeckt. Der Text fließt rum.

Ergebnis:

xxxxxxxx xxxxxxxxxxxxxx
x Logo x  lorem ipsum x
xxxxxxxx              x
x                     x
x       Inhalt        x
x                     x
x                     x
x                     x
x                     x
xxxxxxxxxxxxxxxxxxxxxxx

Ich vermute mal, es liegt am bg-image oder? Nur wie krieg ich das jetzt passend hin?

1000dank
klaas

[ChrisB]

Hi,

Nur wie krieg ich das jetzt passend hin?

http://aktuell.de.selfhtml.org/weblog/css-spaltenlayout#schritt-fuer-schritt

MfG ChrisB

[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'