Skip navigation
Currently Being Moderated

Need Help Centering Page Content

May 18, 2012 1:01 PM

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?

 
Replies
  • Currently Being Moderated
    May 18, 2012 1:32 PM   in reply to Comp. 792

    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;

    }

     
    |
    Mark as:
  • Currently Being Moderated
    May 18, 2012 11:22 PM   in reply to Comp. 792

    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

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2012 6:10 PM   in reply to Comp. 792

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

     
    |
    Mark as:
  • Currently Being Moderated
    May 23, 2012 10:54 PM   in reply to Comp. 792

    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.

     
    |
    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