2 Fehler in 2 Zeilen code

[Krobbus]

<<< Hier ein Bild davon

1.) Der Schriftzug soll etwas weiter nach unten, damit er genau MITTIG ist.
2.) Wieso wird das Ü nicht richtig angezeigt? Kann ich das irgendwie per CSS lösen, dass ÄÜÖ immer richtig dargestellt werden?

<div style="background-image:url(img/top1.jpg); margin:0px; padding:13px; background-repeat:no-repeat;" >
<h2 class="title" style="text-align:center; vertical-align:middle;">Überschrift Eins</h2></div>

 

[Tar]

Vertical-align zieht iirc nur auf inline-Elemente, also musst du wohl ein bisschen mit dem padding-top spielen, damit der Schriftzug mittig angezeigt wird.

Die Sache mit den Umlauten lässt sich im HTML über den Doctype lösen.

Und btw liese sich das ganze auch ohne das <div> realisieren, du gibst einfach dem h1 die selben Eigenschaften, die du sonst dem div geben würdest. So sparst du Code und bist semantisch auf einem besseren Weg.

 

[prm]

Setze für h2 den Abstand auf Null und definiere eine line-height, welche der Höhe der Hintergrundgrafik entspricht. Z.B. wenn die Grafik 30px hoch wäre so:

h2 {margin: 0; padding: 0; line-height: 30px; text-align: center;}