Daniel: Probleme mit Blocksatz unter Mozilla

Hallo,

Ich möchte gern eine Webseite von Tabellenlayout auf CSS umstellen. Hierzu habe ich einen Textbereich - welcher Blocksatz sein soll - mit CSS positioniert.

<html>
<head>
<title></title>

<style type="text/css">
body { padding:0px; margin:0px }
.text { position:absolute; left:400px; top:50px; padding-right:15px; text-align:justify }
</style>

</head>
<body>

<div class="text">
Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text.
Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein
längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text.
Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text. Dies ist ein längerer Text.
</div>

</body>
</html>

Der Blocksatz funktioniert unter Mozilla jedoch nicht. Nur mit unten stehender Lösung (mit zweitem "div"-Element) funktioniert der Blocksatz auch mit Mozilla.

<div class="text">
<div>
Dies ist ein längerer Text...
</div>
</div>

Mit dem IE oder Opera gibt es mit erstem Entwurf keine Probleme. Was ist die Ursache?

Noch eine Frage zu den Seitenrändern. Wie kann ich einen in allen gängigen Browsers halbwegs einheitlichen rechten und unteren Textabstand erzwingen? Geht dies nur mit "padding" und/oder "margin"? Alle meine Versuche hatten unterschiedliche Ausgaben zur Folge. Insbesondere unter Opera sind die Ränder viel breiter wie angegeben.

  1. hi,

    .text { position:absolute; left:400px; top:50px; padding-right:15px; text-align:justify }

    schuss ins blau: schon mal versucht, hinter die letzte formatangabe auch noch ein semikolon zu setzen?

    Der Blocksatz funktioniert unter Mozilla jedoch nicht. Nur mit unten stehender Lösung (mit zweitem "div"-Element) funktioniert der Blocksatz auch mit Mozilla.

    online-beispiel?

    Noch eine Frage zu den Seitenrändern. Wie kann ich einen in allen gängigen Browsers halbwegs einheitlichen rechten und unteren Textabstand erzwingen? Geht dies nur mit "padding" und/oder "margin"? Alle meine Versuche hatten unterschiedliche Ausgaben zur Folge. Insbesondere unter Opera sind die Ränder viel breiter wie angegeben.

    setze margin _und_ padding nach deinen wünschen.

    gruß,
    wahsaga

    --
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    1. Hi,

      schuss ins blau: schon mal versucht, hinter die letzte formatangabe auch noch ein semikolon zu setzen?

      aber schon sehr blau..;-)

      freundliche Grüße
      Ingo

  2. Hallo,

    .text { position:absolute; left:400px; top:50px; padding-right:15px; text-align:justify }

    Der Blocksatz funktioniert unter Mozilla jedoch nicht. Nur mit unten stehender Lösung (mit zweitem "div"-Element) funktioniert der Blocksatz auch mit Mozilla.

    Der Browser scheitert bei der Ermittlung der Breite, weil Du keine vorgibst und nur left explizit setzt. Mit dem inneren Element ist dessen Breite dann klar. Setze right auch auf einen Wert.

    .text { position:absolute; left:400px; right:0; top:50px; padding-right:15px; text-align:justify }

    Übrigens:
    Wenn in dem DIV wirklich nur Text steht, warum ist das dann kein P und wenn dort mehr steht, warum steht der Text nicht _in_ einem P?

    Muss die Poitionierung wirklich sein? Wahsaga hat schon recht. Randabstände und floats täten es eventuell auch.

    viele Grüße

    Axel

    1. Hallo Axel,

      Der Browser scheitert bei der Ermittlung der Breite, weil Du keine vorgibst und nur left explizit setzt. Mit dem inneren Element ist dessen Breite dann klar. Setze right auch auf einen Wert.

      .text { position:absolute; left:400px; right:0; top:50px; padding-right:15px; text-align:justify }

      Danke für deinen Tipp mit "right:0". Damit hat es funktioniert.

      Gruß
      Daniel