h3 no-wrap

[Bennelliott]

Hi all
In my CSS sheet, how can i get my h3 elements to be on the same line as a paragraph, like it would be if I changed the font to match the h3 attributes like so:
<p> <font color="#C2B04E"><b> H3 TEXT </b></font> PARAGRAPH TEXT </p>

Ive tried putting whitespace: no-wrap in this element, and putting margin: 0px, but it breaks the line to the one below.
h3 { font-family: Tempus Sans ITC; color: #C2B04E; font-size: 12pt; font-weight: bold }
????????????

[nwalton]

I've gotten this to work in Dreamweaver, but I'm not sure how browser support is:


h3 {
display:inline;
}

h3 + p {
display:inline;
}

[Bennelliott]

I tried this in my css:
body { font-family: Tempus Sans ITC; color: #00329B }
a { font-family: Tempus Sans ITC; color: #00329B }
h1 { font-family: Tempus Sans ITC; color: #C2B04E; font-size: 18pt; font-weight: bold }
h2 { font-family: Tempus Sans ITC; color: #C2B04E; font-size: 14pt; font-weight: bold }
h3 { font-family: Tempus Sans ITC; color: #C2B04E; font-size: 12pt; font-weight: bold; display:inline }
h4 { font-family: Tempus Sans ITC; color: #C2B04E; font-weight: bold }

and the html like so:
<h3>blah blah</h3><p>blah blah 2</p>

but it still breaks the line twice. i tried making a .inline class with just display:inline in it, and using <div class="inline">blah blah 1</div><p>blah blah 2</p> but that breaks it down one line too.


????????????

[Twey]

You've got the right idea, but the + selector won't work in IE, so you'll have to assign the paragraph a class and use that instead. Another option is to float one or both elements.

[nwalton]

Try adding


h3 + p { display:inline; }

to your above styles (the first ones you listed)

[Bennelliott]

Ive even tried putting whitespace: no-wrap; margin: 0px; display:inline all at the same time, but to no avail.
It doesnt have to be a h3 element though (i doubt that makes much difference)

[nwalton]

Why would you want to? Paragraphs and <h3> elements are block-level and not meant to be nested.

That's a good point. You probably do want to swap everything to a <span> with appropriate class attribute.

[Bennelliott]

Yer thats why i didnt use the + selector (comma would work, but thats beside the point)

so you'll have to assign the paragraph a class
Do u mean put display:inline in the p element? tried that, maybe u meant something else (im confused :p)

Another option is to float one or both elements.
How do i go about the above? <h3 style="float:left>xxxx</h3><p> xxx </p> ???

[Bennelliott]

That's a good point. You probably do want to swap everything to a <span> with appropriate class attribute.

<p><span class="inline"> BLAH</span> BLAH</p>

This is so simple, i should have thought of it tyvm