Hello,
I have created a wire frame in PS and am now cutting it to html. There is a
gradient background 1 pixel wide that is applied to the body element of the
document. There is also a header, footer, and main content area slices that
all have a drop shadow that fades into the background image. The header and
footer look fine, but the content area is presenting an issue.
The body element has a 1px wide gradient that is 200px tall that fades into the
background color of the element.
The header looks fine, as it was cut from the wire frame and the drop shadow
and background line up correctly.
The footer as well looks fine, as it is outside of the height of the background
image.
The height of the body background image is greater then the height of the
header background image. The content selector contains the remainder of the
transition. This overlap is say 200px and can set the element's height
applying the background image as such.
Once content grows past this area I do not know how to apply a slice to this
area.
Maybe there is a simpler way to go about this, thank you for any insight.
*
{
color: #000;
margin: 0px;
padding: 0px;
}
body
{
background-color: #e8e8e8;
background-image:
url('../../PresentationLayer/Template/Images/background-gray-sliver.gif');
background-repeat: repeat-x;
font-family: Arial, Verdana, Tahoma;
font-size: .82em;
margin-top: 0px;
width: 100%;
}
div#container
{
margin: auto;
width: 800px;
}
div#header
{
background-image:
url('../../PresentationLayer/Template/Images/background-header.gif');
background-repeat: no-repeat;
height: 128px;
width: 800px;
}
div#content
{
background-image:
url('../../PresentationLayer/Template/Images/background-content.gif');
height: auto;
min-height: 200px;
width: 800px;
}
div#footer
{
background-image:
url('../../PresentationLayer/Template/Images/background-footer.gif');
background-repeat: no-repeat;
height: 128px;
width: 800px;
}
<!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 runat="server">
<title>Title goes here</title>
</head>
<body>
<form id="form1" runat="server">
<!-- container -->
<div id="container">
<!-- header -->
<div id="header">
<h1>header goes here</h1>
</div>
<!-- content -->
<div id="content">
<p>content goes here</p>
</div>
<!-- footer -->
<div id="footer">
<p>footer</p>
</div>
</div>
</form>
</body>
</html>
____________________________________________________________________________________
No need to miss a message. Get email on-the-go
with Yahoo! Mail for Mobile. Get started.
http://mobile.yahoo.com/mail
______________________________________________________________________
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
IE7 information -- http://css-discuss.incutio.com/?page=IE7
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
