Bannerbereich bei zentriertem Layout?

Sandro Feuillet

Sandro Feuillet

Legendäres Mitglied
Kämpfe mit dem folgenden CSS/HTML Problem:

Habe da ein zentriertes Layout mit fixer Breite und möchte jetzt da rechts daneben einen Skyscraper einfügen, also asymetrisch..

Das Wrapper-Div ist folgendermassen zentriert (erstellt mit dem YAML Framework):

CODE #page_margins { margin: 0 auto; }


Da möchte ich jetzt rechts daneben ein Div anzeigen. Hat da jemand eine Lösung?
 
Hey Sandro,

hast du vielleicht ein Exempel für uns?
Ich verstehe nicht ganz das Problem, daher wäre es einfacher an einem einfachem Beispiel dieses zu demonstrieren.

lg
André
 
Hm, das Problem ist, dass das neue Projekt noch nicht online ist.

Neu basiert das ganze Layout auf divs. Das Div, welches den ganzen Content umschliesst, ist gemäss obigem code zentriert.
Nun sollten rechts davon ein neuer Bereich hinkommen, quasi Banners. Dabei wird die ganze Seite asymetrisch. denn der Hauptinhalt sollte zentriert bleiben, der neue Inhaltsbereich rechts ran kommen.
Hoffe ich habe mich klar genug ausgedrückt...
 
Innerhalb des "Content-Divs" geht das einfacher...

Spontane Idee:

den Banner absolut rechts positionieren. Mal als default.
Mittels JS die Bildschirmbreite auslesen und exakte Position für Banner ausrechnen und neu-positionieren.
-> document.body.offsetWidth

Ja ich weiss. JS. Aber wir haben eine JS-lose Alternative, wenngleich in der "Alternative" der Banner nicht schön am Inhalt anliegt.

Mittels JS könnte man dann auch ein "wenig" nachkorrigieren, sollte jemand mit einem zu schmalen Bildschirm unterwegs sein: z.B: das Content-Div verkleinern oder den Banner eventuell gar nicht erst einblenden.

Ich sähe das so: wenn der Banner eh schon JS nutzt, dann spricht nichts gegen das Verwenden von JS, um den Banner zu positionieren.

Bei Bedarf PN.
 
Vielleicht sehe ich das gerade zu einfach, aber du musst doch nur einen absolut platzierten Div in den Haupt-Div legen.
Ich nehme an, du weißt ja die Breite deines Contents und hast das nicht (pfui) variabel gemacht
wink.gif


Du hast ein layout wie

CODE
<html>
<head></head>
<body>
<div class="maincontent">
<div id="bannerRechts"></div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</body>
</html>



und als stylesheet etwa


CODE
.maincontent { position:relative;width:1000px;margin:0px auto; }
#bannerRechts { position:absolute; left:1000px; margin:0px auto; width: 160px; height:700px;z-index:99; }



Wenn du den Wert von "left" bei #bannerRechts an die Breite deines Hauptcontents anpasst, platziert sich dein Werbebanner rechts neben dem noch immer mittig ausgerichtetem Content.
Funktioniert bei mir im FF, IE7 und Chrome
 
QUOTE (connectR @ Di 13.01.2009, 14:46) Vielleicht sehe ich das gerade zu einfach, aber du musst doch nur einen absolut platzierten Div in den Haupt-Div legen.
Ich nehme an, du weißt ja die Breite deines Contents und hast das nicht (pfui) variabel gemacht
wink.gif



CODE
.maincontent { position:relative;width:1000px;margin:0px auto; }
#bannerRechts { position:absolute; left:1000px; margin:0px auto; width: 160px; height:700px;z-index:99;  }



Wenn du den Wert von "left" bei #bannerRechts an die Breite deines Hauptcontents anpasst, platziert sich dein Werbebanner rechts neben dem noch immer mittig ausgerichtetem Content.

Funktioniert bei mir im FF, IE7 und Chrome

Funktioniert prächtig, genau was ich gesucht habe.

Herzlichen Dank!

 
Sie müssen sich einloggen oder registrieren, um hier antworten zu können.
Zurück
Oben