Hi all
I’m trying to find the best way to recreate the box like the one in the top of this image - http://www.ttmt.org.uk/box/
It’s a nav box with a slight shadow on the right and bottom, I’m not asking about styling the text or position but the drop shadow. I don’t want to use CCS3 and I don’t want to have a box with a background image the size of the box.
I tried to use a method from deathshadow60 I found posted - http://www.sitepoint.com/forums/showthread.php?t=695764
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>untitled</title>
<style type="text/css" media="screen">
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
font:normal 85%/140% arial,helvetica,sans-serif;
}
.box{
width:230px;
margin:20px;
color:#666;
}
.borderTop,
.borderBottom {
font-size:1px; /* prevent IE height bug */
background:url(images/borders1.png) bottom left no-repeat;
}
.borderTop {
margin-bottom:-34px;
background-position:top left;
}
.borderTop div,
.borderBottom div {
margin-left:10px;
height:20px;
background:url(images/borders1.png) bottom right no-repeat;
}
.borderTop div {
height:44px;
background-position:top right;
}
.borderSides {
overflow:hidden; /* wrap floats */
height:1%; /* trip haslayout, wrap floats IE */
1border:solid #d6d4d4;
1border-width:0 1px;
}
.borderSides ul{
margin-left:30px;
list-style:none;
}
.borderSides ul li{
padding:5px 2px;
}
</style>
</head>
<body>
<div class="box">
<div class="borderTop">
<div></div>
</div>
<div class="borderSides">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ul>
</div><!-- .borderSides -->
<div class="borderBottom">
<div></div>
</div>
</div><!-- .box -->
</body>
</html>
I used one image like the bottom image here - http://www.ttmt.org.uk/box/
as background images in div’s and placed at the corners.
This works too a point but I can’t use this method to get the drop shadow on the right edge - http://www.ttmt.org.uk/box/example/
The box will also be on a textured background as shown in the top image here - http://www.ttmt.org.uk/box/
It tried to use a png image with transparent sides but this shows the image below - http://www.ttmt.org.uk/box/example1/
So what is the best way to have an expandable box with drop shadow?
Is it possible to have it with a textured background below ?
![One image for the bottom, [URL=“http://www.pmob.co.uk/temp/images/dsside.png”]one image for the sides and [URL=“http://www.pmob.co.uk/temp/images/dscorner.png”]one image](http://www.pmob.co.uk/temp/images/dsbase.png){kind=link}