XHTMLforum - Darstellungsfehler Hintergrundbild Überschrift

XHTMLforum (http://xhtmlforum.de/index.php)

- CSS (http://xhtmlforum.de/forumdisplay.php?f=73)

- - Darstellungsfehler Hintergrundbild Überschrift (http://xhtmlforum.de/showthread.php?t=62433)

Darstellungsfehler Hintergrundbild Überschrift

Gleich vorweg, der HTML-Code:

HTML-Code:

<head>

  <title>Test</title>

  <link rel="stylesheet" type="text/css" href="style.css" />

</head>

<body>

  <div>

    Text, der umflossen werden soll.<br />

    Text, der umflossen werden soll.<br />

    Text, der umflossen werden soll.<br />

    Text, der umflossen werden soll.<br />

    Text, der umflossen werden soll.<br />

  </div>

  <h1>Falscher Hintergrund</h1>

  <p>Sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text.

     Sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text.

     Sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text, sehr viel langer Text.</p>

  <h1>Richtiger Hintergrund</h1>

</body>

Jetzt die style.css:

Code:

h1 {

  background-image: url("hintergrund_h1.png");

  background-repeat: repeat-y;

}



div {

  float:left;

  margin: 10px;

}

Mein Problem: Das Hintergrundbild für die erste Überschrift h1 wird nicht direkt hinter h1 dargestellt, sondern hinter dem div-Container float:left. Das soll aber nicht, ich möchte das Hintergrundbild so angezeigt haben, wie es auch bei der zweiten Überschrift h1 ist.
Wie mache ich das? Meine bisherigen Versuche sind leider nicht von Erfolg gekrönt gewesen. :(
Im Anhang sieht man ein Bild, wie Google Chrome meinen Beispielcode darstellt. Ähnlich zeigen auch Firefox und der Internet Explorer das an, mit dem selben Fehler.

Gruß, Novastar

Hi,

soweit ich weiss erstreckt sich die h1 auch unter dem Float, nur der Text weicht dem Float aus.

Du könntest z.B. h1 auch floaten lassen. ;)

Das alte Problem wurde damit gelöst, aber jetzt floatet auch <p> hinter <h1>. :(

Das Problem ist das Hintergrundbild, das muss irgendwie auch von dem float beeinflusst werden.

p ist ein Blockelement. Du müsstest p auch floaten.
Oder skizziere mal grob wie es am Ende aussehen soll. Sehe da nicht so ganz durch :)

Hier ein manipuliertes Bild, wie es am Ende aussehen soll.
Achtet auf den Hintergrund von der ersten Überschrift und vergleicht es mit dem Anhang des ersten Beitrags.

Zitat:

Zitat von Novastar (Beitrag 475080)

Das alte Problem wurde damit gelöst, aber jetzt floatet auch <p> hinter <h1>. :(

du kannst Breiten für Elemente vergeben. ;)

Ich würde die h1 in ein div setzen.

dem div das Bild geben

und die h1 Überschrift darüber flaten.

div und h1 solltest du beides floaten.

Wenn du die <h1> in ein <div> setzt und dieses floatest, dann brauchst du das <h1> nicht mehr floten. Es bewegt sich dann mit dem <div>, es gehört sozusagen dazu ;)

Ich würde den Weg von Klaus nehmen.

@hubspe: Und welche Größe soll ich da bitte eingeben? (Der gefloatete div-container kann unterschiedlich breit sein!)

@nils_1309: Die letzten beiden Sätze verstehe ich nicht. Was meinst du mit "darüber"? Ich habe mal h1 in einen Container gesetzt und float:left definiert, aber das funktioniert genauso wenig, als wenn ich den Container weggelassen hätte. (p ist dann immer noch neben h1 und nicht dadrunter)

Mein Problem ist einfach, dass ich ein Hintergrundbild von h1 definieren will, das wird aber die ganze Zeit vor h1 angezeigt. :(