01.02.2011

Bannerleiste seitlich von zentrierter Seite anbringen

Manche Ideen kommen einem meist erst nachträglich: So möchte man evtl. bei einer fertigen, zentrierten Website links oder rechts noch eine Spalte anbringen, z.B. für Werbebanner oder ähnliches. Ähnlich wie auf dieser Seite rechts vom Inhalt. Der Aufwand dafür ist recht einfach. Nehmen wir an, rechts von einer zentrierten Seite soll eine Bannerleiste mit 120px Breite nachträglich angebracht werden.
Der bisherige, maßgebliche Code unserer Website dürfte stark vereinfacht in etwa so aussehen:

HTML:

<div id="wrapper">
Gesamter Inhalt der Website
</div> <!--Ende #wrapper-->

CSS:

#wrapper {
width: 800px;
margin: 0 auto;
min-height: 500px;
background: #e5e500;
}

Vereinfacht sieht die Seite dann so aus wie in Demo 1.

Da wir an unserem bisherigen Konstrukt nur wenig ändern wollen, positionieren wir die Bannerleiste - nachfolgend #rechtsbox genannt - absolut zum #wrapper. Hierzu muss dieser zunächst relativ positioniert werden, was wir mit folgender Ergänzung erreichen:

#wrapper {
width: 800px;
margin: 0 auto;
min-height: 500px;
background: #e5e500;
position: relative;
}

Für die #rechtsbox ergeben sich unter Berücksichtigung von 10px Abstand zum #wrapper folgende CSS-Angaben:

#rechtsbox {
width: 120px;
min-height: 498px;
border: 1px solid #000;
position: absolute;
right: -130px;
}

Da die #rechtsbox absolut zum #wrapper positioniert ist, muss sie jetzt samt Inhalt lediglich noch im HTML-Teil unmittelbar nach dem Öffnen des #wrapper als dessen "Kindelement" eingefügt werden, und zwar so:

<div id="wrapper">

<div id="rechtsbox">
Inhalt der #rechtsbox
</div> <!--Ende #rechtsbox-->

Gesamter Inhalt der Website
</div> <!--Ende #wrapper-->

Damit haben wir bereits unser Ziel erreicht, wie aus Demo 2 ersichtlich.
Soll noch eine weitere Box an der linken Seite angebracht werden, so verfahren wir entsprechend:

CSS:

#linksbox {
width: 120px;
min-height: 498px;
border: 1px solid #000;
position: absolute;
left: -130px;
}

HTML:

<div id="wrapper">

<div id="linksbox">
Inhalt der #linksbox
</div><!--Ende #linksbox-->

<div id="rechtsbox">
Inhalt der #rechtsbox
</div><!--Ende #rechtsbox-->

Gesamter Inhalt der Website
</div> <!--Ende #wrapper-->

Schon haben wir unseren bisherigen #wrapper "eingerahmt" von zwei Bannerboxen, siehe Demo 3.

Hinweis:

Bedingt durch die absolute Positionierung fristen die Außenboxen ein vom übrigen Code losgelöstes Dasein. Es kann deshalb bei zu schmalem Bildschirmfenster vorkommen, dass ihre Inhalte verschwinden und sich auch nicht durch Scrollen sichtbar machen lassen. Um dies zu vermeiden müsste man auf die absolute Positionierung verzichten und am besten von vornherein ein dreispaltiges Layout per Float-Angaben vorsehen.

nach oben