Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to center my footer?

    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.
    Attached Thumbnails Attached Thumbnails How to center my footer?-screenshot.png  
    Attached Files Attached Files

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    343
    Thanks
    3
    Thanked 37 Times in 37 Posts
    Hey dude,

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

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.

  • #3
    Regular Coder
    Join Date
    Aug 2010
    Posts
    133
    Thanks
    2
    Thanked 0 Times in 0 Posts
    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:
    Code:
    		<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:
    Code:
    .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;
    }

  • #4
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Frankie View Post
    Hey dude,

    Try
    Code:
    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.

  • #5
    Senior Coder jerry62704's Avatar
    Join Date
    Oct 2007
    Location
    Springfield, IL
    Posts
    1,100
    Thanks
    13
    Thanked 87 Times in 87 Posts
    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.
    .
    .
    ...and gladly would he learn and gladly teach

    Visit www.LiberalsWin.com for humor and the unique Bush/Obama Approval Polls

  • #6
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It works if I add this:

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

    Some other coder told me.

  • #7
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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".


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •