Titelleiste mit Grafik und Schrift nebeneinander...

[Timitry]

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

[Beat]

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...

Das entscheidet der Browser... ;)

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

Vertikale Zentrierung bekommst du eigentlich verlässlich nicht hin.
Wenn du den Bilschirm schmaler machst ist auch die horizontale Zentrierung problematisch,. Bei breiten Bildschirmen wird der Text neben dem Logo dargestellt, und die Zentrierung scheint dann eher ein Padding zu bewirken.
Bei schmalen Bildschirmen ist aber die zentrierung auf die ganze Viewportbreite bemessen, und dort, wo jetzt ein Erscheinen unter dem Bildschirm wünschenswert wäre, erscheint das der titel dann eher diagonal versetzt. Das wäre zu lösen, indem man auf text-align:center verzichtet, aber dem Bild einen margin-right geben würde.

Nun zu vertical-align. Du bekommst es nur, indem du ein Hilfemelemt um das <h2> Element nimmst, und diesem eine absolute Höhe im betrag der Bildhöhe zuweist, und ihm position:relative gibst.
Nun kannst du <h2> absolut positionieren(position:absolute). Du gibst ihm ein top: im Wert der halben! Bildhöhe, aber ein negatives! margin-top: 50%;

Das ist jetzt eine gänzlich ungetestete Beschreibung.

mfg Beat