Supportnet / Forum / Webseiten/HTML
CSS - Ausrichtung von DIV-Containern
Frage
Ich arbeite an einer Webseite und versuche mich (mal wieder) an tabellenlosem Layout mit CSS. Dabei komme ich aber leider an einigen Problemen nicht vorbei.
Das Design der Seite besteht hauptsächlich aus einer Hintergrundgrafik. Auf der linken Seite befinden sich einige Menüpunkte, der via Image Map als Links definiert werden. In einem Abschnitt des rechten Bereiches (eine Art Fenster) soll der jeweilige Content wiedergegeben werden.
Ich möchte nun die Hintergrundgrafik mittig auf dem Bildschirm platzieren (also sowohl horizontal als auch vertikal). Weiterhin soll zur Darstellung der Inhalte ein Element definiert werden, dass anschließend per CSS in dem o.g. "Fenster" angezeigt werden soll.
Da die vertikale Ausrichtung von DIV-Containern bekanntermaßen Schwierigkeiten bereitet, habe ich für diesen Zweck doch auf eine Tabelle zurückgegriffen:
[code]<table align="center" height="100%">
<tr>
<td>
<div id="design">
<img src="img/des_home.jpg" width="769" height="450" border="0" alt="" style="border: solid; border-width: 1px; border-color: #000000" usemap="#content">
</div>
</td>
</tr>
</table>[/code]
Soweit sieht das auch noch ok aus. Sobald ich aber den Container mit einbringe, der den Content formatiert und darstellt, wird das ganze nicht mehr vertikal zentriert angezeigt, stattdessen am oberen Bildschirmrand ausgerichtet.
Zur Vervollständigung hier noch kurz der dazugehörige CSS-Code:
[code]body {
background-color: #FFFFFF;
color: #000000;
height 100%;
}
#design {
height: 450px;
width: 769px;
}
#content {
position: relative;
width: 440px;
height: 315px;
left: 310px;
bottom: 350px;
}[/code]
Antwort 1 von MoRe99
Ich glaube, im XHTML-Forum ging es in diesem Thread exakt um dein Problem. Musst dich halt ein wenig durcharbeiten; gehört noch mindestens ein weiterer Thread dazu. Hoffe, es hilft dir.
Wenn es "nur" um das Zentrieren eines Bildes geht dann schau nochmal hier rein.
Wenn es "nur" um das Zentrieren eines Bildes geht dann schau nochmal hier rein.
Antwort 2 von sutadur
Schau ich mir ebenfalls an ... :o)