Logo "On Top" über mehrere Div

[cb1982]

Moin!

Ich stehe vor einem Problem, bei dem ich nicht weiß ob sich das überhaupt mit css lösen lässt.

Auf einer Webseite habe ich eine horizontal zweigeteile Kopfzeile.
Eine Zeile enthält ein Menü, die zweite eine Art Stimmungsbild.

Beides über die volle Breite eines großen Containers, der fest 980px breit ist.

Jetzt möchte ich ein Logo platzieren, das sich über beide Zeilen (Menü und Bild) erstreckt.
Da der feste Container mittig platziert ist, kann ich mit einer absoluten Position nichts anfangen, da dabei das Logo natürlich immer über den Bildschirm "wandert"

Hier mal der code der css
#page ist der große Container
#header enthält das Menü
#header_image das Stimmungsbild
Die Positionierung von #logo klappt so nicht.

Hat jemand einen zündenden Tip für mich? Das Logo soll halt über dem bestehenden Inhalt sein und nicht von diesem umflossen werden.

#page {
    width: 980px;
    margin: 0 auto;
    
}


#logo {
    position: absolute;
    top: 0px;
    left: 100px;
    width: 150px;
    height: 100px;
}
    #logo img {
        width: 100%;
        height: 100%;
    }


#header {
 background:url(/new_images/layout/background_menu.gif) top left repeat-x;
 height: 200px;
 border: 1px solid;
 margin: 0px;
 padding: 0px;
}




#header_image {
border: 0px solid blue;
}


#header_image img {
 width: 100%;
 height: 100%;
}

 

[Tronjer]

Wenn das Logo 150px, der Container dagegen 980px breit ist, kann es sich nicht über dessen volle Breite erstrecken. Um das Logo horizontal mittig zu platzieren, gibt es die Anweisung margin:auto.

 

[cb1982]

Hi,

das ist gar nicht mein Problem.
Stell dir vor 980px breites Menü.
Darunter 980px breites Bild.

Nicht ganz in die obere Linke Ecke dieses Paketes soll das Logo 150*150

Quasi müsste ich das Logo frei in #pages platzieren können.

 

[Tronjer]

Ich kenne deine Seite nicht, aber wenn das Logo ein Blockelement ist, welches wiederum in einem Blockelement liegt, dann gib dem äußeren Element width:980px und margin:auto. Das innere, 150px breite Element mit dem Logo lässt sich dann mittels margin vom oberen linken Rand verschieben.

 

[cb1982]

So, ich habe das mal versucht zu skizzieren.

blau: das gesamte Browserfenster.
Darin ein 980px breiter Container
Oben zwei weitere Block1 und Block2 die mit Menü und Bild gefüllt sind.
Quasi eine ebene darüber soll sich Block 3 über beide erstrecken?

Die Sache ist, wenn ich es mit absoluter Positionierung mache, ist der Abstand immer fest zur oberen linken Ecke des Browserfensters.
Da aber die "Hauptcontainer" mittig ausgerichtet bei fester breite ist, ist sein Abstand zum linken Rand je nach Größe des Fensters immer anders.

 

[Banana_Jones]

positioniere Block 1 relativ, dann richtet sich Block 3 an dessen Grenzen aus

 

[cb1982]

Ja das war ja einfach :)

Vielen Dank!