Curved border problem

Different resolutions...

[phidentity]

the css:

h2.mini{

font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size : 20px;
letter-spacing : 2px;
text-transform : lowercase;
word-spacing : 1px;
text-align : center;

color : #FF9E46;
background : transparent url(right.jpg) right top no-repeat;
margin-left:-47.5%;
padding:0;
}

the html:

<h2 class="mini"><img src="left-content.jpg">Want Widgets?</h2>

Basically it puts a nice curved border image on the right (css) and on the left (img src (html) ), however the left part wont stick even if I use % values, which usually saves me.

What can I do?

I can make it work on all resolutions if I create extra div tags with nothing inbetween them (no text etc), but what if I want the curves surrounding my heading?

Jon

[SuzyUK]

The img (the left corner) is going to the center.. because of text-align: center; in your CSS for the H2.

you might find the Sliding Doors Article [alistapart.com] interesting.. because the technique explains how to "layer" background images using CSS.. just remember it doesn't have to tabbed lists it's used for, the technique can be used an any element.. you just need to have at least two nested elements..

Suzy

[grahamstewart]

One approach would be to use two images, floating one left and the other right..

HTML:

<h2 class="mini"><img class="lb" src="left.gif"><img class="rb" src="right.gif">Want Widgets?</h2> 

CSS:

.mini { 
text-align: center 
} 
.mini .lb { 
display: block; 
float: left; 
} 
.mini .rb { 
display: block; 
float: right; 
} 

I don't like this approach tho because it is introducing foreground images that are purely for style (rather than part of the semantic markup) which makes it harder to change styles at a later date and so defeats one of the goals of CSS.

But you may be less picky than me... :)

[NickA]

the approach i used borrows from the sliding doors article mentioned by SuzyUK.

code as follows but you'll have to change which elements the images are anchoring themselves from. in your case this approach might introduce non structural markup as you need at least 2 elements for the 2 images, so may not be appropriate. hope it helps anyway.

.actions{list-style:none;padding:0px 0px 2px 0px; margin:0px 0px 3px 0px;}
.actions li a {background:url("images/button_action_02.gif") no-repeat right;margin-left:0px;padding: 4px 25px 5px 4px;font-size:11px;font-weight:bold;color:#FFFFFF;text-decoration:none;}
.actions li {background:url("images/button_action_01.gif") no-repeat left;padding: 4px 4px 5px 4px;}

<div>
<ul class="actions">
<li><a href="#">Save for Later</a></li>
<li><a href="#">Add to Favourites</a></li>
<li><a href="#">Read the Reviews</a></li>
</ul>
</div>