WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Footer DIV's not centering!!! (3 posts)

  1. Jerry
    Member
    Posted 6 years ago #

    Ok first off, I'm making my own theme, and I am Widgetizing the footer of this theme. For some reason, my footer Div's are not centering themselves in the layout. They're all aligned to the left not in the center. I tried to set "float" to none but then only the "title" of the widget was centered and they were not 'beside' each other. Please view http://test.phyrax.com to see what I'm talking about.

    The current code is as follows:
    Footer.php

    <div id="footer">
      <div id="footer_container">
        <div class="left">
            <ul>
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Left') ) : ?>
                <li>Testing the left thingy now!!!</li>
                <?PHP endif; ?>
            </ul>
        </div>
        <div class="center">
        <ul>
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Center') ) : ?>
                <li>Testing the Center thingy now!!!</li>
                <?PHP endif; ?>
        </ul>
        </div>
        <div class="right">
        <ul>
                <?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Footer Right') ) : ?>
                <li>Testing the Right thingy now!!!</li>
                <?PHP endif; ?>
        </ul>
        </div>
      </div><!-- Ending footer_container -->
      <p class="credit">
        <!--<?php echo get_num_queries(); ?> queries. <?php timer_stop(1); ?> seconds. -->
        <?php echo sprintf(__("Powered by <a href='http://wordpress.org/' title='%s'><strong>WordPress</strong></a>"), __("Powered by WordPress")); ?> - Handcoded by <a href="http://www.phyrax.com" title="Phyrax.com - Affordable Web Services">Jerry Wood</a>
    
    <?php wp_footer(); ?>
    </div> <!-- ENDING Footer -->
    </body>
    </html>

    Style.css

    #footer{
    	clear: both;
    	background: #333 url(images/footerBg.gif) repeat-x;
    	color: #fff;
    	margin: 0;
    	font-size: 80%;
    	position:static;
    	z-index:1;
    	bottom:0;
    	left:0;
    }
    #footer p{
    	margin: 0;
    	font-weight: bold;
    	font-family: Georgia, serif;
    	text-align:center;
    }
    .credit{
    	float:none;
    	clear:both;
    	margin-top:10px;
    	background-color:#000000;
    	font-size:x-small;
    	max-height:20px;
    }
    #footer p.up{
    	float: right;
    }
    #footer p.up a{
    	padding-right: 20px;
    	background: url(images/top.gif) top right no-repeat;
    }
    .credit a:link, .credit a:visited{
    	color: #ddd;
    	text-decoration: underline;
    }
    .credit a:hover, .credit a:active{
    	color: #fff;
    	text-decoration: none;
    }
    
    /* Widgetizing the footer now */
    div #footer_container {
    	margin: 20px;
    	padding-top: 10px;
    	text-align:center;
    }
    
    #footer_container div{
    	float:left;
    	text-align:justify;
    	text-align:center;
    	margin:10px;
    }
    div.left{
    	display:inline;
    }
    div.center{
    	display:inline;
    }
    div.right{
    	display:inline;
    }
    #footer_container div ul {
    	color: #444;
    	font-weight: bold;
    	list-style-type: none;
    	padding: 0;
    	height: 1%;
    }
    
    #footer_container div ul li {
    	font: italic bold 100% Georgia, Times, serif;
    	letter-spacing: 0;
    	color:#FFCC00;
    	text-align:left;
    	margin: 0 0 0 0;
    	padding: 0 0 5px 0;
    	background: transparent;
    }
    
    #footer_container div ul ul {
    	font-variant: normal;
    	font-weight: normal;
    	line-height: 100%;
    	list-style-type: none;
    	margin: 0;
    	padding: 0;
    	text-align: left;
    	border: none;
    }
    
    #footer_container div ul ul li {
    	border: 0;
    	font: normal normal 70%/1.7em Arial, Verdana, sans-serif;
    	letter-spacing: 0;
    	margin-top: 0;
    	padding: 0;
    	padding-left: 10px;
    	background: url(images/bullet.gif) left 5px no-repeat;
    }
    #footer_container div ul ul ul{
    	border: none;
    }
    #footer_container div ul ul ul li{
    	font-size: 100%;
    }
    
    #footer_container div ul ul li a {
    	color: #FFcc00;
    	text-decoration: none;
    }
    
    #footer_container div ul ul li a:hover, #footer_container div ul ul li a:active {
    	border-bottom: 1px solid #FFcc00;
    }
    
    #footer_container div ul ul ul.children {
    	font-size: 100%;
    	padding-left: 4px;
    }
    #footer_container{
     	clear:both;
     	text-align:center;
    }
  2. cwoodside
    Member
    Posted 6 years ago #

    HI Phyrax,
    I only took a quick glance but perhaps changing this:

    #footer_container {
    	width: 760px;
    	margin: 30px;
    	border: 1px outset red;
    }'
    
    to this:
    #footer_container {
    width: 760px;
    margin:0 auto;
    border: 1px outset red;
    }`

    would help.

  3. Jerry
    Member
    Posted 6 years ago #

    Wow, I was reading about that, just yesterday, but I never thought of trying it. Thanks for the input m8... worked great!

Topic Closed

This topic has been closed to new replies.

About this Topic