Hello CSS-experts,
I found the following template-classes to create a shadow-effect for
pictures and it works very well:
DIV.shadow {
float: left;
background-color: #777;
padding: 1px;
border: 1px solid #999;
margin: 0px;
}
DIV.shadow2 {
float: left;
background-color: #bbb;
padding: 1px;
border: 1px solid #ddd;
margin: 0.7em 1em;
}
DIV.shadow IMG {
border: 0px solid #666;
margin: 0;
display:block;
position: relative;
top: -3px;
left: -3px;
}
I want the shadow and the picture to appear in the middle of the page so
I created an additional DIV#mid:
DIV#mid {
width:500px;
text-align:center;
margin-left:auto;
margin-right:auto;
margin-top:20px;
}
HTML looks like that:
<div id="mid">
<div class="shadow2">
<div class="shadow">
<img src="lakers1.jpg" alt="LAKERS"/>
</div></div>
</div>
It doesn't work - the picture always appears at the left side of the
DIV#mid. Does anybody have an advice how to manage that the picture
appears exactly in the middle of the DIV#mid (page) together of course
with the shadow effect...?
You can find a link to the example page here how it looks right now:
http://phpscripts.bodtree.com/
Thanks in advance,
- Kersten
______________________________________________________________________
css-discuss [[email protected]]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
