Hey all,
Not sure if I’m using the best solution but it’s one that seems easy but for me it’s not working right and the other solutions I’ve tried do the same so I must be missing something in the code.
Basically I am trying to add a drop shadow for the Container DIV. I created a PNG 1000 px Wide x 10 px High and used this as the background for the Wrapper DIV with Repeat Y. It only seems to show the drop shadow on the edges of the head-top DIV and doesn’t even extend to the head-bottom part of the header DIV.
Here is the HTML
<!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>Flip it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" /></div>
<div id="head-bottom">
<div id="moto"></div>
</div>
<div id="content">This is the main content area</div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
The CSS
@charset "utf-8";
body {
background-image: url(images/images/bggrad_01.png);
background-repeat: repeat-x;
margin-top: 0px;
padding-top: 0px;
}
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
height: auto;
background-image: url(images/shadow.png);
background-repeat: repeat-y;
}
#container {
width: 942px;
height: auto;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#header {
width: 100%;
height: 126px;
margin-right: auto;
margin-left: auto;
}
#head-top {
background-image: url(images/topheaderbg.png);
background-repeat: repeat-x;
width: 100%;
height: 126px;
background-color: #06266F;
}
#head-bottom {
width: 100%;
height: 101px;
background-image: url(images/bottombannerbg.png);
}
#logo {
float: left;
margin-top: 35px;
margin-left: 27px;
}
#moto {
float: left;
margin-top: 10px;
margin-left: 31px;
background-image: url(images/moto.png);
height: 52px;
width: 414px;
}
#footer {
background-image: url(images/topheaderbg.png);
background-repeat: repeat-x;
height: 300px;
width: 100%;
}
Many thanks for any help you can give me
Okay so I’m still trying to get this to work n may have made some progress but only if I set the Height on the Content area. I have seen code to keep the Footer at the bottom but without starting from scratch I’ve not been successful in getting it to work with my design.
This seems to work okay apart from the fixed Height.
Can anyone help me adapt this code so that the Footer stays on the bottom of the screen?
Code so far…
<!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>Flip it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" />
</div>
<div id="head-bottom">
<div id="moto"></div>
</div>
<div id="content"><p>This is the main content area</p></div>
<div id="footer"></div>
</div>
</div>
</div>
</body>
</html>
CSS
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
html, body {height: 100%;}
body {
background-image: url(images/images/bggrad_01.png);
background-repeat: repeat-x;
}
#wrapper {
width: 1000px;
margin-right: auto;
margin-left: auto;
min-height: 100%;
background-image: url(images/shadow.png);
background-repeat: repeat-y;
}
#container {
width: 942px;
margin-right: auto;
margin-left: auto;
background-color: #FFF;
}
#header {
width: 100%;
height: 126px;
}
#head-top {
background-image: url(images/topheaderbg.png);
background-repeat: repeat-x;
width: 100%;
height: 126px;
background-color: #06266F;
}
#head-bottom {
width: 100%;
height: 101px;
background-image: url(images/bottombannerbg.png);
}
#logo {
float: left;
margin-top: 35px;
margin-left: 27px;
}
#moto {
float: left;
margin-top: 10px;
margin-left: 31px;
background-image: url(images/moto.png);
height: 52px;
width: 414px;
}
#content {
background-color: #EAEAEA;
width: 100%;
height:558px;
}
#footer {
background-image: url(images/topheaderbg.png);
height: 126px;
}
I can see your bg graphics so, I may be a bit off here. It’s important to note that you only get ONE SHOT at 100% height. That is if you are using the container to holed a bg shadow and your content holds “clashing” image … then it isn’t going to work. If you were to set the container to height:100% then it wont expand if there is more than one screen height worth of content, and your shadow will appear to get cut off. If you set it to min-height:100% then you drop shadow will work but if your content isnt tall enough then the “black” part of the shadow will show beneath; this is why the content and shadow images must match somehow. I dunno if that is clear.
In either case , keeping in mind the aforementioned caveats, this would be a way to build what you are looking for.
<!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>Flip it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
@charset "utf-8";
* {
margin: 0px;
padding: 0px;
}
html, body {height: 100%;}
body {
background-image: url(images/images/bggrad_01.png);
background-repeat: repeat-x;
}
#wrapper {
width: 1000px;
margin: 0 auto;
min-height:100%;
background-image: url(shadow.png);
background-repeat: repeat-y;
position: relative
}
#container {
width: 942px;
margin: 0 auto;
background-color: #FFF;
}
#header { float:left; width:100%}
#head-top {
background-image: url(images/topheaderbg.png);
background-repeat: repeat-x;
height: 126px;
background-color: #06266F;
}
#head-bottom {
height: 101px;
overflow: hidden;
background-image: url(images/bottombannerbg.png);
}
#logo {
float: left;
outline: 1px solid red;
margin-top: 35px;
margin-left: 27px;
}
#moto {
float:left;
margin: 10px 0 0 31px;
background-image: url(images/moto.png);
background-color:pink;
height: 52px;
width: 414px;
}
#content {
background-color: #EAEAEA;
padding-bottom: 126px;
margin-bottom: -126px;
clear:both;
}
#footer {
background-image: url(images/topheaderbg.png);
height: 126px;
background: red;
width: 942px;
position: absolute;
left:29px;
bottom:0;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="container">
<div id="header">
<div id="head-top"><img src="images/Flip-it-logo.png" alt="Company Logo" width="168" height="57" id="logo" /></div>
<div id="head-bottom">
<div id="moto">This is your motto</div>
</div>
</div>
<div id="content"><p>This is the main content area</p></div>
</div>
<div id="footer">footer</div>
</div>
</body>
</html>
Hey Dresden thanks for your input. To be honest I think I need to start from the beginning 
I’m trying to create a template for Wordpress for the first time and piecing together various code snippets from the web to try and turn my Photoshop design into a working HTML page isn’t going so well…
I’ll forget the content design for now as I have a clear idea of how I want it to look and function and concentrate on getting a working HTML page that has a Centred Main Container, a drop shadow around this container and a Footer that expands to the height of the screen if there isn’t enough content and expands to accommodate more content when needed.
Thanks again