On Thu, 8 Mar 2007, Mike Breiding wrote:
I would like to be able to use a Header and a paragraph on the same line in
this page:
http://JuniorNatureCamp.org/staff/
The use of heading markup is somewhat inconsistent there. Generally, <h1>
should be the main heading for the _page_ (not site), and lower-level
headings should be <h2>, <h3>, etc., without skipping levels. This means
that you would seldom use <h5> or <h6>, which is good, since their default
(non-CSS) font sizes are typically smaller than copy text size. Using
headings more consistently, you would have less work in styling headings
(and less disappointments in situations where your style sheet is not
applied).
Where there is an H5 such as:
<h5>Jeff Altemus - Director</h5>
I would like to add a paragraph such as <p>First and Second Week</p>
The result would be <h5>Jeff Altemus - Director</h5> <p>First and Second
Weeek</h5> with no line break and maintaining the styling for the H tag.
I guess you mean markup like
<h5>Jeff Altemus - Director</h5> <p>First and Second Week</p>
and formatting where the h5 part appears as emphasized and the line then
smoothly continues with the p content. This is one common style for
headings in print matter, and quite suitable for low-level headings for
short fragments of text. However, "First and Second Week" looks like yet
another heading to me, rather than copy text. I'm also puzzled by the
presentation on the page you mention as compared with this idea, since the
page contains the heading inside a colored box with an image below it, and
I don't know how to couple this with the idea of combining the heading
with some paragraph text.
Anyway, for such an idea, h5 { display: run-in } would do the job, but
it's not supported by browsers - Opera being the most notable exception, I
guess.
However, h5 { float: left } has a roughly similar effect in simple cases.
It won't work well if the heading is longer than a line, but it probably
isn't, and shouldn't. Moreover, it won't work nicely unless the font size
is the same as in copy text. You also need to watch out for margins,
which are typically nonzero for heading elements by default. So I'd use
h5 { float: left;
font-size: 100%;
margin 0 0.5em 0 0; }
h5:after { content: "."; }
The last rule adds "." after the heading, as needed (IMHO) for "run-in"
headings. Unfortunately IE does not support this, but that's probably
tolerable.
I have tried using display: inline but this does not seem to be the way to go.
I think so too, because a p element starts a new line anyway, and
defeating this (with p { display: inline; }) is hardly a good idea.
--
Jukka "Yucca" Korpela, http://www.cs.tut.fi/~jkorpela/
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
