A friend of mine was trying to get a rounded corner bar at the top of some web content. He already had the rounded corner images but didn’t know the HTML and CSS markup. I sent him over the following snippet of code as an example:
<div style="width:100%;background-color:blue;height:14px;margin:0px;padding:0px;font-size:5%;"> <div style="float:left;background-image:url('left.gif');width:14px;height:14px;"> </div> <div style="float:right;background-image:url('right.gif');width:14px;height:14px;"> </div> </div>
To understand, note the following:
- The
width:100%
should be set the width appropriate to your content. - The width and height (
14px
in the example above) should be replaced by the actual width and height of your rounded corner images. - What’s with the
font-size:5%
? Making the font size very small will ensure that any white space will not create a block larger than the desired height (in our case,14px
).
The following bar was made using the above content, using images from this web site.