Automatically sized images before and after an <H1> tag

I'm working with a designer on a site. She's got a great idea for decorating the h1 headings on the site, but I'm having trouble finding a way to implement this.

Her plan is to center each H1 title by sandwiching it between two visual elements that get resized to take up the space available. Think of each visual element as a double-ended arrow with a decoration in the middle and a straight line connecting them all.

You can see this right now with static images inserted via CSS :before and :after tags on the live site (and understand why she hates this). The images are the flowers connected with lines with the loops in the middle.

http://getwellgabby.org/thanks/

I'm thinking that this is a job for jQuery, but I'm not sure where to 开发者_开发知识库get started with this. Any help pointing me in the right direction would be appreciated.

+1 Interesting question.

Without working it out completely, it looks like you could use the Sliding Doors logic to extend and shrink the images as necessary.

http://www.alistapart.com/articles/slidingdoors2/

http://azadcreative.com/2009/03/bulletproof-css-sliding-doors/

Where you would use jQuery is the dynamically adjust the widths. So find the width of the h2, subtract that from the width of the containing div and then divide the result in two and that is the width of each side image.

So basically the width of the flower would change depending on the character length of the H1 tag in the middle? This would surely distort to shape of the flowers/loops and therefor defeat the purpose of improving the look.

You could just distribute the 3 elements (left flower chain, heading, right flower chain) along the maximum width of that row, which is simply "text-align:centre;".

the other complicated option involves breaking both flower chain's up into 5 pieces. the 2 ends and the middle never change, but the 2 sections between are the straight lines the fill remaining space. The final look could be acheived by making 1 straight line background and putting a lower z-index on it and places the buds and loops on top of it and spreading them out over the width.

I hope you understood that cuz its hard to eplxain without illustrations lol.

You can add the images, but the issue is when the title is too long. Since the images are fixed width, your heading text size is very limited. You can shrink the images, but then they will get distorted and look ugly.

If you change the image, and have a straight line instead of the circles, you have more options.

You may also have multiple sets of images, and use server side code (not JavaScript) to switch between them. You can check the length of the text, and estimate its width. Then you can add a class to the h1, which will show the appropriate images.

Try not to use JavaScript.