WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Footer won't align to center (19 posts)

  1. practical
    Member
    Posted 1 year ago #

    Hello all,

    i've tried many times with the css to align my footer center but can't seem to,

    here's the footer.php

    <div id="footer">© all content copyright
    </div>
    <?php wp_footer(); ?> 
    
    </body>
    
    </html>

    and the css for it

    #footer {
            position: relative;
    margin-top: -150px;
    height: 150px;
    clear:both;
    }

    website is here

    Any help would be much appreciated, I'm at a brickwall!
    thanks

  2. Andrew
    Forum Moderator
    Posted 1 year ago #

    What CSS have you tried to centre it?

  3. practical
    Member
    Posted 1 year ago #

    ive tried using

    text-align:center;
    margin: auto;
    width:800px;

    but to no avail...

  4. Andrew
    Forum Moderator
    Posted 1 year ago #

  5. practical
    Member
    Posted 1 year ago #

    Hi,

    thanks :)

    I've tried some of these and still doesn't want to center, i'm not sure if a /div isn't closed or something else isn't being read somewhere as the footer isn't picking up the css commands.

  6. Andrew
    Forum Moderator
    Posted 1 year ago #

    Where are you adding the CSS?

  7. practical
    Member
    Posted 1 year ago #

    to the #footer in the stylesheet

  8. Andrew
    Forum Moderator
    Posted 1 year ago #

    Which stylesheet?

  9. practical
    Member
    Posted 1 year ago #

    the one for the website

    style.css

  10. Doodlebee
    Member
    Posted 1 year ago #

    Try this:

    Footer.php
    <div id="footer">
    <p> copy; all content copyright</p>
    </div>

    Style.css
    #footer {
    width:500px;
    margin:0 auto;
    }

    #footer p {
    text-align:center;
    }

    (Sorry for no back ticks to format the code ... I'm on my iPad and it doesn't have back ticks available for me to use.)

  11. practical
    Member
    Posted 1 year ago #

    hi
    thanks for your help too, but still doesn't work.
    not sure what it could..

  12. Doodlebee
    Member
    Posted 1 year ago #

    Wow. Just looked at your source code. Think you need to run your site through a validator. It appears you've got at least be extra closing div tag somewhere you shouldn't. CSS issues are a LOT easier to diagnose when you fix errors in the site first.

  13. Andrew
    Forum Moderator
    Posted 1 year ago #

    Try this, try adding a 10 pixel, red border to your footer in the style.css file.

  14. practical
    Member
    Posted 1 year ago #

    Hi @doodlebee

    i have one error which is a </div> on line 95, but i cant seem to find it within wordpress. Do you know where it may be?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head profile="http://gmpg.org/xfn/11">
    <title>Primary Colours Records</title>
    <meta name="description" content="Primary Colours Records is an avant garde record label based in London. all content copyright primary colours records © 2012" />
    <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-36955597-1']);
    _gaq.push(['_trackPageview']);
    (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
    </script>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="generator" content="WordPress 3.4.2" /> <!-- leave this for stats please -->
    <link rel="stylesheet" href="http://www.primarycoloursrecords.co.uk/wp-content/themes/pc_theme/style.css" type="text/css" media="screen" />
    <link rel="pingback" href="http://www.primarycoloursrecords.co.uk/xmlrpc.php" />
    <link rel='archives' title='December 2012' href='http://www.primarycoloursrecords.co.uk/2012/12/' />
    <link rel="alternate" type="application/rss+xml" title="Primary Colours Records &raquo; Home Comments Feed" href="http://www.primarycoloursrecords.co.uk/home/feed/" />
    <link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.primarycoloursrecords.co.uk/xmlrpc.php?rsd" />
    <link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.primarycoloursrecords.co.uk/wp-includes/wlwmanifest.xml" />
    <link rel='next' title='News' href='http://www.primarycoloursrecords.co.uk/news/' />
    <meta name="generator" content="WordPress 3.4.2" />
    <!-- All in One SEO Pack 1.6.15.2 by Michael Torbert of Semper Fi Web Design[211,335] -->
    <meta name="description" content="Primary Colours is an avant garde record label based in London. It was founded by Kit Grill in 2012. all content copyright primary colours records © 2012" />
    <meta name="keywords" content="primary colours, primary colours records, primary colours record label, primary colours avant garde music, electronic music labels london, primary colours label, primary colours uk," />
    <link rel="canonical" href="http://www.primarycoloursrecords.co.uk/" />
    <!-- /all in one seo pack -->
    </head>
    <body>
    <div id="header">
    <br/>
    <a href="http://www.primarycoloursrecords.co.uk"><img src="http://www.primarycoloursrecords.co.uk/wp-content/uploads/2013/01/logo_web.jpg" alt="Primary Colours" width="180" height="114"/></a>
    <br/>
    <br/>
    <a href="/info">Information</a><br/><br/>
    <!--<ul id="navlist"><li><a href="http://www.primarycoloursrecords.co.uk">All</a></li><li>No categories</li><a href="http://www.primarycoloursrecords.co.uk/category/information">Information</a></ul>-->
    </div>
    <div id="container">
    <div class="post1">
    <!--<h2>Home</h2>-->
    <!--<h3>November 2012</h3>-->
    <p><img src="http://www.primarycoloursrecords.co.uk/wp-content/uploads/2012/11/kitgrill_expressions2.jpg" alt="kit grill, expressions, primary colours records" title="kit grill, expressions, primary colours records" width="450" height="450" class="size-full wp-image-262" /></p>
    <p>Hi and welcome to Primary Colours Records. Sign up to our newsletter below to be the first to hear about the debut Ep coming out in February 2013. </p>
    <p><script type="text/javascript" src="http://signup.ymlp.com/signup.js?id=gjqsjmugmgj"></script><br/><br/></p>
    </div>
    </div>
    <div id="footer">
    <p> copy; all content copyright</p>
    </div>
    </body>
    </html></div>
  15. practical
    Member
    Posted 1 year ago #

    found it, thanks for all your help :)

  16. practical
    Member
    Posted 1 year ago #

    i thought it did, but it says error is w3 validator.

    Without the closing div in the header the footer responds to the header css, but when i put a closing div in the header it doesnt respond to the footer css, strange...

  17. Doodlebee
    Member
    Posted 1 year ago #

    There must be a n extra closing div somewhere in the middle. Like within a post, or in the sidebar. The validation will only see that there's an extra one, and show you that it's found one (which is usually the last one it finds, not the one you need to know about). Finding stuff like this takes time. I usually copy the source code and paste it in a text editor and just start picking it apart until I find the culprit.

  18. practical
    Member
    Posted 1 year ago #

    ive managed to find the culprit. The footer text is now the same as the body text but it still wont align center.

  19. Doodlebee
    Member
    Posted 1 year ago #

    In your CSS, you have your footer set to position:absolute. That's a no-no. It takes it out of the flow of the rest of the site and absolutely positions it where you tell it to (or the closest relatively positioned container it's inside of, whatever comes first.)

    You also have the footer set as text-align:left.

    Remove the absolute positioning and set the text to align center.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.