Peter Mairhofer: Element relativ und absolut positionieren

Hallo,

Ich habe eine Tabelle, die wegen Bildern genau eine bestimmte Laenge von oben bzw von unten positioniert werden müssen, horizontal aber trotzdem zentriert sein sollen.

Wie stelle ich das an?

ein style von

position: absolute;
top: 150px;
text-align: center;

geht nicht.

Peter

  1. Ich habe eine Tabelle, die wegen Bildern genau eine bestimmte Laenge von oben bzw von unten positioniert werden müssen, horizontal aber trotzdem zentriert sein sollen.

    keine Ahnung wie du das meinst, kannst du mal ein Beipiel (URL) zeigen?

    Struppi.

  2. Hi,

    vielleicht hilft dir das weiter.

    http://selfaktuell.teamone.de/tippstricks/css/ausrichtung/index.htm"

    Vergiss aber den DOCTYPE für HTML 4 nicht!

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"

    Grüße von

    Tobias

  3. Hallo,

    ein style von
    [..]
    geht nicht.

    du solltest diese Tabelle natürlich in ein div verpacken, das dementsprechend absolut positioniert wird, und nicht die Tabelle selbst. Falls nötig, außerdem noch den body auf 100% Breite definieren.

    Gruß,
    _Dirk

    1. Hallo,

      ein style von
      [..]
      geht nicht.

      du solltest diese Tabelle natürlich in ein div verpacken, das dementsprechend absolut positioniert wird, und nicht die Tabelle selbst. Falls nötig, außerdem noch den body auf 100% Breite definieren.

      Das ist natürlich Unsinn.

      Du tendierst zu DIV-Suppen?
      Eine Tabelle kann genauso gut einen Layer darstellen, wie alle anderen Block Elemente auch. Du verwendest ein DIV lediglich um einen Bereich mit einer Sammlung von inline/block- Elementen zu umschliessen, wenn du diesem einen einheitlicen Stil geben willst.

      Struppi.

      1. Hallo,

        Das ist natürlich Unsinn.

        Natürlich.

        Du tendierst zu DIV-Suppen?

        Natürlich.

        Gruß,
        _Dirk

        1. Das ist natürlich Unsinn.

          Natürlich.

          Sorry, deine Aussage klang als ob ein DIV das Element wäre zum positionieren von Layer.
          Ich kann aber eine Tabelle ohne Probleme irgendwo hinsetzten - außer - wenn ich % Angaben benutze, dann klappt gar nichts mehr - hast du dafür irgendeine Erklärung?

          Struppi.

          1. Hallo Struppi,

            Sorry, deine Aussage klang als ob ein DIV das Element wäre zum positionieren von Layer.

            Im Fall dieser horizontalen Zentrierung einer Tabelle ist es das auch, falls man reines CSS und keine verschachtelten Tabellen benutzen möchte. Die Zentrierung erfolgt dann über Prozentangaben und negative margin-Werte (siehe molilys Posting), was mit Tabellen ohne divs in wohl kaum einem Browser funktionieren würde.

            Ich kann aber eine Tabelle ohne Probleme irgendwo hinsetzten - außer - wenn ich % Angaben benutze, dann klappt gar nichts mehr - hast du dafür irgendeine Erklärung?

            Nein, warum das so ist, kann ich dir nicht sagen. Aber wenn du ein Container-div für die Tabelle benutzt, wird es klappen :-)

            Gruß,
            _Dirk

  4. Hallo Peter,

    Ich habe eine Tabelle, die wegen Bildern genau eine bestimmte Laenge von oben bzw von unten positioniert werden müssen, horizontal aber trotzdem zentriert sein sollen.

    position: absolute; top: 150px; text-align: center;

    Das geht prinzipiell so: position:absolute; top:150px; left:50%; width:200px; margin-left:-100px;
    Der Wert margin-left ist die negativierte Hälfte der Breite (-(Breite/2)). Durch left:50% beginnt liegt der linke Rand der Box exakt auf der Linie, die den den Ausgangsblock vertikal teilt. Durch den negativen linken Rand wird die Box um die Hälfte ihrer Breite nach links verschoben, sodass die vertikale Mittellinie die Box in der Mitte teilt (die Box mittig erscheint). Probleme gibt es, wenn die Breite des der Seite zu Verfügung stehenden Bereiches kleiner ist als die Breite der Box, dann sind Teile der Box links nicht sichtbar.
    In wie weit das mit den Browsern kompatibel ist, müsstest du prüfen. Die Breite des Elements muss natürlich bekannt sein und feststehen.

    Mathias

    1. hi,

      Probleme gibt es, wenn die Breite des der Seite zu Verfügung stehenden Bereiches kleiner ist als die Breite der Box, dann sind Teile der Box links nicht sichtbar.

      dafür kann mn ja noch min-width für den body definieren (plus ggf. workarounds für den unfähigen browser).

      gruss,
      wahsaga

      1. Hallo.

        dafür kann mn ja noch min-width für den body definieren (plus ggf. workarounds für den unfähigen browser).

        "den unfähigen browser" ist ein schönes Synonym. Ich hoffe, ich darf es lizenzfrei verwenden ;-)
        MfG, at

        1. hi,

          "den unfähigen browser" ist ein schönes Synonym. Ich hoffe, ich darf es lizenzfrei verwenden ;-)

          du darfst es sogar gerne mit der in diesem thread [pref:t=58515&m=328417] beschriebenen methode in die titelzeile des selbigen schreiben ;-)

          gruss,
          wahsaga

          1. Hallo.

            du darfst es sogar gerne mit der in diesem thread [pref:t=58515&m=328417] beschriebenen methode in die titelzeile des selbigen schreiben ;-)

            Danke, du bist so gut zu mir ;-)
            Den genannten Thread kannte ich noch gar nicht, weil ich seit fast zwei Wochen versuche, das Forum von unten nach oben aufzurollen, aber immer wieder durch zu lange Pausen weit zurückgeworfen werde. Aber vielleicht schaffe ich es ja im Laufe des Wochenendes ;-)
            MfG, at

    2. Hallo Peter,

      Ich habe eine Tabelle, die wegen Bildern genau eine bestimmte Laenge von oben bzw von unten positioniert werden müssen, horizontal aber trotzdem zentriert sein sollen.

      position: absolute; top: 150px; text-align: center;

      Das geht prinzipiell so: position:absolute; top:150px; left:50%; width:200px; margin-left:-100px;

      hmm, im Mozilla 1.4 geht das nicht.
      Die Tabelle ist einfach links 100px (nehm ich an) nicht mehr sichtbar. die 50% scheint er nicht zu akzeptieren.

      Struppi.

      1. Hallo Struppi,

        position:absolute; top:150px; left:50%; width:200px; margin-left:-100px;

        hmm, im Mozilla 1.4 geht das nicht.
        Die Tabelle ist einfach links 100px (nehm ich an) nicht mehr sichtbar. die 50% scheint er nicht zu akzeptieren.

        Tatsächlich. Ich hatte es nur mit einem div-Element probiert und ahnte nicht, dass es bei table unterschiedlich ist. So wie ich die Spec verstehe, ist das ein handfester Bug, denn Tabellen unterscheiden sich in diesem Punkt nicht von Elementen mit display:block (wobei ein absolut positioniertes Element sowieso display:block bekommt, http://www.w3.org/TR/REC-CSS2/visuren.html#q24). Relevant für einen Prozentwert bei left/right ist ja lediglich die Breite des containing block.
        Vielleicht lässt sich ein div-Containerelement einfügen oder man verzichtet unter Umständen auf die (Layout-)Tabelle zugunsten eines div-Elements.

        Mathias

        1. Hallo,

          Vielleicht lässt sich ein div-Containerelement einfügen oder man verzichtet unter Umständen auf die (Layout-)Tabelle zugunsten eines div-Elements.

          nicht, dass ich das Struppi nicht schon gesagt hätte. Mal sehen, ob er deine Ausführungen auch als "Unsinn" bezeichnet :-)

          Gruß,
          _Dirk