Ok, I am very new to css and I read a tutorial on how to make a drop shadow effect on images. The method involves creating 3 divs, with the image file in the innermost, and then 3 shadow image files within each of the 3 divs as well. I tried to create a fourth outermost div with the property margin: 0 auto; so that it would center the whole thing. To see what I mean:
http://d3kicks.com/css/forum.html
For some reason it wont center the whole thing... Here is the code:
<html>
<style>
.wrap0 {
margin: 0 auto;
}
.wrap1 {
float: left;
background:url(shadow.gif) right bottom no-repeat;
}
.wrap2 {background:url(corner_bl.gif) left bottom no-repeat;}
.wrap3 {
padding:0 8px 8px 0;
background:url(corner_tr.gif) right top no-repeat;}
</style>
<body>
<div class= "wrap0"><div class="wrap1"><div class="wrap2"><div class="wrap3"><img src="logo.jpg" width="209" height="204" /></div></div></div></div>
</body>
</html>
Can anyone tell me what I am doing wrong, and why the image is not centering on the page...
Reply With Quote
Bookmarks