Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS help with heading style – dynamic length

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #29308
    penguin
    Member

    Hi,

    I want to define a heading style that has a thin rule extend from the end of the heading across the rest of the column, something like this:

    [attachment=0]sample.png[/attachment]

    any ideas on how to do this dynamically?

    Thanks!!

    #77458
    TheDoc
    Member

    I can think of a way using negative margins and having the heading have a background of white… but I don’t like negative margins.

    In the negative margin case, you would wrap the content below the heading in a div and give it a border-top of the grey line, then put a negative top margin on it to move it up. You would apply a white background to the heading which would cut off the line.

    #77412
    penguin
    Member

    That approach didn’t exactly work b/c when you apply a background color to the heading style it extends across the entire column (not just the width of the text)– effectively covering up the suggested border on a div below it.

    Thank you for the suggestion. Much appreciated– any other ideas? :)

    #77484
    TheDoc
    Member

    Sorry, forgot about that. It wouldn’t be ideal, but to get around it you can do this:

    h1 span { background: green; }

    <h1><span>Your Text</span></h1>

    #77657
    penguin
    Member

    That did indeed work. Solved (though you’ve said it’s not ideal between the span tags & negative margin).

    I’m curious why the negative margin is frowned upon as well as the span tags

    #77658
    penguin
    Member

    oh, and of course– THANK YOU very much for your replies & suggestions!!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.