Timitry: Titelleiste mit Grafik und Schrift nebeneinander...

Beitrag lesen

Hallo zusammen!

Ich bastele gerade an einer Webseite für unseren Judoverein.
Über dem Navi- und Content-Bereich soll eine Titelleiste erscheinen, in der links ein Bild (so ca. 100 pixel hoch / 400 breit) mit einigen Judokas erscheinen soll, und rechts daneben ein Text "Judo - Alfter - Bornheim".

Das "Judo - Alfter - Bornheim soll horizontal zentriert erscheinen (kein Problem, text-align:center funktioniert tadellos) sowie auch vertikal - hier funktioniert vertical-align:middle schonmal nicht.
Dann soll es noch so sein, dass die Schrift in die nächste Zeile rutscht, wenn das Browserfenster nicht mehr breit genug ist, und sich dann die umgebende Titelleiste in Form eines div-Elementes mit Rahmen entsprechend vergrößert. Weiterhin sollte zwischen dem unteren Rand des Bildes und dem Rahmen des div-Elements kein Abstand sein,

  
<div id="title">  
<img src="judogruppe2.jpg" alt="Judo-Alfter-Bornheim" />  
<nobr><h2>Judo - Alfter - Bornheim</h2></nobr> (h2 ist nur temporär, da kleiner als h1)  
</div>  

  
#title  
  {  
  border:0.5em solid #096096;  
  background:#E6E6E6;  
  padding:0px;  
  max-width:900px;  
  min-width:460px;  
  }  
  
#title img  
  {  
  float:left;  
  }  
  
#title h2  
  {  
  text-align:center;  
  }  

So, jetzt müssten nur noch ein paar CSS-Angaben ergänzt werden... Ich hab bald so ziemlich alle Kombinationen durch, aber nie bekomme ich das gewünschte Ergebnis :( Mit der oben geposteten Kombination sind die beiden Sachen immerhin nebeneinander, aber es ist noch ein Rand nach unten, und die Überschrift ist nicht vertikal mittig.

Das ganze in xHtml Strict 1.0 und CSS 2.1...

Wäre super, wenn ihr mir da helfen könnet, ich verzweifle langsam echt daran...

Danke, euer Tim