How to set Footer in the center in correct way?

Forum Moderators: not2easy

Message Too Old, No Replies

How to set Footer in the center in correct way?

toplisek

10:24 pm on Aug 27, 2011 (gmt 0)

I have set code for footer like:
[PHP]
#footer {

background: repeat-x scroll center top #000000;
width: 100%;
height: 420px;
text-align: left;
padding: 18px;
color: #555;
line-height: 16px;
}
#footer div {
position:relative;
max-width: 1330px;
min-width: 1000px;
}
[/PHP]
and its HTML:
[PHP]

<div id="footer">

<div align="center">
</div>

</div>

[/PHP]

How to work this as footer content should be in the center but background colour (100 %) should be seen?
I do not like to use Table...
<table align="center">

lucy24

10:39 pm on Aug 27, 2011 (gmt 0)

How badly do you need MSIE? For everyone else, a simple {margin-left: auto} will do it.

max-width: 1330px;
min-width: 1000px;

:: sitting on hands ::

toplisek

11:16 pm on Aug 27, 2011 (gmt 0)

I like to set footer background 100% and all wrap into middle.

Do you have some correct code for this (sample)to test? Issue is that wrap content goes on the left hand side...

rocknbil

4:04 pm on Aug 29, 2011 (gmt 0)

align is a deprecated attribute for all elements and (X)html versions.

If you want the footer background 100%, the below should work. I don't see any image, so no need for all the alignment properties ,and I don't know why you have text-align left (?)

Also it kind of depends on the textual alignment nature of the footer. That is, center the links and left/right the paragraphs. That's the solution I have below.

For block elements, use margin auto. For inline elements (such as text) use text-align. So we have a block level div inside the full width footer, then inside that we center the list. This becomes important when you use image-based CSS sprites - those anchors will need to be set to display: block, and you get some weird results when you put a block element inside an inline element (list item.) However, in those cases, you usually know the width of the anchors and can do the math to properly set margins so the effect is "centered."


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01  
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html lang="en"> 
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
 <title>Untitled</title> 
<style type="text/css"> 
#footer { background: #000; width: 100%; height: 420px; padding:  
18px; color: #555; line-height: 16px; } 
#footer div { max-width: 800px; min-width: 500px; margin: 36px auto  
12px auto; } 
#footer ul { padding:0; margin:0; font-size: 12px; text- 
align:center; } 
#footer ul li { display: inline; list-style:none; margin:0; padding- 
left: 8px; } 
#footer a { color: #fff; text-decoration: none; outline: none; } 
#footer p { font-size: 10px; width: 49%; padding:0; margin-left:0;  
margin-right:0; } 
#credit{ float: left; text-align: left; } 
#whatever { float: right; text-align: right; } 
.clear-div { clear: both; } 
</style> 
</head> 
<body> 
<div id="footer"> 
 <div> 
 <ul> 
 <li><a href="/">Home</a></li> 
 <li><a href="/about">About</a></li> 
 <li><a href="/tos">Terms</a></li> 
 <li><a href="/contact">Contact</a></li> 
 </ul> 
 <div class="clear-div"></div> 
 <p id="credit">&copy; 2011 Wonderful World of Widgets</p> 
 <p id="whatever">Don't see the contact link above? <a href="/contact">try this one</a></p> 
 </div> 
</div>  
</body> 
</html>

[edited by: alt131 at 12:36 pm (utc) on Nov 27, 2011]
[edit reason] Side Scroll [/edit]

toplisek

7:59 am on Aug 30, 2011 (gmt 0)

thank you. Issue is with banners and all promos content.

I have the following promos CSS code:
#promos1 {
margin: 0 auto;
max-width: 1340px;
width: 998px;
}

#promoscontaint1 {
position: relative;
background: #34FF89 url('background.png') no-repeat left top;
height: 150px;
border-left: solid 12px #000000;
border-right: solid 11px #000000;
border-bottom: solid 5px #000000;
border-top: solid 5px #000000;
}

How to set HTML,CSS that these promos images inside elements will work as resolutions are different?
If I place images inside #promoscontaint1 it will not work resize.
For block elements I have used margin auto but see images like sample:
div class="promosimages1">
<img width="317" height="150" alt="" src="">
</div>

If I place min-width: 998px;it will be enlarged block element but images are inside this with fixed width.

Is there solution like:
<img width="100%" height="150" border="0" alt="" src="cdfdewf.gif">