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.
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.
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.
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
Example: http://jsfiddle.net/MVm3Q/2/
http://jsfiddle.net/joshnh/2dUqV/
http://jsfiddle.net/Paulie_D/tW5Nd/
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.
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/