CSS Border Bottom Effect: <h1> vs Using A Class

[Lauri Raittila]

in alt.html, Fred wrote:

http://mywebpages.comcast.net/surge42/h1style.htm

Is there a way to have this same exact effect by assigning a class
instead?

Yes, it works. You have most likely tried it on a element (the classname
you have is not used on your page), which is inline. Add display:block,
or better, use style on suitable container.

 

[Mark Parnell]

http://mywebpages.comcast.net/surge42/h1style.htm

Is there a way to have this same exact effect by assigning a class
instead?

Yes:

h1.classname {...}

<h1 class="classname">...</h1>

But in this case there wouldn't be any difference.

For some reason the border-bottom line will not extend beyond
the text.

Does here (Moz 1.7.5, Win 2k).

 

[Fred]

Hello

<style type="text/css">
<!--
h1 {
margin-top: 0.8em;
margin-left: 28px;
margin-right: 2em;
font-size: 1.2em;
border-bottom-width: 2px;
border-bottom-color: #D7D7D7;
border-bottom-style: solid;
padding-bottom: 3px;
text-align: left;
}
-->
</style>


This style controls <h1> so that it looks like this...

http://mywebpages.comcast.net/surge42/h1style.htm

Is there a way to have this same exact effect by assigning a class
instead? For some reason the border-bottom line will not extend beyond
the text.

 

[Mark Parnell]

<span class="LineContinuesLikeitDoesWith_h1">
How would the CSS look in this situation?

The problem is that span is an inline element; headings are block-level
elements.

The solution would be to add { display: block; } to the CSS for the
span, but this will probably cause other unwanted side effects.

BTW: Please don't post upside down.
http://www.allmyfaqs.com/faq.pl?How_to_post
http://en.wikipedia.org/wiki/Top-posting

 

[Toby Inkster]

For some reason the border-bottom line will not extend beyond the text.

You are possibly trying to set the border on an inline element. Inline and
block elements behave differently with borders.

 

[Fred]

Let me ask it this way...

I'd like to achieve the same effect with out using <h1> at all.
Actually I'd like to apply the effect this way..

<span class="LineContinuesLikeitDoesWith_h1">
How would the CSS look in this situation?

The reason I'm asking is because I'm changing styles that are applied
to dynamically created HTML. And the classes are already defined.

There are no <h1>'s used...

I have no other choice but to apply the styles to <span>

thnx

 

[Fred]

You are possibly trying to set the border on an inline element. Inline and
block elements behave differently with borders.

I'm reading between the lines here and I think I'm screwed.
I'm going to have to start digging into the script (PERL) and change
it so that the printed html uses <h1> instead of <span>

I thought there might be a way to apply a special style to the
existing tag thats used <span>.

Thanks for the help guys
Fred

 

[Toby Inkster]

I thought there might be a way to apply a special style to the
existing tag thats used <span>.

There is. As others have said: "display:block".