Skip navigation
Currently Being Moderated

Please Help. Can’t Center Banner and Footer

Jun 27, 2012 8:18 PM

http://www.buzzfx.ca/test_DW.html

 

Hi, I have tried to center the Banner and the Footer at the link above, but everything I try just doesn’t work. Can someone please tell em how to do this? Thank you!

 
Replies
  • Currently Being Moderated
    Jun 27, 2012 9:12 PM   in reply to Comp. 792

    Remove the highlighted

    <div id="wrapper">

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 27, 2012 10:34 PM   in reply to Comp. 792

    Yes that does make sense, but I just wanted to localise the problem so that you could work on that.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2012 1:10 AM   in reply to Comp. 792

    The footer one:

     

    You have a duplicate #footer css selector which over-rules the #footer css set in the base-box.css file. This duplicate has a positioning of absolute in the file below:

     

    http://www.buzzfx.ca/styles/light.css

     

    What I would do is move your main 'footer' <div> code to below the closing 'wrapper_outer' </div>

     



    </div><!-- #wrapper_outer -->


     

    Then either get rid of the #footer css in the light.css file or if it's needed somewhere else then amend the main #footer to #footer2

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2012 7:00 AM   in reply to Comp. 792

    Comp. 792 wrote:

     

    Thanks osgood.

     

    I did as you said but the footer disappears when I do that. Also when I remove #footer from the light.css or rename it then the footer disappears. Is there no way to just make the footer and banner align with the center white box named: <div id="wrapper_outer”>

    There is no reason the footer should disappear.

     

    Can you put up a test page with the footer in the position I described and I'll take another look.

     

    It's difficult to trouble shoot because you have so many linked css stylesheets.

     

    I would comment them all out apart from your base-box.css file and then start uncommenting them to see where the trouble might lie.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 28, 2012 2:01 PM   in reply to Comp. 792

    Footer looks too wide:

     

    #footer {

        clear: both;

        overflow: hidden;

        width: 1022px; /**adjust as required**/

        margin: auto;

        }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 10:03 AM   in reply to Comp. 792

    Move the footer <div> code to directly before the closing </div> tag of the 'wrapper_outer' container:

     

    </div><!-- #wrapper_outer -->

     

     

    Change it's name from 'footer' to 'footer2' and restyle it. As I said in my last reply you have another instance of 'footer' in one of your other attached stylesheets which is causing conflict. Unless you are prepared to go through the stylsheets and sort it out then restyling the 'footer' is the simplest option.

     

    Whilst the 'footer' is in the 'wrapper' <div> it has no chance of spanning the width of the 'wrapper_outer' <div>

     

    You need to do the same with  your 'slider' container code:

     

    Move all of its code to directly AFTER the 'wrapper_outer" opening <div> tag:

     

    <div id="wrapper_outer">

    <div id="slider">

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 2, 2012 10:12 AM   in reply to Comp. 792

    Change this:

     

    #footer2 {

              background-color: #222229;

              padding: 0px;  /**adjust as needed**/

              border-top-width: 0px;

              position: absolute;

              height: 140px;

              margin: auto;

              }

     

    to:

     

    #footer2 {

    background-color: #222229;

    margin: auto;

    width: 1080px;

    }

     

     

    AND! id="footer" to id="footer2"

     

     

    <div id="footer">


    <p class="copyright">All Artwork/Images &copy; Copyright BUZZFX 2012.</p>


    <ul>

    <li><a href="index.html">Home</a></li>

    <li><a href="2d_character.html">2D Character</a></li>

                <li><a href="3d_character.html">3D Character</a></li>

                <li><a href="concept_art.html">Concept Art</a></li>

                <li><a href="design.html">Design</a></li>

                <li><a href="illustration.html">Illustration</a></li>

                <li><a href="movies.html">Movies</a></li>

                <li><a href="sketchbook.html">Sketchbook</a></li>

    <li><a href="http://lornemclean.blogspot.com/">Blog</a></li>

    <li><a href="contact.html">Contact</a></li>

    </ul>


    </div><!-- #footer -->

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 12:01 AM   in reply to Comp. 792

    You've still got the footer wrong. Get rid of one of the opening <div> tags either 'footer2' or 'footer'. Its impossible for me to go through all of your attached stylesheets to see exactly where the problems lies.

     

     

     

     

    <div id="footer2">

       

        <div id="footer">

       

            <p class="copyright">All Artwork/Images &copy; Copyright BUZZFX 2012.</p>

           

            <ul>

                <li><a href="index.html">Home</a></li>

                <li><a href="2d_character.html">2D Character</a></li>

                <li><a href="3d_character.html">3D Character</a></li>

                <li><a href="concept_art.html">Concept Art</a></li>

                <li><a href="design.html">Design</a></li>

                <li><a href="illustration.html">Illustration</a></li>

                <li><a href="movies.html">Movies</a></li>

                <li><a href="sketchbook.html">Sketchbook</a></li>

                <li><a href="http://lornemclean.blogspot.com/">Blog</a></li>

                <li><a href="contact.html">Contact</a></li>

            </ul>

           

        </div><!-- #footer -->

     

     

    As for the tweet I don't know where the code that is associated with that is?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 10:36 AM   in reply to Comp. 792

    Comp. 792 wrote:

     

    Osgood.

     

    Ok, thanks. That makes sense. I missed that extra <div>.

     

    When I removed <div id="footer2”> the footer wasn’t visible so I tried removing <div id="footer”> and the results are here

     

    So the footer is now aligned where you want it to be, yes? What next?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 3, 2012 10:43 AM   in reply to osgood_

    I guess youre asking how to style the content in the 'footer2' <div> now, right?

     

    Copy the original 'footer' css and insert '2' after each selector (see below) Then paste it in the july_2_light.css file under the 'footer2' css selector.

     

     

     

    #footer2 p {

    float: left;

    }

     

    #footer2 ul {

    float: right;

    }

     

    #footer2 ul li {

    float: left;

    list-style: none;

    background-repeat: no-repeat;

    background-position: 0 50%;

    margin-top: 0;

    margin-right: 0;

    margin-bottom: 0;

    margin-left: 5px;

    padding-top: 0;

    padding-right: 0;

    padding-bottom: 0;

    padding-left: 5px;

    font-size: 11px;

    }

     

    #footer2 ul li:first-child {

    background: none;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 3:07 AM   in reply to Comp. 792

    To center your 'banner/slider' move it's html code to directly AFTER the <div id="wrapper_outer"> opening tag so your code looks as below:

     

     

    <div id="wrapper_outer">

    <div id="slider">

                <a href="2d_character.html"><span>Character Design</span><img src="images/temp/slider_1.jpg" alt="" title="Character Design" /></a>

                <a href="design.html"><span>Prototype Modeling and Simulations</span><img src="images/temp/slider_2.jpg" alt="" title="Prototype Modeling and Simulations" /></a>

                <a href="design.html"><span>Product and Package Design</span><img src="images/temp/slider_3.jpg" alt="" title="Product and Package Design" /></a>

                <a href="petroleum.html"><span>Petroleum and Technological Art</span><img src="images/temp/slider_4.jpg" alt="" title="Petroleum and Technological Art" /></a>

    </div>

     

     

     

    Then to get rid of the white space between the 'header' and the 'slider/banner' add some inline css styling to the 'wrapper_outer' <div> tag.

     

    <div id="wrapper_outer" style="padding-top: 0;">

     

    Inline css styling will only affect this page so won't alter your other pages.

     

    As an alternative to inline css styling you could also add page specific css in the head section of the page which MUST come after the link to your stylesheets:

     

    <style type="text/css">

    #wrapper_outer {

    padding-top: 0;

    }

    </style>

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 4, 2012 8:38 AM   in reply to Comp. 792

    Comp. 792 wrote:

     

     

    Q1) What would you do? Is there a way I can remove the padding so the banner moves up and still have the white space above the page titles?

     


     

    Are you not reading ALL of my previous responses?

     

     

    To get rid of the white space between the 'header' and the 'slider/banner' add some inline css styling to the 'wrapper_outer' <div> tag.

     

    <div id="wrapper_outer" style="padding-top: 0;">

     

    Inline css styling will only affect this page so won't alter your other pages.

     

    As an alternative to inline css styling you could also add page specific css in the head section of the page which MUST come after the link to your stylesheets:

     

    <style type="text/css">

    #wrapper_outer {

    padding-top: 0;

    }

    </style>

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points