Grundlayout mit divs erstellen ... Problem mit Zentrierung

[sunny]

Hallo liebes Forum!

Ich versuche gerade endlich einmal eine Website nur mit CSS aufzubauen - also ohne Tabellenlayout ... das Problem ist allerdings, dass ich gleich am Anfang vor einem Problem stehe ... eigentlich ist das Design ein typisches Tabellenlayout und ich krieg das mit CSS nicht ganz hin.

So solls aussehen:

-----------------------------------
 | bruecke |          logo          |
 | bruecke |          logo          |
 -----------------------------------
 |         |                        |
 |         |                        |
 |         |                        |
 |         |                        |
 |         |                        |
 |         |                        |
 |         |                        |
 -----------------------------------

Das Problem hab ich bereits mit dem oberen Bereich, ich weiß nicht, wie ich das Logo in die Mitte bekomme!?

Soweit bin ich bisher gekommen:

body {
 background-color: #FFFFFF;
 width:100%;
 margin:0px;
 padding:0px;
}

#oben {
 position:absolute;
 left:0px;
 top:0px;
 width:100%;
 height:84px;
 background-image:url(images/hg.gif);
}

#bruecke {
 position:absolute;
 left:0px;
 top:0px;
 width:161px;
 height:84px;
}

#logo {
 position:absolute;
 left:???;
 top:0px;
 width:???;
 height:84px;
 ???
}
________________________________________________________________

<div id="oben">
 <div id="bruecke"><img src="images/bruecke.gif" width="161" height="84"></div>
 <div id="logo"><img src="images/logo.gif" width="577" height="84"></div>
</div>

Mit float etc. hab ich auch herumgespielt, aber das scheint hierfür nicht zu funktionieren. Kann mir jemand einen Tipp geben wie ich das mit dem zweiten div (logo) machen muss sodass es einfach die restliche Breite einnimmt und ich dann das Bild darin zentrieren kann?

Liebe Grüße,
sunny

[Der Dicki]

Hallihallo!

Wenn ich Dich richtig verstanden habe, möchtest Du das Bild im "logo"-div zentrieren.

Das kannst Du machen, indem Du Dein Stylesheet noch etwas erweiterst:

#logo img {
   margin: auto;
}

Ich hoffe, damit konnte ich Dir helfen...

Viele liebe Grüße,
Der Dicki

PS: Nein, da bin ich nicht selber drauf gekommen. Die Lösung ist aus
http://forum.de.selfhtml.org/archiv/2002/9/22776/ übernommen.

[sunny]

Hallo!

Wenn ich Dich richtig verstanden habe, möchtest Du das Bild im "logo"-div zentrieren.

Das Zentrieren im div selbst wäre ja kein Problem mehr. Das Problem ist das div selbst. Es soll nämlich neben dem div "bruecke" liegen und die gesamte Breite, die noch zur Verfügung steht, einnehmen - damit ich dann darin das Bild zentrieren kann.

Wenn ich width:100%; angebe, dann wird das div zu breit, weil es ja nicht am linken Rand positioniert werden darf, sondern erst bei 161 px (neben dem ersten div). Und das ist das, was ich leider nicht hinbekomme.

Dürfte aber doch eigentlich nicht so schwierig sein!?

Ich hoffe, damit konnte ich Dir helfen...

Leider nicht, aber villeicht hast Du ja noch einen Tip!

PS: Nein, da bin ich nicht selber drauf gekommen. Die Lösung ist aus
http://forum.de.selfhtml.org/archiv/2002/9/22776/ übernommen.

PS: Das Archiv hab ich durchsucht (hoffentlich nichts übersehen) und das CSS-Kapitel von selfhtml hab ich mir natürlich auch angeschaut, sonst wär ich gar nicht erst so weit gekommen - ich hatte nämlich bisher die "Unart" ;) Websites mit Tabellen zu gestalen!