Sent by Gunlaug_Sørtun on 27 September 2004 04:04
Mike, you wrote:
>> > If it works - why is it considered bad code?
Because it is non-valid and very unstable across browser-land.
>>If you think it works and you are happy with it, why do you ask us?
>
> For guidance and help and a better method to archive my goals.
Ok, p tags shouldn't be put into h tags, and they don't need to in order
to get the page to display the way you want. A little more CSS will do.
The more robust way to do it is to put the p tags after the h tag, and
position them back up. They will float up all by themselves if you float
the h tag left and pull in it's right margin.
Step 1: organize the source-code properly:
<h3>...</h3>
<p class="vitals">...</p>
<p class="vitals">...</p>
<p class="vitals">...</p>
<p class="content">...</p>
....repeat...
---
Step 2: set all margins and paddings in the page. Put this first in your
stylesheets:
body,h1,h2,h3,h4,h5,h6,p {margin: 0; padding: 0;}
This will take all the guess-work out of the elements initial values.
---
Step 3: add this to your styles, at the end:
h3 {float: left; margin-right: -28em; margin-top: -10px; display: inline;}
p.vitals {position: relative;}
p.content{margin: 10px 10em 30px 10em; clear: both; }
This includes a couple of bug-kills in IE-win.
Your original styles are still present and active. You can trim them
back later.
---
Because those <p class="vitals"> already have "display: inline" set on
them, they will act much as self-adjusting floats and line up inside the
negative right margin of <h3>. That's where they were to begin with,
but now it is a more robust and sequential source-code.
HTML Tidy likes it, and so will the validator.
Both 1) and 2) show up fine in my copy of your test-page (after
corrections), and I have also tested a third option with real floating p
tags based on 2). They all line up in the same way in IE6, Firefox0.9.3
and Opera7.54.
regards
Georg
______________________________________________________________________
css-discuss [EMAIL-REMOVED]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
