positioning an image on the outside edge of a div element
Posted: 04 September 2009 04:15 PM   [ Ignore ]
Newbie
Rank
Total Posts:  1
Joined  2009-09-04

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-imageurl(../images/background-header.gif);
background-positioncenter top;
background-repeatno-repeat;
}
body
{
width
:750px;
marginauto;
border:2px solid #333333;
background-color:#95afb0;
margin-top:95px;
background-imageurl(../images/background-footer.gif); background-positionbottom right;
background-repeatno-repeat;
}

div
#footer
{
text
-aligncenter;

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!

Profile