Forum Moderators: not2easy
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!
Is the body the <div> you've set up, or is the body the body? Positioning in the bottom right of your container, regardless of height, is simple enough, so I assume that you intend the latter.
That gets a little trickier. You've got to select a method to define (force) a viewport height. Depending upon the resolution that you allow for, this may make the page taller than you want? The sample is hack that works. You'll surely be offered something more palatable and flexible.
.....and I have a defined area in the centre of the screen (basically a marked up body element).....
Not basically. You've done just that. It would not be my choice. The <body> should be used to enclose the presented containers. It is fine to assign some 'global' declarations, such as margin:, but should not be used as a <div>.
<!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>
<style type="text/css">
html {
background-color: #767676;
background-image: url(../images/background-header.gif);
background-position: center top;
background-repeat: no-repeat;
}html, body {
position: relative; margin: 0; padding: 0;
}#not-body {
width: 750px;
margin: auto;
border: 2px solid #333;
background-color: #95afb0;
margin-top: 95px;
background-image: url(aaa.jpg); background-position: bottom right;
background-repeat: no-repeat;
}div#footer {
text-align: center;
}#clear {
position: relative; margin-top: 700px;
}#bottom-right-image {
position: absolute; bottom: 0; right: 0; width: 200px; height: 200px; background-image: url(aaa.jpg);
}
</style>
</head>
<body>
<div id="not-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>
</div>
<div id="bottom-right-image">
#*$!
</div>
<!--##########
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).
.................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):
-->
</body>
</html>
Also what's wrong with styling the page body as I have? What would I gain by adding another div to serve the same purpose? Other than allowing design elements, which again I don't wish to do in favour of properly separated content and presentation.
