...

View Full Version : CSS Shadow Question



mrdantownsend
12-23-2006, 07:40 PM
first of all, here's the problem page : http://www.freewebs.com/mrdantownsend/example/template/index.html

Hello everyone, I am in the process of re designing my personal web site (again) and ran into a small issue

When the height of the navigation and the body isn't long enough, I get a residual shadow that doesn't have anything over it

so I was just wondering if there was a way to combat this other than making my body and navigation div's vertically longer

I have no problem with making them longer, but I was just wondering if there was a way to do it

thanks a million,

mrdantownsend

whizard
12-23-2006, 08:00 PM
How did you get the shadow to go to the bottom?

Dan

Excavator
12-23-2006, 08:42 PM
Hello mrdantownsend,
If you put the shadow on the other body it will be the same size as the menu or the #body, depending on which one is longer. That way you can have a footer finish the shadow...
Have a look at this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0065)http://www.freewebs.com/mrdantownsend/example/template/index.html -->
<html><head><title>mrdantownsend 4.0 -</title>
<meta http-equiv=content-type content="text/html; charset=windows-1252">
<meta content="mshtml 6.00.5744.16384" name=generator>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
text-align: center;
font-family: arial, sans-serif;
}
div#shadowbg {
background-image: url(mrdantownsend%204_0%20-_files/shadow.jpg);
background-repeat: repeat-y;
background-position: center 50%;
width: 700px;
margin: 0 auto;
padding-right: 31px;
padding-left: 31px;
}
div#head {
background-position: center 50%;
background-image: url(mrdantownsend%204_0%20-_files/head.jpg);
background-repeat: no-repeat;
height: 221px;
background-color: #ffffff;
}
div#nav {
border-right: #000000 0px solid;
border-top: #000000 3px solid;
float: left;
border-left: #000000 3px solid;
width: 167px;
border-bottom: #000000 3px solid;
height: 300px;
background-color: #deebff;
text-align: left;
}
div#body {
border-right: #000000 3px solid;
border-top: #000000 3px solid;
border-left: #000000 0px solid;
border-bottom: #000000 3px solid;
height: 300px;
background-color: #deebff;
margin-left: 167px;
}
h1 {
padding: 15px;
}
h2 {
padding: 15px;
}
h3 {
padding: 15px;
}
p {
padding: 15px;
}
ul {
padding: 15px;
}
blockquote {
padding: 15px;
}
h1 {
font-size: 20px;
}
p {
font-size: 17px;
text-indent: 20px;
line-height: 1.5;
text-align: justify;
}
</style>
</head>
<body>
<div id=head></div>
<div id=shadowbg>
<div id=nav>
<ul>
<h4>menu</h4>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
<div id=body>
<h1>lorem ipsum</h1>
<p>lorem ipsum dolor sit amet, consectetuer adipiscing elit. aenean pretium.
praesent ante. quisque eu diam id dolor luctus mollis. ut eu justo. nullam
condimentum interdum dui. duis ut lorem quis orci facilisis facilisis. ut vitae
nulla. nam purus neque, facilisis dictum, adipiscing vitae, facilisis non,
tellus. nam laoreet nulla vitae odio. curabitur vel nibh sed est condimentum
sodales.</p>
<!--closes body --></div>
<!--closes shadowbg --></div>
</body>
</html>

You'll have to edit the img paths.

mrdantownsend
12-23-2006, 08:43 PM
I used a 2 px jpg image and tiled it vertically in the center and then that's it

here's the CSS :



* {margin:0px;
padding:0px;
}

body {/* background */
background-color:#ffffff;
text-align:center;
margin-left:auto;
margin-right:auto;
background-image:url('images/shadow.jpg');
background-position:center;
background-repeat:repeat-y;
}
div#shadowbg {

}

div#wrapper {text-align:center;
margin-left:auto;
margin-right:auto;
width:700px;
/* background */
}

div#head {height:221px;
/* background */
background-color:#ffffff;
background-image:url('images/head.jpg');
background-repeat:no-repeat;
background-position:center;
/* margins */
/* borders */
}

div#nav {

width:167px;
height:400px;
/* background */
background-color:#deebff;
/* margins */
float:left;
/* borders */
border-style:solid;
border-width:3px;
border-color:#000000;
border-right-width:0px;
}


div#body {
<!--[if IE 6]>
border-left-width:3px;
<![endif]-->
width:527px;
height:400px;
/* background */
background-color:#deebff;
/* margins */
float:right;
/* borders */
border-style:solid;
border-width:3px;
border-color:#000000;
border-left-width:0px;
}

/* Text and Link Formatting */

h1, h2, h3, p, ul, blockquote {font-family:arial, sans-serif;
padding:15px;
}

h1 {padding-bottom:0px;
font-size:20px;
}

p {text-align:justify;
font-size:17px;
line-height:1.5;
padding-top:0px;
text-indent:20px;
}



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum