2 Spalten mit Zeilen auf gleicher Höhe

[michi]

Hallo,

ich habe mit CSS zwei Div-Spalten erstellt. In der linken Spalte befindet sich nur Text, der immer die gleiche Schriftgröße (1.4em) hat. Die rechte Spalte beginnt mit einem Bild. Darunter ist wieder Text. Ich hätte nun gerne, dass Zeilen der linken Spalte auf der gleichen Höhe liegen wie Zeilen in der rechten Spalte.

Dazu habe ich die Innen- und Außenabstände der Absätze und Überschriften auf 0 gesetzt. Abstände erzeuge ich mit <br />. Das Bild in der rechten Spalte ist so breit wie die Spalte selbst. Der Text darunter ist leider nicht mehr ordentlich ausgerichtet.

[suit]

Dazu habe ich die Innen- und Außenabstände der Absätze und Überschriften auf 0 gesetzt.

Wozu?

Abstände erzeuge ich mit <br />.

Wozu soll das gut sein?

Das Bild in der rechten Spalte ist so breit wie die Spalte selbst.

Das spielt keine Rolle.

Der Text darunter ist leider nicht mehr ordentlich ausgerichtet.

Du übersiehst vermutlich die Zeilenhöhe.

Möglicherweise interessiert dich ja das:
http://www.alistapart.com/articles/settingtypeontheweb

[michi]

Dazu habe ich die Innen- und Außenabstände der Absätze und Überschriften auf 0 gesetzt.

Wozu?

Eigentlich habe ich die Innen- und Außenabstände aller HTML-Elemente auf 0 gesetzt. Damit brauche ich mir keine Gedanken über unterschiedliche Browser-Styles bzgl. der Abstände machen.

Abstände erzeuge ich mit <br />.

Wozu soll das gut sein?

Das ist wirklich nicht schön. Aber mit dem Hinweis, die Zeilenhöhe festzulegen, kann ich das ändern.

Möglicherweise interessiert dich ja das:
http://www.alistapart.com/articles/settingtypeontheweb

Mit diesem Link hast Du mir wirklich sehr geholfen!! Danke

[suit]

Eigentlich habe ich die Innen- und Außenabstände aller HTML-Elemente auf 0 gesetzt. Damit brauche ich mir keine Gedanken über unterschiedliche Browser-Styles bzgl. der Abstände machen.

Das hat genau gar keinen Sinn, da du (um ein ordentliches Schriftbild zu erreichen) ohnehin jede Eigenschaft explizit setzen musst, eben um die Unterschiede zu kompensieren. Aber bez. Reset-Stylesheets scheiden sich die Geister.

Möglicherweise interessiert dich ja das:
http://www.alistapart.com/articles/settingtypeontheweb

Mit diesem Link hast Du mir wirklich sehr geholfen!! Danke

[Gunnar Bittersmann]

@@michi:

nuqneH

Text, der immer die gleiche Schriftgröße (1.4em) hat.

Und welche Zeilenhöhe? Diese hängt (wenn nicht explizit gesetzt) von der Schriftart ab. Es ist auch nicht zu erwarten, dass bei Angaben in em ganzzahlige Pixelwerte herauskommen.

Die rechte Spalte beginnt mit einem Bild. Darunter ist wieder Text. Ich hätte nun gerne, dass Zeilen der linken Spalte auf der gleichen Höhe liegen wie Zeilen in der rechten Spalte.

Du müsste die Höhe des Bildes plus etwaiger Rahmen und Abstand ein ganzzahliges Vielfaches der Zeilenhöhe sein. Wenn diese schon nicht ganzzahlig ist (s.o.), wird das wohl schwierig.

Ich sehe zwei Möglichkeiten: Du setzt die Zeilenhöhe – in Pixel. Das ist wohl nur sinnvoll, wenn auch die Schriftgröße in Pixel angegeben ist, was auch nicht unbedingt das ist, was man tun möchte.

Oder du liest mit JavaScript die berechnete Zeilenhöhe aus: getComputedStyle() bzw. für IE currentStyle. Dann passt du den Abstand zwischen Bild und Text entsprechend an, so dass die Höhe des Bildes plus etwaiger Rahmen und Abstand wirklich ein ganzzahliges Vielfaches der Zeilenhöhe ist.

Abstände erzeuge ich mit <br />.

Das ist Unsinn. Weg damit!

Der Text [unter dem Bild] ist leider nicht mehr ordentlich ausgerichtet.

Warum sollten bei mehrspaltigem Satz denn die Zeilen überhaupt auf gleicher Höhe liegen? Wen stört’s, wenn sie das nicht tun?

Qapla'

[michi]

An die explizite Angabe der Zeilenhöhe habe ich nicht gedacht. Das ist ein guter Hinweis von dir.

Warum sollten bei mehrspaltigem Satz denn die Zeilen überhaupt auf gleicher Höhe liegen? Wen stört’s, wenn sie das nicht tun?

Im Druckwesen wird das Registerhaltigkeit genannt. Es wird allgemein als nicht schön empfunden, wenn die Zeilen nicht auf einer Höhe ausgerichtet sind.