I am trying something without using css3 or even tables to create a layout with curve corners and transparent drop shadows.
Normally I would just dump it into a 3x3 table and call it a day, but trying something with css.
I having issues with some of the divs not padding out correctly and was wondering if anyone has done this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"\\>
#a3x3-container {
width: 500px;
}
#top {
background-image: url(3x3a_images/t.png);
background-repeat: repeat-x;
background-position: top;
}
#bottom {
background-image: url(3x3a_images/b.png);
background-repeat: repeat-x;
background-position: bottom;
}
#left {
background-image: url(3x3a_images/l.png);
background-repeat: repeat-y;
background-position: left;
}
#right {
background-image: url(3x3a_images/r.png);
background-repeat: repeat-y;
background-position: right;
}
#topleft {
background-image: url(3x3a_images/tl.png);
background-repeat: no-repeat;
background-position: top left;
}
#topright {
background-image: url(3x3a_images/tr.png);
background-repeat: no-repeat;
background-position: top right;
}
#bottomleft {
background-image: url(3x3a_images/bl.png);
background-repeat: no-repeat;
background-position: bottom left;
}
#bottomright {
background-image: url(3x3a_images/br.png);
background-repeat: no-repeat;
background-position: bottom right;
}
#middle {
background-image: url(3x3a_images/m.png);
padding: 17px 0px;
margin: 0px 17px;
}
</style>
</head>
<body>
<div id="a3x3-container">
<div id="topleft">
<div id="topright">
<div id="bottomleft">
<div id="bottomright">
<div id="top">
<div id="bottom">
<div id="left">
<div id="right">
<div id="middle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl velit, ornare ut porttitor ac, suscipit ut velit. Suspendisse in dui libero. Maecenas ut erat lectus, non blandit elit. Suspendisse vitae mi et mauris pharetra dignissim in in neque. Etiam aliquam dapibus nisi in fringilla. Fusce tempor sollicitudin nulla, vitae mollis risus adipiscing ut. Nullam laoreet justo vel felis pretium volutpat. Sed augue mi, gravida sed placerat sit amet, sollicitudin in lectus. Curabitur feugiat nisi vel purus fermentum vestibulum. Nullam ac sodales est. Nulla hendrerit, ligula id rhoncus porttitor, ante dui pretium tellus, sed egestas augue libero vitae magna. Nam magna mi, condimentum vitae eleifend sit amet, suscipit pretium velit. Aenean scelerisque enim sed quam accumsan sed aliquet nibh molestie. Aliquam erat volutpat. Mauris id interdum leo. Nam vitae mi nec dui aliquam lacinia ac sed dui. Vivamus vehicula suscipit accumsan. </div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I added a zip of what I currently have and an image of what I want it to look like. I am just trying to figure this out so I can then just basically swap out the images and change a few settings and viola; another look and feel.
Any help would be appreciated.
