Adobe Community: Need Help Centering Page Content

Currently Being Moderated

1. John Waller,

May 18, 2012 1:32 PM in reply to Comp. 792

Report

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

2. Comp. 792,

May 18, 2012 10:16 PM in reply to John Waller

Report

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.

|

Mark as:

Currently Being Moderated

3. John Waller,

May 18, 2012 11:22 PM in reply to Comp. 792

Report

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)

Does this page help at all?

http://getfirebug.com/html

|

Mark as:

Currently Being Moderated

4. Comp. 792,

May 19, 2012 10:06 PM in reply to John Waller

Report

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;

}

|

Mark as:

Currently Being Moderated

5. Comp. 792,

May 23, 2012 6:01 PM in reply to Comp. 792

Report

Can someone please help me with this. Thanks.

|

Mark as:

Currently Being Moderated

6. John Waller,

May 23, 2012 6:10 PM in reply to Comp. 792

Report

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

|

Mark as:

Currently Being Moderated

7. Comp. 792,

May 23, 2012 10:23 PM in reply to John Waller

Report

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;

}

|

Mark as:

Currently Being Moderated

8. Robert Heist II,

May 23, 2012 10:54 PM in reply to Comp. 792

Report

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:

Currently Being Moderated

9. Comp. 792,

May 24, 2012 12:49 PM in reply to Robert Heist II

Report

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?

|

Mark as:

Dreamweaver

Need Help Centering Page Content

May 18, 2012 1:01 PM

More Like This

Bookmarked By (0)

Answers + Points = Status