9 Replies Latest reply: May 24, 2012 12:49 PM by Comp. 792 RSS

    Need Help Centering Page Content

    Comp. 792 Community Member

      Hi, I have added a white box behind my main page content but the content is not centered within the box. It seems to be on the left. There are a number of different style sheets and I need to find out which style is affecting how the content is positioned.

       

       

      1. In this link below I’m not sure what is making the content go to the “left”. I need all of the thumbnails to be centered in the white area. That is what I need to find out first. What is the best way to find what is causing the thumbnails to go to the left? Is there an easy way to narrow down what is causing the thumbnails to go to the left?

       

      If I select “ul.work li” I notice it is set to (float: left). If I change it to (float: right) the thumbnails all move to the right. but if I set it to (float: none) the thumbnails all line up vertically. Not what I want.

      http://www.buzzfx.ca/2d_character.html

       

       

      In the homepage I also need to have all of the content centered.

       

      http://www.buzzfx.ca

       

      2. Also, how would I move the white box up to align with (touch the bottom) of the grey header?

        • 1. Re: Need Help Centering Page Content
          John Waller CommunityMVP

          Comp. 792 wrote:

           

          Hi, I have added a white box behind my main page content but the content is not centered within the box. It seems to be on the left. There are a number of different style sheets and I need to find out which style is affecting how the content is positioned.

           

           

          1. In this link below I’m not sure what is making the content go to the “left”. I need all of the thumbnails to be centered in the white area. That is what I need to find out first. What is the best way to find what is causing the thumbnails to go to the left? Is there an easy way to narrow down what is causing the thumbnails to go to the left?

           

          Are you familiar with Firebug http://getfirebug.com/ (for the Firefox browser) or the Developer Tools feature in IE (F12) and Chrome?

           

          These tools show you, via point and click in the browser window, which CSS rules are affecting which page element and you can temporarily edit the CSS rules on the fly to experiment and see the effect of any changes.

           

          The boxes in the white area are off center due to the interplay of margins on ul.work and ul.work li in base_boxed.css.

           

          One option is to remove the -15px from

           

          ul.work {

              margin: 0 -15px;

          }

           

           

          Comp. 792 wrote:

           

          2. Also, how would I move the white box up to align with (touch the bottom) of the grey header?

           

          In base_boxed.css, zero out margin-bottom (currently set to 30px):

           

          #header {

              display: block;

              margin-bottom: 0px;

          }

          • 2. Re: Need Help Centering Page Content
            Comp. 792 Community Member

            Are you familiar with Firebug http://getfirebug.com/ (for the Firefox browser) or the Developer Tools feature in IE (F12) and Chrome?

            These tools show you, via point and click in the browser window, which CSS rules are affecting which page element and you can temporarily edit the CSS rules on the fly to experiment and see the effect of any changes.

            Thanks John, I downloaded firebug but it is no easy task to use. Even after watching the tutorial I don’t understand. How do you use Firebug to see which rules are affecting which page element and how can I experiment and see the effect of my changes.

             

            Also is there a WYSIWYG editor for CSS that allows you to see and edit the CSS layout much like you used to be able to do when using tables?

             

            The boxes in the white area are off center due to the interplay of margins on ul.work and ul.work li in base_boxed.css.

            One option is to remove the -15px from

             

            ul.work {

               margin: 0 -15px;

            }

            Thanks. I’ll try this.

             

            In base_boxed.css, zero out margin-bottom (currently set to 30px):

             

            #header {

             

            display: block;

            margin-bottom: 0px;

            }

            Thanks John. I’ll try that.

            • 3. Re: Need Help Centering Page Content
              John Waller CommunityMVP

              Comp. 792 wrote:

               

              I downloaded firebug but it is no easy task to use. Even after watching the tutorial I don’t understand. How do you use Firebug to see which rules are affecting which page element and how can I experiment and see the effect of my changes.

              It's simplicity itself once you get the hang of it.

               

              (Click to enlarge image)

               

              firebug.png

               

              Does this page help at all?

              http://getfirebug.com/html

              • 4. Re: Need Help Centering Page Content
                Comp. 792 Community Member

                Thanks John, I managed to watch a good tutorial that set me straight.

                 

                So back to the initial question. I am trying to center the content in the body but it seems to be aligned "left". Using Firebug, I think I have found the part that needs changing.

                 

                1. At this link: http://www.buzzfx.ca/2d_character.html

                 

                2. I hovered over the thumbnails until I found: <ul class="work fullwork clearfix">

                 

                3. I then looked in the style and I believe it is this code below in "bold italics" that I need to edit to get the "content" to be centered but I am not sure how specifically to fix it/

                 

                Q. Why does "margin-left: 40px;" have a strike through it?

                Q. Is "margin-left: 40px;" the reason the content is aligned "left"?

                Q. Could I not just "center" the contents instead of have it positioned from the "left"? Please explain!

                 

                I would be very grateful if someone could look at my page in Firebug to tell what the best way is to center the body content.

                 

                .clearfix:after {

                   clear: both;

                   content: ".";

                    display: block;

                    height: 0;

                    line-height: 0;

                    visibility: hidden;

                }

                ul.work {

                margin: 0 -15px;

                }

                ul, ol {

                margin-left: 40px;

                }

                 

                h1, h2, h3, h4, form, table, ul, ol, p, dl, blockquote, hr {

                margin-bottom: 30px;

                text-align: left;

                }

                ol, ul {

                list-style: none outside none;

                }

                 

                • 5. Re: Need Help Centering Page Content
                  Comp. 792 Community Member

                  Can someone please help me with this. Thanks.

                  • 6. Re: Need Help Centering Page Content
                    John Waller CommunityMVP

                    I thought the question was answered in my first reply in this thread.

                    • 7. Re: Need Help Centering Page Content
                      Comp. 792 Community Member

                      I thought the question was answered in my first reply in this thread.

                      Yes that was very helpful and yes Firebug is a game changer. thanks.

                       

                      What I was asking was. If I change the margin from -15 to 40 then the content is centered, but the content is positioned in relation to the left since it is floated “left” and I was just wondering if there was some way to make the content float to be “centered” instead of “left” or does it always have to be floated in relation to either “Left" or "Right”? Sorry if this is a stupid question.

                       

                      /* WORK ---------------------------------------------------------*/

                       

                        ul.work {

                        margin: 0 -15px;

                        }

                       

                      __________________________________________________________________________________

                       

                       

                      /* WORK ---------------------------------------------------------*/

                       

                                ul.work {

                                          margin: 0 -15px;

                                }

                       

                           ul.work li {

                                float: left;   // here is what I am talking about. Can you float the content so it is "centered” and not “left”? //

                                width: 217px;

                                list-style: none;

                                margin-top: 0;

                                margin-right: 15px;

                                margin-bottom: 30px;

                                margin-left: 15px;

                                }

                      • 8. Re: Need Help Centering Page Content
                        Robert Heist II Community Member

                        Well there is no float that will align center.  To "center" an element you need 2 things:

                         

                        1.  The element must have a set width.

                        2.  The element must have left/right margins set to auto.

                         

                        Then the item will center within its parent element.

                        • 9. Re: Need Help Centering Page Content
                          Comp. 792 Community Member

                          Thanks Robert. I will make a note of that.

                           

                           

                          I have been playing with this and I think the page is looking better but I am still having trouble with a couple of things.

                           

                          At this link: http://www.buzzfx.ca/2d_character.html

                           

                          Footer not Centered with White Box

                          1. The white box and content is now centered, but I am still having problems getting the “footer” to be centered with the white box. I’ve tried a few things but they did not work. Any ideas how to do this?

                           

                          How to Get Footer to Always Touch the Bottom of Page

                          2. Also, I want the “footer" to always touch the bottom of the page. I tried to add (height: auto;) and (height: 100%;) to the center box to get the box to push the footer down but it didn't work. How would I do this?