homepage Welcome to WebmasterWorld Guest from 54.205.189.156
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderator: open

CSS Forum

    
H tag on same line as paragraph
css question
JonnyWales




msg:1205756
 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




msg:1205757
 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




msg:1205758
 2:43 pm on Oct 3, 2002 (gmt 0)

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

JonnyWales




msg:1205759
 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




msg:1205760
 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




msg:1205761
 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




msg:1205762
 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




msg:1205763
 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




msg:1205764
 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




msg:1205765
 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




msg:1205766
 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




msg:1205767
 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




msg:1205768
 11:19 pm on Nov 4, 2002 (gmt 0)

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

Mardi_Gras




msg:1205769
 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