...

View Full Version : How to center my footer?



Zamboni
01-26-2013, 10:51 AM
This certainly shouldn't be a problem but here I am. The attached file shows the basics for a website with a header and footer and a centered swf. Everything works apart from*footer2 (marked as blue). footer2 is supposed to be centered and aligned with the swf (the blue square). I thought it was as simple as "text-align:center;" but that doesn't work. I've tried everything I can think of and I'm getting nowhere.

#footer2 { position:absolute; text-align:center; bottom:0; width:1250px; height:26px; background:#0066CC; z-index: 5; }

Seen above is the problematic footer. Context is in the html.

Frankie
01-26-2013, 02:48 PM
Hey dude,

Try
margin: 0 auto; If that doesn't work, try the CSS centering tutorial that is linked from my signature page.

njfail
01-26-2013, 07:30 PM
Here is an example of my footer. Its a pretty simple bar of links at the bottom that is centered. The margins in the HTML spaces out the links a little so its not all bunched together.

HTML:

<div class="footerx">
<a href="/privacypolicy/">Privacy Policy</a>
<a style="margin-left:60px;margin-right:60px;" href="/termsofservice/">Terms of Service</a>
<a href="/contactus/">Contact Us</a>
<a style="margin-left:60px;margin-right:60px;" href="/ourphilosophy/">Our Philosophy</a>
</div>

CSS:

.footerx {
margin-top: 50px;
margin-bottom: 50px;
clear: both;
display: block;
text-align: center;
font-size: 12px;
}

/* you can style your links here. These styles will only affect the footer links, so they can look different than other links on your page */
.footerx a:link {
color: #505050;
}

.footerx a:visited {
color: #909090;
}

.footerx a:hover {
color: #000000;
}
.footerx a:active {
color: #909090;
}

nayansrr
01-28-2013, 09:42 AM
Hey dude,

Try
margin: 0 auto; If that doesn't work, try the CSS centering tutorial that is linked from my signature page.
I think its definitely work with every specification, margin:0 Auto - make a website compatible with all browser.

jerry62704
01-28-2013, 04:02 PM
Just off the top of my head, I changed it to id rather than class and it worked for me in a little test file. I don't see any errors in the css. Post the entire HTML.

Zamboni
01-28-2013, 05:35 PM
It works if I add this:

left:0; right:0; margin: 0 auto;

Some other coder told me.

Zamboni
01-28-2013, 05:38 PM
The html is in the zip attached with the first post. But anyway I found a way that works. Specified in my response to "Frankie".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum