Creating DIV box with round corners
One of the most intriguing problems I've ever come across on HTML is creating boxes using DIV that have round corners.
Gone are the days when a TABLE was used for almost anything on a webpage. People generally find it quite convenient to make the whole webpage using a TABLE. But the best practices hold that TABLEs should only be used to display data, not design UI.
So what do we use for designing UIs? DIV, of course :) along with CSS.
If you are a TABLE lover and wish to design better by switching over to DIV-based design, chances are that you'd end up being frustrated. Initially you might find it a bit troublesome to grasp the idea, but with practice you can make your life easy.
I will not go into the details of the DIV based designs, but I'll definitely point you to the page which helped me get the initial idea:
http://www.devarticles.com/c/a/Web-Style-Sheets/DIV-Based-Layout-with-CSS/
Please visit this article to understand what this article is talking about.
So lets get down with the basic idea of round corners. Let us see how this could have been done using tables:
With tables, you could have 3 TRs:
- First TR has 3 TDs. The ones at the end have the image for round corners.
- Second TR has one TD, the content area, for the main content that needs to be shown in the box.
- And the third TR is same as first with the rounded corners for the bottom.
If you've designed a few DIV based web-pages, you would know that you need to arrange the elements of the page into different layers of DIVs.
Here's a plan of how our rounded-corner DIV should look like:
Now we can see that what were TRs earlier are now reduced to different DIVs.
Let me explain the different layers of divs here. There are a total of eight DIVs in this approach. Everything that you see above is a DIV:
- The whole of the big box you see above is a DIV. Its called a container and it is required to hold and control the remaining DIVs.
- The Top Bar is DIV #2. This is used to control DIVs #3 and #4, top-left and top-right respectively.
- The content area is DIV #5.
- The Bottom Bar is DIV #6 and is used to hold the DIVs #7 and #8, bottom-left and bottom-right respectively.
- Create the container DIV. Create all the following DIVs inside the container DIV in order to keep them controlled.
- Create the "topbar" DIV and make it float:top
- Create DIVs "top-left" and "top-right" inside the "topbar" and make them float left and right respectively.
- Create the DIV "content". Make it float:top so that it joins the topbar from bottom.
- Create the DIV "bottombar" and make it float:top
- Create the DIVs bottom-left and bottom-right inside the "bottombar" and make them float left and right respectively.
For the demo code that follows, i've used the follows, i've used the following images ( I bet you cannot see any of the images below. So click on the adjoining links if you wish to save them to run the demo):
<- Top Left
<- Top Right
<- Bottom Left
<- Bottom RightAnd, here's the code that does the trick:
<html>
<head>
<style>
body{
background-color: #DADADA;
}
.rounder-container{
background-color: #FFFFFF;
width: 400px;
}
.topbar{
height: 5px;
width: 100%;
float: top;
}
.top-left{
background-image: url('top-left.png');
background-repeat: no-repeat;
height: 5px;
width: 5px;
float: left;
}
.top-right{
background-image: url('top-right.png');
background-repeat: no-repeat;
height: 5px;
width: 5px;
float: right;
}
.content{
float: top;
}
.bottombar{
height: 5px;
width: 100%;
float: bottom;
}
.bottom-left{
background-image: url('bottom-left.png');
background-repeat: no-repeat;
height: 5px;
width: 5px;
float: left;
}
.bottom-right{
background-image: url('bottom-right.png');
background-repeat: no-repeat;
height: 5px;
width: 5px;
float: right;
}
</style>
</head>
<body>
<div class="rounder-container">
<div class="topbar">
<div class="top-left"></div>
<div class="top-right"></div>
</div>
<div class="content">
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
just some content!<br/>
</div>
<div class="bottombar">
<div class="bottom-left"></div>
<div class="bottom-right"></div>
</div>
</div>
</body>
</html>
Save the above code as HTML in a folder along with the round corner images. Open the page in Mozilla Firefox for now. If you've done everything right, the box should appear correctly.
Now for the frustrating part. Open the same page in IE. Aren't you frustrated now to see the output? I'm sure you are.
But we have a solution for that. Declare the following doctype at the top of the HTML source. It should be the first line in the file.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Now refresh the page in IE. Things should appear fine now.
This should suffice for most of you, but you might also find that the text is too near the boundary. You might want to put in some padding there.
Now there are quite some sets of issues related to padding, so we're not going to get into that right now. What we'll do is create another DIV inside the DIV "content", and specify a reasonable margin to keep it a bit away from the boundaries of the parent DIV.
So modify the code as:
And update the style sheet with:
<div class="content">
<div class="rounder-content">
some content!
....
....
</div>
</div>
.rounder-content{
margin: 3px 7px 3px 7px;
}
That's all you need to do and you'll get a brand-new, shining and glazing round-cornered DIV ready to be used. :)
