Easy Flexible Rounded Boxes
Posted under: A number of people have asked me what is the easiest way to make rounded boxes without resorting to Javascript and other such methods. Well, you’re in luck and here is a method I use which is simple and lean in terms of mark up, also the box is flexible which always contains the text no matter what size the text is re-sized in the browser.
All you need is two images and an unordered list and away you go, here’s what we are going to make today:
The Images
First open up the image tool of your choice (I used Fireworks for this tutorial) and create an a rounded rectangle image about 273 x 170 pixels like the one below. It doesn’t matter what colour or gradient etc.. you choose – you be the boss here, or if you wish, you can download the images with the source files at the end of this tutorial.
Top
Once you have done this, give it a name. I chose “top.gif” as this will be the top of our box which will contain our title or heading.
Next we need to create one more rounded rectangle image which will form the bottom half of our box. With your image tool still open create an image like the one below. This time make it 273 x 400 pixels:
Once done, save it as “bottom.gif” and that’s it all the images you need!
The Mark Up
Simple mark-up is all that is needed. Here we create a div class of “round_box” and inside that div there is a level 2 heading and an unordered list made up of links. That’s all there is to it!
Note: I put in “#” as a url in this example, replace this with whatever you choose. Save this as “box.html”
1 2 3 4 5 6 7 8 9 10 11 | <div class="round_box"> <h2>Menu</h2> <ul> <li><a href="#">A BulletProof Idea</a></li> <li><a href="#">Look What My RSS Dragged in </a></li> <li><a href="#">Green Press</a></li> <li><a href="#">Introducing Cardiff Geeks</a></li> <li><a href="#">Splashes Of Colour</a></li> <li><a href="#">Hidden Gems Inside Mac OSX</a></li> </ul> </div> |
Styling The Box
Again this is so easy – let’s start by specifying a font-size and type:
1 2 3 | body { font-family: Helvetica, sans-serif; font-size:small; } |
Now to style the links, here Im choosing green with a hover state of orange with underlined text.
1 2 3 4 | a { color: #7DcE34; text-decoration:none;} a:hover{text-decoration:underline;color:#ff9900;} |
Now to give the bottom half of the box a width and a background image (bottom.gif):
1 2 3 | .round_box { width: 273px; background: url(img/bottom.gif) no-repeat bottom left; } |
Next we set the top of the box which will contain our second level heading or title and position it’s background image (top.gif). Notice I have set a border of 2px solid green, this gives a “join” between our two images.
1 2 3 4 5 6 7 | .round_box h2 { margin: 0; padding: 6px 8px 4px 10px; font-size: 180%; color: #fff; border-bottom: 2px solid #7DcE34; background: url(img/top.gif) no-repeat top left; } |
Now to style our unordered list:
1 2 3 4 | .round_box ul { margin: 0; padding: 14px 10px 14px 10px; list-style: none; } |
And our list items:
1 2 3 | .round_box li { margin: 0 0 6px; padding: 0;font-size:120%; } |
Save this as “box.css”, and that’s it finished!
Sunday I was searching for sites related to Web Hosting, but more specifically web hosting url. I found your site.