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

Discussion in 'HTML' started by Lauri Raittila, Mar 3, 2005.

  1. 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.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
    Utrecht, NL.
    Lauri Raittila, Mar 3, 2005
    #1
    1. Advertising

  2. Lauri Raittila

    Mark Parnell Guest

    Previously in alt.html, Fred <> said:

    > 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).

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Mar 3, 2005
    #2
    1. Advertising

  3. Lauri Raittila

    Fred Guest

    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.
    Fred, Mar 3, 2005
    #3
  4. Lauri Raittila

    Mark Parnell Guest

    Previously in alt.html, Fred <> said:

    > <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

    --
    Mark Parnell
    http://www.clarkecomputers.com.au
    Mark Parnell, Mar 3, 2005
    #4
  5. Lauri Raittila

    Toby Inkster Guest

    Fred wrote:

    > 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.

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 3, 2005
    #5
  6. Lauri Raittila

    Fred Guest

    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



    On Thu, 3 Mar 2005 12:01:27 +1100, Mark Parnell
    <> wrote:

    >Previously in alt.html, Fred <> said:
    >
    >> 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, Mar 3, 2005
    #6
  7. Lauri Raittila

    Fred Guest

    On Thu, 03 Mar 2005 08:16:31 +0000, Toby Inkster
    <> wrote:

    >Fred wrote:
    >
    >> 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.



    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
    Fred, Mar 3, 2005
    #7
  8. Lauri Raittila

    Toby Inkster Guest

    Fred wrote:

    > 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".

    --
    Toby A Inkster BSc (Hons) ARCS
    Contact Me ~ http://tobyinkster.co.uk/contact
    Toby Inkster, Mar 3, 2005
    #8
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Dan
    Replies:
    1
    Views:
    8,336
    ainigma
    Apr 4, 2008
  2. Noozer
    Replies:
    1
    Views:
    7,099
    Carolyn Marenger
    Mar 13, 2006
  3. phl
    Replies:
    1
    Views:
    4,324
    Martin Jay
    Jun 8, 2006
  4. Replies:
    3
    Views:
    889
    richard
    Sep 24, 2006
  5. Cuthbert
    Replies:
    8
    Views:
    418
    Ancient_Hacker
    Sep 13, 2006
Loading...

Share This Page