[Michal]

Hey there.

I'm having a problem creating the desired effect for some heading text.

As per a design I'm coding from, I need the underline of the heading text to be a bottom margin (due to it's positioning and it's thickness).

I've added the underline effect with the border-bottom property, but my question is... how do I get the "underline" to only run along as far as the text itself goes, while behaving like a block level element in relation to the surrounding text?

If I make the heading into a inline element, the border-bottom underline displays how I would like, but unfortunately it effs up in terms of layout.

Is there any way to achieve this without resorting to putting the heading inside a div?


Any help would be muchly appreciated.

[steveb]

Sounds like that's something you need to incorporate into the text itself, rather than try to get CSS to do it. You might even need to turn the affected text into a graphic, which probably won't be a big problem for heading text.

[Michal]

Unfortunately it looks as if it does actually need to be text and not graphic.

Hopefully there's a way, but if it can't be done I'll have to take it up with the designer on Monday.

In the past I've actually thought about including such headings into one my own designs, only to decided against it as I was unsure of how to implement them correctly. I'd be very interested to know of a method, if only for that reason!

[Stickman]

It shouldn't be that difficult. A link would help though - what does 'eff up in terms of layout' mean?

Have you tried float:left and display:block?

Are you even using floats?

[emil]

wrap an inline element around it maybe? <strong> <em> <span> and style that to display the border.

<hx><em>Heading here</em><hx>

[Michal]

Originally Posted by Stickman

It shouldn't be that difficult. A link would help though - what does 'eff up in terms of layout' mean?

Have you tried float:left and display:block?

Are you even using floats?

By 'effing up in terms of layout', I meant that all the text that should be below the header just runs over it as if the header was invisible or something.

display:block was precisely what I wasn't using in the header, due to that fact that it forced the border/underline beyond the length of the text. Instead, I made the header inline, which caused said layout problems.

Originally Posted by emilpaun

wrap an inline element around it maybe? <strong> <em> <span> and style that to display the border.

Just done exactly that with <span> and it works a treat! Thanks mate!

I have little experience in using <span>. For some reason I was thinking that the only way around this might be to use a <div>, but was reluctant to put that among text.

Please excuse the stupidity, I'm only a part time coder (more of a designer), and doing this task as part of work experience! I'm learning all the time!


A question - is <span> preferable to <em> or <strong> in such scenarios?

[emil]

erm, I think span is "inert" from a presentational point of view. Which means it bears little importance on the way tex is rendered in the browser or on the way it is interpreted by screenreaders or search engines, whereas <strong> and <em> imply emphasis, rendering text bold or italic.

Or I might be completely wrong.
Some reading here
SPAN and Div

Also read on block and inline elements

[Stickman]

Originally Posted by Michal

display:block was precisely what I wasn't using in the header, due to that fact that it forced the border/underline beyond the length of the text.

..on it's own. I meant using float as well.

Anyway, span away.

[Michal]

Originally Posted by emilpaun

erm, I think span is "inert" from a presentational point of view. Which means it bears little importance on the way tex is rendered in the browser or on the way it is interpreted by screenreaders or search engines, whereas <strong> and <em> imply emphasis, rendering text bold or italic.

Or I might be completely wrong.
Some reading here
The global structure of an HTML document

So, in other words, using <strong> might be more appropriate than <span> when applied to prominent header text?

Also, is it better to have such tags within the <h#> tags or enclosing them?

[emil]

<h#> are block level elements, they can not be enclosed in inline elements, but the other way around.

[Michal]

Originally Posted by Stickman

..on it's own. I meant using float as well.

Anyway, span away.

I've just tried:

h1 {
display: inline;
float: left;
}

But for some reason adding clear:right doesn't work (the paragraph text runs up alongside it's right side)... although adding clear:left to <p> has the desired effect.

It appears to work wonderfully in fact, and would eliminate the need for me to use <span> in this instance.

But just to make sure, is adding clear:left to a paragraph okay? Could it cause problems?

[Michal]

Originally Posted by emilpaun

<h#> are block level elements, they can not be enclosed in inline elements, but the other way around.

What about making a <h#> into an inline element, as per my above post?

[emil]

you can assign a css property to make it behave like an inline style, but codewise your html would be invalid should you decide to do it the other way around. (ie wrap the h in strong)

[Agricola]

To throw a spanner in the works, underlined text should ONLY be used for hyperlinks.

[Michal]

But I think the object sometimes, when a bottom border is applied to headings like this, is for it to appear as a divider rather than an text underline per se.

[pgo]

So, if I get you right, you want to underline text in a heading? If so, why are you using border-bottom??

What's wrong with h* { text-decoration: underline; }

I really hope I'm missing something...

h1 {
display: inline;
float: left;
}

I don't see how this should work. The float sets it to display: block; so the display: inline; should be overruled...in other words, no different than just float: left; by itself.

However, that above is invalid CSS since you are required to specify a width on a float (except in the case of replaced elements, which headings are not).

So, it looks like floating it to control the width is out.

[Michal]

pgo, in the designs I am building the site from, the underline is a different colour to the text, is thicker in proportion, and is about 15 pixels below it... hence the need to use a bottom border.

[pgo]

Ah, I get it. So, what's wrong with:

<h*><span>Text</span></h*>

h* span {
border-bottom: whatever;
}

That should work, as far as I know, borders can be applied to inline elements like spans.

Span will be a better bet for you since the heading itself already implies emphasis and you're only using the inline element as a style hook (i.e. it should have no semantic meaning).

[Michal]

Originally Posted by pgo

h1 {
display: inline;
float: left;
}

I don't see how this should work. The float sets it to display: block; so the display: inline; should be overruled...in other words, no different than just float: left; by itself.

However, that above is invalid CSS since you are required to specify a width on a float (except in the case of replaced elements, which headings are not).

So, it looks like floating it to control the width is out.

With this method, the underline/border renders so that extends no further than the text, and that's what I want. Coupled with clear:left applied to the following paragraphs, it seems to work perfectly.

But I'm unsure if it's a right way of doing things, so I'm using <span> for the time being.

[pgo]

Originally Posted by Michal

With this method, the underline/border renders so that extends no further than the text, and that's what I want. Coupled with clear:left applied to the following paragraphs, it seems to work perfectly.

It may "work" but it's not valid.

Besides, like I said, the display: inline; float: left; combination is redundant.