homepage Welcome to WebmasterWorld Guest from 54.196.63.93
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
H tag on same line as paragraph
css question
JonnyWales

10+ Year Member



 
Msg#: 337 posted 10:02 am on Oct 3, 2002 (gmt 0)

Is it possible to include a header tag on the same row as standard text?

I can remove the gap above and below the header using margin-top and margin-bottom but I'm not sure how to get it to appear on the same row as other text.

Assuming that the capitals represent my header I can achieve this :-

.... and it is still
RAINING IN WALES
but the forecast is good ....

but I want to achieve this :-

.... and it is still RAINING IN WALES but the forecast is good ....

Another subject but I suppose Google hates this :)

 

DrOliver

10+ Year Member



 
Msg#: 337 posted 1:32 pm on Oct 3, 2002 (gmt 0)

<style type="text/css">
.inline{display:inline;}
</style>

<p class="inline">.... and it is still </p>
<h6 class="inline">RAINING IN WALES </h6>
<p class="inline">but the forecast is good .... </p>

There's even an official way to do that, but it doesn't work in most browsers: See [w3.org ] and check "display:run-in"

RussellC

10+ Year Member



 
Msg#: 337 posted 2:43 pm on Oct 3, 2002 (gmt 0)

Thanks DrOliver, I was about to as the same question! :)

JonnyWales

10+ Year Member



 
Msg#: 337 posted 5:39 pm on Oct 3, 2002 (gmt 0)

Thanks doc .... just need to work out now how to leave a one-space gap before and after my heading text :)

DrOliver

10+ Year Member



 
Msg#: 337 posted 7:22 am on Oct 4, 2002 (gmt 0)


<p class="inline">.... and it is still </p>
<h6 class="inline">RAINING IN WALES </h6>
<p class="inline">but the forecast is good .... </p>

Just leave a gap between "still" and the closing </p> and a gap between "WALES" and the closing </h6>.

BTW: you also might want to consider styling the header like this:
h6{text-transform:uppercase;}

and the write the code like this:
<h6 class="inline">raining in Wales </h6>

That would add some extra accessibility, I guess, because the "uppercasing" is only a visual thing.

JonnyWales

10+ Year Member



 
Msg#: 337 posted 9:46 am on Nov 1, 2002 (gmt 0)

"Just leave a gap between "still" and the closing </p> and a gap between "WALES" and the closing </h6>. "

Doc,
This makes to difference when I try adding spaces the text still just all rolls into one such as :-

and it isstill raining in walesbut the forecast is good

Any ideas where I'm going wrong?

Longhaired Genius

10+ Year Member



 
Msg#: 337 posted 11:33 am on Nov 1, 2002 (gmt 0)

DrOliver's code works for me in IE5, Mozilla and Opera (but not Netscape4). Which browser are you using? Maybe you could use a non-breaking space, "&nbsp;", but it looks like it shouldn't be necessary...

zooloo

10+ Year Member



 
Msg#: 337 posted 12:13 pm on Nov 1, 2002 (gmt 0)

Use a tag that doesn't automatically want to break the line.

EG <b> or <i>

<p class="inline">.... and it is still </p>
<b class="inline">RAINING IN WALES </b>
<p class="inline">but the forecast is good .... </p>

zooloo

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 337 posted 12:19 pm on Nov 1, 2002 (gmt 0)

I can't get it to put in a space either (IE6)

JohnnyWales, can I ask if there's a reason it needs to be a <H#> tag...as from what I know (not much really! :)) I'm under the impression that this is not the "correct" use of an <H> tag...

what you're trying to do can be achieved quite easily with a span class within a normal paragraph...

css:
.hilite {
font-size: 0.8em;
font-weight: bold;
text-transform: uppercase;
}

HTML:
<p>.... and it is still <span class="hilite">raining in wales</span> but the forecast is good .... </p>

apologies if this is not what you're after..but interested to know

Suzy
:)

tedster

WebmasterWorld Senior Member tedster us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 337 posted 11:04 pm on Nov 3, 2002 (gmt 0)

In terms of getting the space to appear cross-browser, how about adding some padding-right for the H element?

Logically an H tag marks the header for content that follows it - but not for the preceding content. That holds true no matter how you set the visual rendering rules.

So, depending on the content involved, I'd say this might be a "correct" use of the H tag. But I'd be very careful about how you execute. A run-in head can be very useful, but using the H tag for phrases that have both preceding text and following text seems odd to me.

Certainly, don't pepper the page with these run-in H tags around every one of your keywords. If everything's in an H tag, it can be like NOTHING's in an H tag. The best bet is to use H tags to highlight the page's logical structure.

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 337 posted 11:50 pm on Nov 3, 2002 (gmt 0)

I guess you want to use the H tag for the extra benefit that words within Headings get in SE rankings?

However, H tags are for Headings. They are used to map out the structure of your web page.

Check this link replacing your web address into the foo.com part:
[validator.w3.org...]

Note that %3A is the colon : and that %2F is the slash / and these are required.

JonnyWales

10+ Year Member



 
Msg#: 337 posted 11:00 am on Nov 4, 2002 (gmt 0)

Thanks for the feedback. My original intention was to try and benefit from the perceived advantage for <H1> on my key phrases without seeing any difference when viewing the page. It appears however that doing this is likely to be penalised by certain search engines so my strategy may be not to proceed. Just trying to find a way to get back up the Google rankings as I have dropped sooooo far in the last couple of months without employing any dodgy methods. If you can't beat em ......

g1smd

WebmasterWorld Senior Member g1smd us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 337 posted 11:19 pm on Nov 4, 2002 (gmt 0)

The risk is, that by 'joining them', you might drop even further.

Mardi_Gras

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 337 posted 12:35 am on Nov 5, 2002 (gmt 0)

My original intention was to try and benefit from the perceived advantage for <H1> on my key phrases without seeing any difference when viewing the page.

I think this all gets back to the three most important aspects of SEO - content, content, and content.

If you plan your content carefully - with thought to SEO - you will be able to use those H1 tags appropriately, and not as the tag equivalent of hidden text.

We do use CSS to maintain control of the size of the tag - standard H1 is way larger than anything we normally use - but it can be worked in as the header to the main body of text. So if your keywords are appropriate as the headline on the page, you can easily use H1. If your keywords are NOT appropriate as part of the page headline, maybe a little re-write is in order.

It does making planning a page a little more difficult - but I think you will find the effort worthwhile.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved