CSS - Kopfberreich

Rene1803

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>

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...

explanator

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

Rene1803

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:

Code

#kopfzeile {    
    background-color:#666;
    height:300px;
}




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




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




#logo {
    width:110px;
    height:110px;
    float:right;
    background-color:#090;
    margin-right:-55px;
}

Alles anzeigen

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:

explanator

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.

Rene1803

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