Header wird falsch dargestellt
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
angabe
auto
code
container
definieren
eigenschaft
folgendes problem
gesamte hintergrund
grad
header
http
internet
praxis
sagen
schwarze balken
standard
text
url
verpassen
wirklichen inhalt
-
Hallo zusammen,
Ich versuche grade einen Header für eine Seite zu erstellen und habe folgendes Problem:
Hier ist der Quelltext vom Header:
<head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="header"> <div style="float: left;" id="links"> <b>Text 1</b> </div> <div style="float: right;" id="rechts"> <b>Text 2</b> </div> </div> </body>
Und hier die zugehörige CSS-Datei style.css:
body { margin: 0 auto; } div#header { background: #000000; padding: 10px; color: #F0F0F0; }
Wie in der style.css steht, sollte ja der gesamte Hintergrund des div-Containers mit der ID "header" schwarz sein. Leider trifft das in der Praxis nicht zu:
Die Ausgabe der Seite sieht sowohl unter Firefox, als auch im Internet-Explorer wie in diesem Bild aus:
http://imagr.eu/up/4be03d1a03323_Unbenannt.png
Kann mir jemand sagen, welchen Fehler ich da gemacht habe?
Mit freundlichen Grüßen,
mermadalis -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Du musst dem Container auch die Eigenschaft "float" verpassen.
Einfach im CSS-Code float:left; und width:100%; einfügen und es geht. -
Andere Möglichkeit:
Soweit ist alles richtig, nur hat dein Header keinen wirklichen Inhalt. Du müßtest für dieses DIV eine Höhe definieren. Der schwarze Balken, den du derzeit siehst entsteht durch die Angabe padding:10px;.
Gib in der css in deinem div#header noch die beiden Angaben:
min-height: (deine-gewünschte-Höhe)px;
und
height: (deine-gewünschte-Höhe)px;
an. Letztere ist für den IE, der mit min-height nichts anfangen kann. Dann sollte es funktionieren. -
Alter Spruch: "Wer floatet, muß auch clearen."
Setzt einfach einen leeren div mit style="clear:both;" hinter den Header und alles ist gut.
FF -
einfachste Lösung:
gib dem header overflow:hidden
dadurch umschließt der Header auch seinen inhalt, das ist die einfachste Lösung, um einen float einzuschließen und auch so im CSS-Standard festgelegt, sprich eine komplett sinnvoll und richtige Lösung! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
