Autor |
Nachricht |
Kamerakind
Threadersteller
Dabei seit: 29.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 25.03.2010 12:32
Titel Sitecontent relativ zentrieren? - ich werde wahnsinnig! |
|
|
Hallo Ihr Lieben,
ich habe ein riesiges Problem mit einer scheinbar kleinen Aufgabenstellung. Ich habe eine Tabelle mit 2 Spalten und einer Zeile. In der linken Spalte ist die Navigation in einer extra Tabelle in der rechten der Inhalt. Nun möchte ich diese ganze Konstrukt ganz einfach vertikal zentriert haben. D.h. linksbündig und in der Mitte der Seite.
Folgendes habe ich gemacht:
Das CSS-Sheet
Code: |
.center
{
position:absolute;
top:50%;
}
.content
{
margin-left:5%;
}
|
Und HTML:
Code: |
<div class="center">
<table border="0" cellpadding="0" cellspacing="0">
<td>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="img/menu_02.gif" width="199" height="184" alt=""></td>
</tr>
<tr>
<td><a class="hochzeit" href="http://www.fotograf-in-leipzig.de/hochzeit/"></a></td>
</tr>
<tr>
<td><a class="menschen" href="http://www.fotograf-in-leipzig.de/menschen/"></a></td>
</tr>
<tr>
<td><a class="familie" href="http://www.fotograf-in-leipzig.de/familie/"></a></td>
</tr>
<tr>
<td><a class="bands" href="http://www.fotograf-in-leipzig.de/bands/"></a></td>
</tr>
<tr>
<td><a class="kontakt" href="http://www.fotograf-in-leipzig.de/kontakt/"></a></td>
</tr>
<tr>
<td><a class="info" href="http://www.fotograf-in-leipzig.de/info/"></a></td>
</tr>
</table>
</td>
<td>
<div class="content">
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
duhgfdhfgdgfdjfgdjgffggfjdfg<br>
</div>
</td>
</table>
</div>
|
Was passiert? Er positioniert die ganze Sache untenbündig. Mittig ist es seltsamer weise bei 25%!? Ändere ich aber die Bildschirmauflösung, stimmts nicht mehr. Müsste nicht bei 50% der Content IMMER in der Mitte sein?
Hilfe!
|
|
|
|
|
Monschder
Dabei seit: 16.06.2003
Ort: -
Alter: 44
Geschlecht:
|
Verfasst Do 25.03.2010 12:51
Titel
|
|
|
Abstände in HTML berechnen sich immer vom oberen linken Eck. Je nachdem wie groß die Tabelle ist, ist die Lage eine andere.
|
|
|
|
|
Anzeige
|
|
|
safer-print
Dabei seit: 11.03.2010
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 25.03.2010 14:16
Titel
|
|
|
Schau mal hier oder hier.
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Do 25.03.2010 14:23
Titel
|
|
|
Böse Tabellenlayouts werden hier nicht mehr unterstützt!
Ok, Spaß bei Seite.
Möchtest du nur einen Teilbereich der Seite mittig zentrieren oder soll die gesamte Seite in die Tabelle?
Wenn die komplette Seite mittig stehen soll (und du sowieso Tabellen zum Layouten verwenden möchtest) nimm statt dem umschließenden div eine weitere Tabelle mit einer Höhe von 100% und vergiss das position:absolute . (HTML und BODY per CSS auch auf 100% setzen!)
Aktuellere Methoden ohne Tabellen kannst du dir z.B. bei den Templates der Intensivstation anschauen. Ohne Tabellen sind mir allerdings nur Methoden bekannt, bei denen man die Höhe des zu zentrierenden Objektes genau kennt.
Viel Spaß,
top
@safer-print: Hier wird nach vertikaler Zentrierung gefragt.
|
|
|
|
|
Kamerakind
Threadersteller
Dabei seit: 29.11.2008
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Do 25.03.2010 23:02
Titel
|
|
|
vielen dank - ich werde mir die intensivstation mal anschauen
|
|
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 26.03.2010 08:34
Titel
|
|
|
Vertikal und ohne feste Höhe zentrieren geht bedingt. Aber man könnte es lösen, indem man für den Außencontainer vergibt und dann direkt dem zu zentrierenden Container Code: | display: table-cell; vertical-align: middle | zuweist. Allerdings ist das sehr anfällig und benötigt viel CSS Wissen, da man den Mechanismus sehr leicht durch andere Definitionen wieder aushebelt.
|
|
|
|
|
top
Moderator
Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht:
|
Verfasst Fr 26.03.2010 11:36
Titel
|
|
|
Hatte ich auch schon mal überlegt.
Leider wird laut http://www.css4you.de/display.html das "display: table-..." bisher von keinem IE unterstützt. Daher habe ich wenig Hoffnung, dass dich das weiter bringen wird.
Ich lasse mich aber auch gerne eines Besseren belehren.
|
|
|
|
|
emorikaner
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Fr 26.03.2010 12:30
Titel
|
|
|
top hat geschrieben: | Hatte ich auch schon mal überlegt.
Leider wird laut http://www.css4you.de/display.html das "display: table-..." bisher von keinem IE unterstützt. Daher habe ich wenig Hoffnung, dass dich das weiter bringen wird.
Ich lasse mich aber auch gerne eines Besseren belehren. |
Der 8er hat inzwischen dazugelernt und beherrscht afaik "display: table" etc.
Ob es Sinn macht < 8 auszuschließen ist allerdings fraglich.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Ich werde wahnsinnig :(
Programm für .TPL Dateien - werde noch wahnsinnig
t-online browser der mich wahnsinnig macht :(
CSS macht mich wahnsinnig: Brauch mal Euere Hilfe.
Chromeless macht mich wahnsinnig ... Java-Guru WANTED
CSS: absolute und relativ mixen?
|
|