- This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
Viewing 6 posts - 1 through 6 (of 6 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
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
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/
I think this has come up before….here’s a couple of options
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.
@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/
Here is a technique that doesn’t involve faking a background image: http://jsfiddle.net/joshnh/AHNQd/