Das Web handhabt Grundlinien anders als Sie es gewohnt sind zu drucken. Browser richten Ihren Text an der Mitte der Zeilenhöhe und nicht am unteren Rand aus. Dies bedeutet, dass Text, der auf das Web-Grid ausgerichtet ist, vertikal in Bezug zueinander zentriert ist und nicht auf derselben Grundlinie sitzt.
Wenn Sie damit einverstanden sind, können Sie trotzdem ein starkes Raster erhalten. Sie müssen nur genau sein mit der kombinierten Verwendung von Zeilenhöhe, Padding, Rahmen und Rändern. Es braucht etwas Mathematik, ist aber durchaus möglich. Mehr hier:
Wenn Sie Dinge brauchen, die tatsächlich auf eine Grundlinie ausgerichtet sind, wie Sie es im Druck kennen, ist das Spiel viel schwieriger. Das Problem ist, dass Sie die Dinge abhängig von der exakten Schriftart in verschiedenen Mengen ausgeben müssen - kaum möglich, wenn jeder Browser eine andere Schriftart verwendet. Hier ist ein Versuch, dies zu ermöglichen:
Bei beiden Lösungen gibt es Cross-Browser-Probleme. Das Web bietet dazu noch nicht die richtigen Werkzeuge. Aber auf keinen Fall solltest du die divs brauchen. Sie können diese Anpassung an den Überschriften selbst vornehmen. Sie brauchen sie nicht einmal in Ihrem Beispiel. Warum sind die Divs dort?
Nur ein kurzer Gedanke (wie in "Ich hatte diese Idee, das könnte funktionieren, aber ich habe es nicht getestet"): Wie wäre es mit der Zeilenhöhe? Sie können für alle Überschriften dieselbe Zeilenhöhe verwenden, um eine einheitliche Grundlinie für alle Zeilen zu gewährleisten.
Grüße Jesper Hauge
Gibt es eine Möglichkeit, die erste Zeile mehrerer Überschriften unterschiedlicher Größe an der gleichen Grundlinie auszurichten? Auch unabhängig vom folgenden Text, der ebenfalls ausgerichtet werden sollte.
Siehe Bild bei Ссылка bitte
BEARBEITEN: neu hochgeladen:
http://img144.imageshack.us/img144/7615/screenshot2010021722h53.pngEs scheint mir die einzige Lösung zu sein, jede Überschrift und jeden Fließtext in separate DIV und dann mit Überschriften zu setzen, um mit padding-top oder margin-top zu spielen (zB H1 wäre 36px mit 0px Rand, während H3 wäre 24px mit 12px oberen Rand). Etwas wie das:
%Vor%
Aber das ist keine sehr nette Lösung. Gibt es etwas Besseres, bitte?
Vielen Dank!