Ausrichtung Überschriften auf die gleiche Basislinie, unabhängig davon, folgenden Text?

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.Ausrichtung Überschriften auf die gleiche Basislinie, unabhängig davon, folgenden Text?

~~siehe Bild http://snapplr.com/snap/z1mw bitte~~

EDIT: Wieder hochgeladen:

alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png

Es scheint mir die einzige Lösung, jede Überschrift und jeden Körper Text in separate DIV zu setzen ist und dann mit Überschriften, um mit padding-top oder margin-top zu spielen, um sie auszurichten (zB wäre H1 36px mit 0px Rand, während H3 24px mit 12px oberem Rand wäre). Etwas wie folgt aus:

<html> 
<head> 
    <style type="text/css" media="all"> 
     div { 
      width: 240px; 
      float: left; 
     } 

     h1 { 
      font-size: 36px; 
      margin: 0; 
      padding: 0; 
     } 

     h3 { 
      font-size: 24px; 
      margin: 0; 
      padding: 10px 0 0 0; /*for some reason I must use 10px instead of 12px to align. Why??*/ 
     } 
    </style> 
</head> 
<body> 
    <div> 
     <h1>H1 heading</h1> 
    </div> 
    <div> 
     <h3>H3 heading</h3> 
    </div> 
    <div> 
     <h3>H3 heading that is somewhat longer and spans multiple lines</h3> 
    </div> 
    <div style="clear:both;"></div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
    <div> 
     <p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</p> 
    </div> 
</body>

Aber das ist nicht sehr schöne Lösung. Gibt es etwas Besseres, bitte?

Vielen Dank!

Quelle

2010-02-17 Josef Richter

Willkommen bei Stack Overflow. –

Ich habe Ihre Probe in Photoshop überprüft und Sie brauchen 12 px - es ist nur eine Art optische Täuschung aufgrund der Serifen die Schriftart hat :) – easwee

Zoomed in http://img682.imageshack.us/img682/1604/optic. jpg – easwee

-1

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

Quelle

2010-02-23 23:16:32 Hauge

Die Web-Griffe Basislinien anders, als Sie in gedruckter Form verwendet werden. Browser richten Ihren Text auf die Zentrale der Zeilenhöhe statt auf der Unterseite aus. Dies bedeutet, dass Text, der mit dem Netzgitter 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:

http://24ways.org/2006/compose-to-a-vertical-rhythm/

Wenn Sie die Dinge tatsächlich benötigen, um eine Basislinie ausgerichtet ist, wie Sie es in gedruckter Form kennen, ist das Spiel sehr 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, das möglich zu machen:

http://baselinecss.com/

Mit jeder Lösung 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 da?

Quelle

2010-03-03 01:04:23

Dank Eric, Der 24ways Artikel die gleiche Lösung scheint zu zeigen, ich, also kam mit line-height Hantieren, Polsterung usw. nur Hoffte ich fehle einige versteckte CSS-Funktionen/-Lösungen, die das Leben einfacher machen :-) baselinecss.com scheint vielversprechend zu sein. Müssen Sie in den Code eintauchen, um zu sehen, was genau es tut. In Bezug auf die divs - das war die einzige Möglichkeit, die erste Zeile der folgenden Absätze auszurichten, wenn ich Überschriften mit verschiedenen Zeilen zählen (siehe Bild im ursprünglichen Beitrag). Ich würde mich freuen, eine bessere Lösung zu sehen, da diese den Code ein wenig ungeschickt macht :-( –

Nicht nur sind sie ein wenig ungeschickt, aber sie zerstören jedes Gefühl der Semantik, da die Header nicht an ihren Inhalt angehängt sind In der Reihenfolge der Quellen. Sie können auch Tabellen zu diesem Zeitpunkt verwenden. Kein Grund, pure-CSS zu behalten, wenn Sie bereit sind, Ihre gesamte Semantik zu opfern, um es trotzdem funktionieren zu lassen. Ich würde zuerst Semantik machen und dann hinzufügen etwas jQuery, wenn Sie den Effekt wirklich brauchen. –

Ausrichtung Überschriften auf die gleiche Basislinie, unabhängig davon, folgenden Text?

Antwort

Verwandte Themen