Sent by Holly Bergevin on 27 September 2004 04:04
From: Mike [EMAIL-REMOVED]>
>http://mbreiding.us/test/index3.html
Hi Mike,
Here's one way you can try that seems to work in Moz and IE, and validates as well. For your
"headings" in your HTML try the following construction -
<div class="trailstats">
<h3>1) Trail number one</h3>
<span class="vitals">MILEAGE: xx</span>
<span class="vitals">SURFACE: xxxxxxxxxxx</span>
<span class="vitals">COUNTY:xxxxxxxxxxx</span>
</div>
CSS for this is as follows -
h3 {
font-size: 15pt;
font-weight: bold;
letter-spacing: 1px;
width: 12em;
margin: 0;
background: white;
padding: 0 0 0 7px;
float: left;
}
..trailstats {
background: white;
height: 2em;
padding-top: .5em;
margin-left: 8em;
width: 48em;
}
span.vitals {
font-family: times;
font-size: 10pt;
color:#A4C4F4;
padding:3px;
border: 1px solid;
font-weight: bold;
letter-spacing: 1px;
background:white;
margin: 0 0 0 1em;
}
Nothing else changes. There is a new div surrounding your heading and the paragraphs-now-spans. The
div is given a specific width in ems so that it forces a scrollbar if the text size is changed. This
way the spans won't wrap.
Heading is left block, but given a width. If you have trail names that are longer than 12em, you'll
need to adjust the width of the <h3> (and possibly other things, as well). The heading is then
floated, so that the rest of the div content can come up beside it. The spans are inline by default,
and have the same basic properties the paragraphs did. However, using the spans eliminated vertical
alignment differences that the paragraphs had.
I'm sure that there are other ways to do this, but this one works, and is valid.
hth,
~holly
______________________________________________________________________
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/
