mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Do 25.04.2024 06:25 Benutzername: Passwort: Auto-Login

Thema: Sitecontent relativ zentrieren? - ich werde wahnsinnig! vom 25.03.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Sitecontent relativ zentrieren? - ich werde wahnsinnig!
Seite: 1, 2  Weiter
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!

Antworten mit Zitat Zum Seitenanfang

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!
  View user's profile Private Nachricht senden
Monschder

Dabei seit: 16.06.2003
Ort: -
Alter: 44
Geschlecht: Männlich
Verfasst Do 25.03.2010 12:51
Titel

Antworten mit Zitat Zum Seitenanfang

Abstände in HTML berechnen sich immer vom oberen linken Eck. Je nachdem wie groß die Tabelle ist, ist die Lage eine andere.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
safer-print

Dabei seit: 11.03.2010
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Do 25.03.2010 14:16
Titel

Antworten mit Zitat Zum Seitenanfang

Schau mal hier oder hier.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Do 25.03.2010 14:23
Titel

Antworten mit Zitat Zum Seitenanfang

Böse Tabellenlayouts werden hier nicht mehr unterstützt! *bäh*

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.
  View user's profile Private Nachricht senden
Kamerakind
Threadersteller

Dabei seit: 29.11.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Do 25.03.2010 23:02
Titel

Antworten mit Zitat Zum Seitenanfang

vielen dank - ich werde mir die intensivstation mal anschauen
  View user's profile Private Nachricht senden
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 26.03.2010 08:34
Titel

Antworten mit Zitat Zum Seitenanfang

Vertikal und ohne feste Höhe zentrieren geht bedingt. Aber man könnte es lösen, indem man für den Außencontainer
Code:
display: table;
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.
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
top
Moderator

Dabei seit: 25.11.2003
Ort: Hedwig Holzbein
Alter: 52
Geschlecht: Männlich
Verfasst Fr 26.03.2010 11:36
Titel

Antworten mit Zitat Zum Seitenanfang

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. *zwinker*
  View user's profile Private Nachricht senden
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Fr 26.03.2010 12:30
Titel

Antworten mit Zitat Zum Seitenanfang

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. *zwinker*


Der 8er hat inzwischen dazugelernt und beherrscht afaik "display: table" etc.
Ob es Sinn macht < 8 auszuschließen ist allerdings fraglich.
  View user's profile Private Nachricht senden
 
Ä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
Layer relativ zu Tabellenposition
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2  Weiter
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.