Hi Guys
I have tried about a million different ways of doing this including the results of searches for info which I go from this site and others, but nothing has helped me solve the problem I am experiencing so far.
I am setting up the basic layout for a page, and I have a defined area in the centre of the screen (basically a marked up body element). I want to dispaly an image at the bottom of the body of the page, but since the body area will be various heights depending on the amount of content, the image position needs to be defined in relative terms. I have two issues here: 1. Specifying the position ine the image wraps around the botom right corner of the body, so will show below and to the right of the element 2. Making the image show up when pushed beyone the bounds of its containin element, overflow: visible isn’t working (using firefox to test at the moment).
My code is as follows:
CSS so far (I have taken out all the non-working mark up and just positioned my image in the bottom right corner of the body element for now):
html
{
background-color: #767676;
background-image: url(../images/background-header.gif);
background-position: center top;
background-repeat: no-repeat;
}
body
{
width:750px;
margin: auto;
border:2px solid #333333;
background-color:#95afb0;
margin-top:95px;
background-image: url(../images/background-footer.gif); background-position: bottom right;
background-repeat: no-repeat;
}
div#footer
{
text-align: center;
}
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" />
<link rel="stylesheet" href="styles/screen.css" />
<title>Page Title</title>
</head>
<body>
<div id="header">
<h1>header content</h1>
</div>
<div id="navigation">
<ul>
<li><a href="index.php">Item One</a></li>
<li><a href="index.php">Item Two</a></li>
<li><a href="index.php">Item Three</a></li>
<li><a href="index.php">Item Four</a></li>
<li><a href="index.php">Item Five</a></li>
</ul>
</div>
<h1>A Title</h1>
<h2>A Sub Title</h2>
<p>Some content</p>
<div id="footer">
<p>Footer Content</p>
</div>
</body>
</html>
I’d be grateful for any assistance with this, I can also provide a link to this example if that is acceptable?
Thanks in advance!