zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Darstellungsfehler Hintergrundbild Überschrift

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.09.2010, 18:46
Benutzerbild von Novastar
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 19
Novastar befindet sich auf einem aufstrebenden Ast
Standard 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
Angehängte Grafiken
Dateityp: jpg bild.jpg (74,1 KB, 18x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 18.09.2010, 19:27
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

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.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 18.09.2010, 19:39
Benutzerbild von Novastar
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 19
Novastar befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Novastar (18.09.2010 um 19:46 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 18.09.2010, 19:51
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 18.09.2010, 19:56
Benutzerbild von Novastar
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 19
Novastar befindet sich auf einem aufstrebenden Ast
Standard

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.
Angehängte Grafiken
Dateityp: jpg bild2.jpg (69,9 KB, 5x aufgerufen)
Mit Zitat antworten
  #6 (permalink)  
Alt 18.09.2010, 20:00
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.086
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von Novastar Beitrag anzeigen
Das alte Problem wurde damit gelöst, aber jetzt floatet auch <p> hinter <h1>.
du kannst Breiten für Elemente vergeben.
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #7 (permalink)  
Alt 18.09.2010, 20:00
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 18.09.2010, 20:04
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

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.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #9 (permalink)  
Alt 18.09.2010, 20:07
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 16.09.2009
Beiträge: 601
Muamicus wird schon bald berühmt werden
Standard

Pff
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 18.09.2010, 20:17
Benutzerbild von Novastar
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.09.2010
Beiträge: 19
Novastar befindet sich auf einem aufstrebenden Ast
Standard

@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.
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Fehlendes(?) oder falsch positioniertes Hintergrundbild in IE6 und IE7 shredder01 CSS 4 28.11.2009 21:38
<p> soll linken Rand von vorheriger Überschrift übernehmen pixel24 CSS 9 27.07.2009 12:33
Barrierefreiheit wirklich nötig? jensr Barrierefreiheit 128 06.11.2006 11:54
Problem: Überschrift <hx> innerhalb von Abschnitt <p> Ares CSS 7 24.10.2006 14:30
Hintergrundbild einer versteckten Überschrift Arachon` CSS 3 20.01.2006 22:57


Alle Zeitangaben in WEZ +2. Es ist jetzt 07:10 Uhr.