Menu
is there a way to align first line of multiple headings of various size to the same baseline? Also regardless to the text that follows, which should be aligned as well.
See picture at http://snapplr.com/snap/z1mw please
EDIT: re-uploaded:
alt text http://img144.imageshack.us/img144/7615/screenshot2010021722h53.png
It seems to me the only solution is to put each heading and each body text into separate DIV and then with headings to play with padding-top or margin-top to align them (e.g. H1 would be 36px with 0px margin, while H3 would be 24px with 12px top margin). Something like this:
<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>
But this is not very nice solution. Is there something better, please?
Thank you very much!
426
To set the heading alignment in HTML, use the style attribute. The style attribute specifies an inline style for an element. The attribute is used with the HTML <h1> to <h6> tag, with the CSS property text-align. HTML5 do not support the align attribute of the heading tag, so the CSS style is used to set alignment.
Text alignment is a paragraph formatting attribute that determines the appearance of the text in a whole paragraph. For example, in a paragraph that is left-aligned (the most common alignment), text is aligned with the left margin. In a paragraph that is justified, text is aligned with both margins.
The web handles baselines differently than you are used to in print. Browsers will align your text to the center of the line-height, rather than the bottom. This means text aligned to the web grid are vertically centered in relation to each other rather than sitting on the same baseline.
If you are OK with that, you can still get a strong grid from it. You just have to be exact with your combined use of line-height, padding, borders and margins. It takes some math, but is entirely possible. More here:
http://24ways.org/2006/compose-to-a-vertical-rhythm/
If you need things actually aligned to a baseline as you know it in print, the game is much more difficult. The problem is that you will need to push things various amounts depending on the exact font - hardly possible when each browser may be using a different font. Here is one attempt to make that possible:
http://baselinecss.com/
With either solution there are cross-browser problems. The web just doesn't offer the proper tools for this yet. But in no case should you need the divs. You can do all that adjustment on the headings themselves. You don't even need them in your example. Why are the divs there?
52
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
