Problem mit neuem Layout

[Mathias Brodala]

Hallo MKay.

Warum antwortest du nicht meinem Posting, sondern deinem?

Ok, jetzt frage ich mich nur, warum ich viel zu viele divs benutze?

OK, dann werfen wir einmal einen Blick auf deinen Code:

<div style="width: 900px; margin: 0px auto; text-align: left;">  
  
 <div>  
  <img style="float: left;" src="images/logo_left.gif" width="11" height="91" border="0" alt="">  
  <img style="float: left;" src="images/logo_logo.gif" width="188" height="91" border="0" alt="">  
  <div style="float: left; display: inline; background-image: url('images/logo_bg.gif'); height: 91px; width: 500px; text-align: center; vertical-align: middle;">hier kommt ein Banner hin</div>  
  <img src="images/logo_right.gif" width="11" height="91" border="0" alt="">  
 </div>  
  
</div>

Bei mir könnte das ganze so aussehen:

<h1><img src="logo_logo.gif" height="91" width="188" /> <span>hier kommt ein Banner hin</span></h1>

Und das CSS dazu:

* {  
  margin:0;  
  padding:0;  
}  
h1 {  
  background:url(logo_bg.gif) repeat-x;  
  font-size:1em;  
  font-weight:normal;  
  margin:auto;  
  overflow:auto;  
  width:60%;  
}  
h1 * {  
  float:left;  
}  
h1 span {  
  padding:3em 0 0 3em;  
}  
h1::before { /* Alternativ musst du eben die Grafik direkt als img–Element im h1–Element platzieren, wenn es im IE funktionieren soll. */  
  content:url(logo_left.gif);  
  float:left;  
}  
h1::after { /* Dito. */  
  content:url(logo_right.gif);  
  float:right;  
}

Probleme: der IE kennt keine Pseudoelemente und Firefox stört sich an ebenselbigen. Vielleicht fällt jemand anderem hierzu noch etwas ein.

Einen schönen Freitag noch.

Gruß, Mathias