kostenloser Webspace werbefrei: lima-city


Header wird falsch dargestellt

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    mermadalis

    Kostenloser Webspace von mermadalis

    mermadalis hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. Du musst dem Container auch die Eigenschaft "float" verpassen.
    Einfach im CSS-Code float:left; und width:100%; einfügen und es geht.
  4. spleensearcher

    spleensearcher hat kostenlosen Webspace.

    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.
  5. Alter Spruch: "Wer floatet, muß auch clearen."

    Setzt einfach einen leeren div mit style="clear:both;" hinter den Header und alles ist gut.

    FF
  6. 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!
  7. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!