Hi!

I'm trying to use a different underline color than the text color on my
headings using the border-bottom method. Unfortunately the underline
spans the whole width of the heading (not only the text), because
headings are block elements. Is there another way than using
extra-markup like

<div class="h1"><span>My heading</span></div>

to get an underline which only underlines the text?

Thanks for any hints,
Florian
--
Give a man a fish; you have fed him for today. Teach a man to fish,
and he will sit in the boat and drink beer all day. (OldFox)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

Florian Brucker wrote:
[color=blue]
> I'm trying to use a different underline color than the text color on my
> headings using the border-bottom method. Unfortunately the underline
> spans the whole width of the heading (not only the text), because
> headings are block elements. Is there another way than using
> extra-markup like
>
> <div class="h1"><span>My heading</span></div>[/color]

<style type="text/css">
h1 {
display: inline;
border-bottom: thick solid red;
}
h1:before, h1:after {
content: "\A";
}
</style>
<h1>My heading</h1>

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

On Sun, 03 Oct 2004 17:57:13 +0200, Florian Brucker <torf@torfbold.com>
wrote:
[color=blue]
> Hi!
>
> I'm trying to use a different underline color than the text color on my
> headings using the border-bottom method.[/color]

Underlining makes people think it's a link. Be careful with this.
[color=blue]
> Unfortunately the underline spans the whole width of the heading (not
> only the text), because headings are block elements.[/color]

Yep.
[color=blue]
> Is there another way than using extra-markup like
>
> <div class="h1"><span>My heading</span></div>
>
> to get an underline which only underlines the text?[/color]

Toby's way may work. Another option is to set a width in ems for that
specific heading which works.

Toby Inkster wrote:[color=blue]
> [use :before and :after][/color]

A really nice idea! This brings me, however, to that point again where I
have to decide whether to use nice CSS2 or to take those IE users into
account (no flame wars on that topic, please ;)
I'll have to check what it looks like when :before and :after are not
supported.

Thanks for the help!
Florian
--
If all goes well, you should see an ugly, loathsome, repulsive,
deformed window manager called twm, probably the smallest window
manager available. (Gentoo Linux Handbook)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

Neal wrote:[color=blue]
> Underlining makes people think it's a link. Be careful with this.[/color]
Yep. It's for headings only.
[color=blue]
> Toby's way may work. Another option is to set a width in ems for that
> specific heading which works.[/color]
That would mean to set the width for each individual heading? In most
cases I'm not a friend of such methods - too much work to keep it
working (it's the same with images for headings, etc.).

Thanks nevertheless!
Florian
--
I have seen the future and it doesn't work. (Robert Fulford)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

Florian Brucker wrote:
[color=blue]
> I'll have to check what it looks like when :before and :after are not
> supported.[/color]

Shouldn't cause too many problems assuming that the heading is immediately
followed by a block-level element such as a paragraph (and if it's
preceeded by anything, preceeded by a block level element).

--
Toby A Inkster BSc (Hons) ARCS
Contact Me ~ http://tobyinkster.co.uk/contact

Florian Brucker wrote:
[color=blue]
> <div class="h1"><span>My heading</span></div>[/color]

Do you apply the underline to h1? Then try to apply it to the span:

h1 span {
border-bottom:1px solid red;
}

HTH
Markus

>> <div class="h1"><span>My heading</span></div>
[color=blue]
> Do you apply the underline to h1? Then try to apply it to the span:
> h1 span {
> border-bottom:1px solid red;
> }[/color]

No, that's not the problem ;) When using the above markup, it's no
problem to get the desired effect. My question was if this could be done
*without* extra markup, i.e. "<h1>My heading</h1>". This seems to be
possible, according to the other answers I got.


Greetings,
Florian
--
All religions are founded on the fear of the many
and the cleverness of the few. (Stendhal)
[------------ http://www.torfbold.com - POV-Ray gallery ------------]

On Wed, 06 Oct 2004 00:01:21 +0200, Florian Brucker <torf@torfbold.com>
wrote:
[color=blue][color=green][color=darkred]
>>> <div class="h1"><span>My heading</span></div>[/color][/color]
>[color=green]
>> Do you apply the underline to h1? Then try to apply it to the span:
>> h1 span {
>> border-bottom:1px solid red;
>> }[/color]
>
> No, that's not the problem ;) When using the above markup, it's no
> problem to get the desired effect. My question was if this could be done
> *without* extra markup, i.e. "<h1>My heading</h1>". This seems to be
> possible, according to the other answers I got.
>[/color]

Try:

h1 {display: inline; border-bottom: 1px solid black;}