Forums

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

Home Forums CSS Expanding hr for responsive design.

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

    I would like the green lines in this title to shrink with the browser window.
    http://goodwynbuilding.com/communities/ashley-place/

    Here I am trying to use a percent width for the green lines. But that doesn’t work because I have different size titles on each page. I don’t want to readjust the percentages for each title.

    I wish the hr length could always be 100% of distance between the title and the arrow pointer on the end.

    Thanks

    #104995

    Have you considered using a background-image for the green line instead? You might be able to use :before and :after for the artwork on either side as well.

    Example: http://jsfiddle.net/MVm3Q/2/

    #105009
    Paulie_D
    Member

    I think this has come up before….here’s a couple of options

    http://jsfiddle.net/joshnh/2dUqV/

    http://jsfiddle.net/Paulie_D/tW5Nd/

    #105014

    Unfortunately neither of those options will work because they both have the title background color the same color as the body background.

    Because I have a wood pattern background that wont work for me. If I do background-transparent for title like I need to, on the above suggestions, the title will have the line going through the title.

    #105016

    @aaronheine, did you check the fiddle I provided? It uses the same wood pattern on the text element to hide the green background passing through.

    Fiddle: http://jsfiddle.net/MVm3Q/2/

    In fact, you could do away with all of the gradient code and use a dataURI on the background instead. This extends support further back in IE as well:

    Fiddle: http://jsfiddle.net/MVm3Q/8/

    #105031

    Here is a technique that doesn’t involve faking a background image: http://jsfiddle.net/joshnh/AHNQd/

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