CSS - Kopfberreich

    Hallo,die Frage bezieht sich auf den Kopfberreich der Webseite. Mein Wunsch wäre eine durchgehende Leiste von ganz links nach ganz rechts in der Mitte jedoch ein Logo, meine Idee wäre den linken und rechten Teil vom Logo jedoch in zwei div-Tags zu trennen, wodurch ich dann leichter datum und social icons einfügen kann.In einer Vorlage sieht das dann so aus:

    unser Code sieht bisher so aus:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>MineSTARM | Blog</title>
    <link href="Webseite/Blog/style.css" rel="stylesheet" type="text/css" />
    <link rel="shortcut icon" href="Webseite/Bilder/favicon.ico" type="image/x-icon" />
    <script type="text/javascript" src="Webseite/dhtml.js"></script>
    </head>


    <body>
    <!-- KOPFZEILE -->
    <div id="kopfzeile">
    <div id="b1">
    </div>
    <div id="b2">
    </div>
    <div id="logo">
    </div>
    </div>
    </body>
    </html>

    CSS:

    #kopfzeile {
    background-color:#666;
    }


    #b1 {
    background-color:#3A3A3A;
    width:50%;
    float:left;
    height:40px;
    z-index:1;
    }


    #b2 {
    width:50%;
    float:left;
    background-color:#3A3A5C;
    height:40px;
    z-index:1;
    }


    #logo {
    width:110px;
    height:110px;
    clear:both;
    background-color:#090;
    }


    Ich habe schon viel rumprobiert bin aber nie so richtig auf eine perfekte lösung gekommen, hätte jemand einen Vorschlag bzw. wäre es vlt doch etwas geschickter die leiste durchgehend in ein div-tag zu packen??MfG Rene1803


    PS: Ich weiß nicht warum aber über HTML oder CODE wird der Code falsch angezeigt...

    2 Mal editiert, zuletzt von Rene1803 (23. Juli 2013 um 11:04) aus folgendem Grund: Code falsch angezeigt

    Dein Element mit der ID Kopfzeile benötigt solange es sich um ein Blockelemt handelt weder ein float:left noch ein z-index. Blockelemente nehmen von Haus aus die gesamte Breite des zur Verfügung stehenden Darstellungsbereiches ein.
    Du benötigst also für deine Kopfzeile lediglich eine Höhe, mehr nicht.
    Innerhalb deiner Kopfzeile schiebst du dann das Logo mit float:left nach Links. Um die Icons rechts anzuordnen, umgibst du die Icons auch mit einem Blockelement und schiebst dieses mit float:right nach links. Somit hast du dann das gewünschte Ergebnis.

    Z-Index braucht man nur wenn die Elemente aus ihrem normalen Fluss herausgenommen werden sollen und dann positioniert werden sollen. Dazu ist aber Kenntnis über das Boxmodell nötig. http://www.mediaevent.de/css/position-zindex.html

    Leider kriege ich aus deinem letzen Post keine Hilfe heraus, ich verstehe das nicht so ganz, Das Element mit der ID Kopfzeile hat hier jedeglich eine background-color zum erkennen des Kopfberreichs und ist nur als übergeordnetes element erstellt, theoretisch hätte ich es wahrscheinlich ganz weg lassen können.

    Der oben gepostete Code beinhaltet eher nur eigenschaften zwischen dem rumprobieren, nach ein wenig rumprobieren bin ich auf folgendes gekommen:

    Das div-Tag "logo" unter dem div-Tag "b1" unterordnen und über css an die richtige position bringen:

    so jetzt bleibt nur noch die lösung von folgendem wie kriege ich das hin dass das div-Tag "b2" das "logo" nicht mehr überdeckt:

    Bitte stelle deine Seite online und verlinke sie hier im Forum. Wenn du über keinen Webspace verfügst kannst du einen der vielen Free Webspace Anbieter über die Suchmaschine deines Vertrauens finden.

    Ja leider habe ich jetzt die Version aus Post Nummer 3 nicht gespeichert und bin nach meherem rumprobieren auf folgende Lösung gekommen:

    ein div-tag mit fester breite (980px) indem ich dann mit fester größe alle weiteren leisten etc. fest setzen kann und im hintergrund ein durchgehendes div tag erstellt dass dann mein oben genannten wunsch erfüllt:

    Im Webspace sieht die Seite dann so aus: Klick mich

    MfG Rene