473,322 Members | 1,510 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,322 software developers and data experts.

Different underline color for block elements

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 ------------]
Jul 20 '05 #1
8 14674
Florian Brucker wrote:
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>


<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

Jul 20 '05 #2
On Sun, 03 Oct 2004 17:57:13 +0200, Florian Brucker <to**@torfbold.com>
wrote:
Hi!

I'm trying to use a different underline color than the text color on my
headings using the border-bottom method.
Underlining makes people think it's a link. Be careful with this.
Unfortunately the underline spans the whole width of the heading (not
only the text), because headings are block elements.
Yep.
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?


Toby's way may work. Another option is to set a width in ems for that
specific heading which works.
Jul 20 '05 #3
Toby Inkster wrote:
[use :before and :after]


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 ------------]
Jul 20 '05 #4
Neal wrote:
Underlining makes people think it's a link. Be careful with this. Yep. It's for headings only.
Toby's way may work. Another option is to set a width in ems for that
specific heading which works.

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 ------------]
Jul 20 '05 #5
Florian Brucker wrote:
I'll have to check what it looks like when :before and :after are not
supported.


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

Jul 20 '05 #6
Florian Brucker wrote:
<div class="h1"><span>My heading</span></div>


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

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

HTH
Markus
Jul 20 '05 #7
>> <div class="h1"><span>My heading</span></div>
Do you apply the underline to h1? Then try to apply it to the span:
h1 span {
border-bottom:1px solid red;
}


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 ------------]
Jul 20 '05 #8
On Wed, 06 Oct 2004 00:01:21 +0200, Florian Brucker <to**@torfbold.com>
wrote:
<div class="h1"><span>My heading</span></div>

Do you apply the underline to h1? Then try to apply it to the span:
h1 span {
border-bottom:1px solid red;
}


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.


Try:

h1 {display: inline; border-bottom: 1px solid black;}
Jul 20 '05 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

21
by: Scott Townsend | last post by:
I have a form that I allow the user to use the ALT-S key to submit. I'd like to have just the S in the Submit button underlined, Is this possible? Thanks, Scott<-
1
by: Francesco Moi | last post by:
Hi. I've got this piece of code: ----------------//--------------------- <html><head> <style type="text/css"> #block {margin:0 0 0 0; display:block;} ..left-pic {display:block; float:left;}...
1
by: RugbyTravis | last post by:
I want to have a list that is horizontal and each <li> has different images. I also want them to change on hover. I want the words to be below the images as well. Anyone of you styles gurus have...
3
by: ad.von.reeken | last post by:
Hello CSS-ers, My question is: Is it possible to use CSS to prevent the 'Gecko-underline' behind 'anchored' images on pages with patterned background images? The page...
17
by: pasdecrap | last post by:
The following code will produce similar results in IE6 and firefox 1.0.4 however the left margin in FF is 4 pixels and in IE it is 5. Can anyone see why this is happening? I can't seem to figure...
29
by: jmaxsherkimer | last post by:
the site we're working on has some anchor links, you click them they scroll to the bottom of the page with the answers to the questions linked on to. is there anyway to make it so that the links...
2
by: John A Grandy | last post by:
when using StringBuilder to build-up a block of text (which is then assigned to a Label control) is it possible to underline a portion of the text ? it would seem that...
10
by: Chris Sharman | last post by:
See http://services.ccagroup.co.uk/testlink.html It's valid html 4.01 transitional. It contains 6 links: A1-A3, and B1-B3. A is with no (default) style, B has "a img.nound { text-decoration:...
11
by: Alan | last post by:
Okay, IE and Netscape have a default link style with "color: blue;" and "text-decoration: underline". That's fine, but for what I am doing I need to turn OFF the default styling. I know how to...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.