23 Replies Latest reply: Jul 4, 2012 4:50 PM by Comp. 792 RSS

    Please Help. Can’t Center Banner and Footer

    Comp. 792 Community Member

      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!

        • 1. Re: Please Help. Can’t Center Banner and Footer
          Ben Pleysier MVP

          Remove the highlighted

          <div id="wrapper">

          Gramps

          • 2. Re: Please Help. Can’t Center Banner and Footer
            Comp. 792 Community Member

            Hi, thanks for the reply. unfortunately if I do that then the “main” content flows to the outer edge of the white box named "<div id="wrapper_outer”>”

            <div id=“wrapper”> is what holds the main body content together so it stays centered in the white box so if I do as you say and remove it the main content is no longer formatted and flows to the outer edges of the white box named "<div id="wrapper_outer”>”

             

            <div id="wrapper_outer”> (this is set to 1080px. and is the outer white box)

             

            <div id="wrapper”> (this is set to 960px. and holds the main content

             

            I hope this makes sense,

            • 3. Re: Please Help. Can’t Center Banner and Footer
              Ben Pleysier MVP

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

               

              Gramps

              • 4. Re: Please Help. Can’t Center Banner and Footer
                Comp. 792 Community Member

                Altruistic Gramps wrote:

                 

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

                 

                Gramps

                Thanks. Ok, but I still can’t seem to pinpoint how to fix this? I think I have multiple things (.classes) contributing to the problem. I have zeroed out the margins for the wrapper’s and given them a width of 1080px. and 960px. respectively, which centered the wrappers, so I thought if I did the same for the “Banner" and “footer” that would center them too but I seem to be missing something here.

                • 5. Re: Please Help. Can’t Center Banner and Footer
                  osgood_ MVP

                  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

                  • 6. Re: Please Help. Can’t Center Banner and Footer
                    Comp. 792 Community Member

                    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”>

                    • 7. Re: Please Help. Can’t Center Banner and Footer
                      osgood_ MVP

                      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.

                      • 8. Re: Please Help. Can’t Center Banner and Footer
                        Nancy O. MVP

                        Footer looks too wide:

                         

                        #footer {

                            clear: both;

                            overflow: hidden;

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

                            margin: auto;

                            }

                         

                         

                        Nancy O.

                        • 9. Re: Please Help. Can’t Center Banner and Footer
                          Comp. 792 Community Member

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

                           

                          Thanks Nancy. I adjusted the width of the footer like you suggested but I don’t think that solves the problem as there is still a problem with the left side of the footer and the banner.

                           

                          osgood,

                          sorry I just saw your reply and am going to put up a test page right now. Thanks.

                          • 10. Re: Please Help. Can’t Center Banner and Footer
                            osgood_ MVP

                            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">

                            • 11. Re: Please Help. Can’t Center Banner and Footer
                              Comp. 792 Community Member

                              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

                               

                              Osgood,

                               

                              Hi, so I made the changes your suggested (I hope I did it right).  The result is here

                               

                               

                              1. I moved the footer <div> code to below the closing 'wrapper_outer' </div>

                              2. I then renamed #footer in light.css to: #footer2 (I am not sure I got this step right)

                               

                              /* FOOTER ---------------------------------------------------------*/

                               

                              #footer2 {

                                        background-color: #222229;

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

                                        border-top-width: 0px;

                                        position: absolute;

                                        height: 140px;

                                        margin: auto;

                                        }

                              • 12. Re: Please Help. Can’t Center Banner and Footer
                                osgood_ MVP

                                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 -->

                                • 13. Re: Please Help. Can’t Center Banner and Footer
                                  Comp. 792 Community Member

                                  Osgood,

                                   

                                  Hi, some good progress. Thanks finally getting closer. The result is here

                                   

                                  Only thing is the tweet has moved into the footer and there is a space between the footer and the body. The tweet should look like this page here

                                   

                                  Also, is the banner a similar fix.

                                  • 14. Re: Please Help. Can’t Center Banner and Footer
                                    osgood_ MVP

                                    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?

                                    • 15. Re: Please Help. Can’t Center Banner and Footer
                                      Comp. 792 Community Member

                                      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

                                      • 16. Re: Please Help. Can’t Center Banner and Footer
                                        osgood_ MVP

                                        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?

                                        • 17. Re: Please Help. Can’t Center Banner and Footer
                                          osgood_ MVP

                                          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;

                                          }

                                          • 18. Re: Please Help. Can’t Center Banner and Footer
                                            Comp. 792 Community Member

                                            osgood,

                                             

                                            Hi, thank you osgood, your help is much appreciated. I hope you can bear with me a little longer to fix this. After my last post I went into my other pages and added the CSS to the page and the pages went wonky due to the using of the <div id=“footer2”>. Since al pages originally used <div id="footer”>.

                                             

                                            Because the excellent code you gave me above was exactly what I needed as it “centered” the footer nicely,

                                             

                                            #footer2 {

                                            background-color: #222229;

                                            margin: auto;

                                            width: 1080px;

                                            }

                                             

                                            so what I did was totally got rid of <div id=“footer2”> because it was messing with my other pages. Now I think it simplifies everything and now all pages at least are consistent and only use 1 footer div.

                                             

                                            I now am only dealing with <div id=“footer”>. I hope this was a good decision.

                                             

                                            So now here is the home

                                            And here is the gallery page

                                             

                                            Both “home” and “gallery” pages are using the same CSS. Now I need is to figure out how to: remove the space above and below the footer so the footer works for all pages and fix the Banners width. I won’t worry about the tweet until these more important things are fixed.

                                            • 19. Re: Please Help. Can’t Center Banner and Footer
                                              Comp. 792 Community Member

                                              osgood,

                                               

                                              Hi, got rid of the tweet so I can focus on fixing the banner.

                                              I added some “padding” to the <wrapper_outer> so the pages have some white above their titles.

                                               

                                              So the banner (see here) now has some white space (padding of 40px.) above it because I needed to add the padding for all of the gallery pages so there is some white above the page titles.

                                               

                                               

                                              So I need two fixes.

                                               

                                              1) To get the banner to “center"

                                              2) To move the banner up so no white space above it. (I can’t remove the padding or the titles on the other pages will be to close to the top)

                                               

                                              I think my options are:

                                               

                                              • remove the padding and add a space <br> to move the page titles down, then the banner will be at the top touching the header.

                                              • leave the padding as is so the page titles have some white above them, then find a way to move the banner up to touch the header. (I believe this is the preferred method)


                                              • 20. Re: Please Help. Can’t Center Banner and Footer
                                                osgood_ MVP

                                                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>

                                                • 21. Re: Please Help. Can’t Center Banner and Footer
                                                  Comp. 792 Community Member

                                                  That worked. Thank you sooo much!!

                                                   

                                                  As I mentioned above, I added some “padding” to the <wrapper_outer> so the pages have some white above their titles.

                                                  Now the banner (see here) now has some white space (padding of 40px.) above it because I needed to add the padding for all of the gallery pages so there is some white above the page titles.

                                                   

                                                  So if I remove the padding the banner/slider moves up to the header and looks good “but” then all the other pages lose the white space above their title see here gallery pages

                                                   

                                                  I think my options are:

                                                   

                                                  • remove the padding and add a space <br> to move the page titles down, then the banner will be at the top touching the header.

                                                  • leave the padding as is so the page titles have some white above them, then find a way to move the banner up to touch the header.

                                                   

                                                   

                                                  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?

                                                   

                                                  Q2) From an aesthetic point of view do you think the banner /Slider is too tall?

                                                  • 22. Re: Please Help. Can’t Center Banner and Footer
                                                    osgood_ MVP

                                                    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>

                                                    • 23. Re: Please Help. Can’t Center Banner and Footer
                                                      Comp. 792 Community Member

                                                      Are you not reading ALL of my previous responses?

                                                      Osgood,

                                                       

                                                      Sorry, was reading too fast and missed that. Thanks for your help. Couldn’t have done it without you.