...

View Full Version : Footer division



quartzy
02-21-2011, 11:44 PM
My footerhas a sitemap link in the middle, but at the end I want to put the copyright info, and the web site developer.
At the moment I have the sitemap as a list, and the copyright as a p float right.

But as soon as I add the web developer under the copyright, the footer display out of propertion and shows a white margin. How would I align them all up. I can only think of using divs, but that is silly for the footer. www.seniors260.org/venue/home.html


#footer {
width: 100%;
color: #fff;
clear: both;
height: 60px;
background-image: url('../images/box_foot.jpg');
background-repeat: repeat;
text-align: center;
width: 100%;
}
footer p {
text-align: center;
font-weight: bold;
}

p.right {padding: .30em; text-align: right;}
ul.foot_list {width: 100%; display: inline; margin: 0; padding: 0;}
ul.foot_list li{list-style: none;}



my image is 60px high.

teedoff
02-21-2011, 11:56 PM
You mean like side by side? You could put them in a list and float them that way.

quartzy
02-22-2011, 12:02 AM
Could I float a single list item then?

teedoff
02-22-2011, 12:16 AM
Maybe I'm confused. I thought you wanted them all lined up side by side, similar to a nav bar.

quartzy
02-22-2011, 12:32 AM
NO, I want the sitemap link in the center of the footer, and on the same line I want the copyright and then underneath the copyright my link.

Excavator
02-22-2011, 01:17 AM
Hello quartzy,
Your ul, and child li ... though one item is hardly a list, are 100% width.

Wouldn't that work better as a floated anchor on it's own?
The secret to fitting floats is their width, 100% is obviously too wide.

Since #container is 915px wide it doesn't make a lot of sense to set p.right at 48% width. Just give it a px width as well. Not a big deal, just a bother of my own.

Have a look at this attempt -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
background: #FC6;
}
#container {
height: 600px;
width: 912px;
margin: 30px auto 0;
background: #999;
}
#footer {
height: 60px;
width: 912px;
margin: 0 auto;
background: url(http://www.seniors260.org/images/box_foot.jpg);
}
a#map {
width: 200px;
margin: 0 auto;
display: block;
line-height: 60px;
}
a#map:link {
color: #CC9900;
text-decoration: underline;
}
a#map:visited {color: #CC9900;}
p.right {
width: 200px;
float: right;
padding: .30em;
margin: 0 0 1em 0;
text-align: right;
overflow: hidden;
}
</style>
</head>
<body>
<div id="container">
<!--end container--></div>
<div id="footer">
<p class="right">
&copy; Seniors 2011<br />
<span class="black">WebSite:</span><a href="www.christinesweb.co.uk"> Christine</a>
</p>
<a href="#" id="map">Site Map</a>
<!--end footer--></div>
</body>
</html>

quartzy
02-22-2011, 07:28 PM
Hello Excav

That works well much better than it was, less of a margin at the bottom of the footer, although the sitemap link is not in the centre of the footer. Tried expanding the width and doing percents but it does not want to shift. It is only for two pages, so it should be fine.

Your thanks has got stuck at 13

Excavator
02-22-2011, 07:44 PM
although the sitemap link is not in the centre of the footer.

Put a background color on that so you can see why...
Like this

a#map {
width: 200px;
margin: 0 auto;
display: block;
line-height: 60px;
background: #f00;
}

Maybe this will fix it for you?
a#map {
width: 200px;
margin: 0 auto;
display: block;
line-height: 60px;
text-align: center;
background: #f00;
}

That should center until you go back as far as IE7. Then the left/right margins work differently. To center it in all browsers you would need to float that anchor and do the math to get the margins right.

Excavator
02-22-2011, 07:44 PM
Your thanks has got stuck at 13

My lucky number!

quartzy
02-22-2011, 08:27 PM
Hi again
Tried that but it did not work, tried a float too and now it is stuck to the left and will not move. Added text align center to the footer so now it is back where it was before.


a#map {
width: 200px;
float:right;
margin: 0 auto;
height: 60px;
display: block;
text-align: center;}

#footer {
width: 100%;
color: #fff;
clear: both;
height: 60px;
text-align: center;
background-image: url('../images/box_foot.jpg'); background-repeat: repeat;}
footer p {font-weight: bold;}



thanks anyway



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum