Building Rounded Corners With CSS and JavaScript - Nesting div elements
(Page 5 of 6 )
If applying four backgrounds images is our objective, a logical solution would be nesting four <div> elements, each containing the proper background, corresponding to every rounded corner. Doing it that way surely solves our problem quickly, but it introduces a lot of additional markup without adding any structural value.
Here’s the markup for doing so:
<div class="rounded"><div><div><div>
Content Goes Here
</div></div></div></div>
And, the CSS code:
<style type="text/css">
.rounded {
width: 300px;
background: #00f url(tl.gif) no-repeat top left;
}
.rounded div {
background: transparent url(tr.gif) no-repeat top right;
}
.rounded div div {
background: transparent url(bl.gif) no-repeat bottom left;
}
.rounded div div div{
background: transparent url(br.gif) no-repeat bottom right;
padding: 40px;
}
</style>
It’s pretty easy to know what’s going on with this technique. Each of the four divs applies a rounded corner background image, positioned in the top left, top right, bottom left and bottom right corners respectively. Also, we’ve set the width of the containing <div> to be 300px. But it could be easily switched to another, different value, probably in percentage, being useful and flexible enough for use with “liquid design” approaches. Our rounded corners should work without having to worry about the width of the containing <div>.
The visual output is the following:
As we’ve done previously, we’ll show a simple diagram to demonstrate how this technique works:
Finally, we have found an acceptable solution to the problem. In comparison to the table based example, it uses far less markup. So, we’re happy, right? Not quite yet. While this is an acceptable approach, certainly, it’s not very efficient. We’re still adding three additional divs to the document, with no useful value to its structure. We need a better way to tackle the problem, and the answer is to look at the DOM (Document Object Model) and JavaScript, for dynamically altering a Web document’s structures. That’s the subject for the next section.
Next: Using the DOM approach >>
More JavaScript Articles
More By Alejandro Gervasio
|
| · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | · | | | | |
|
/ 36 
