[scrubbicus]

http://mmabattlebeast.com/html/

On all of the "steel panels" there's the header as you can see on the first row there's the "Television Battle Guide" with the oval shaped background. It's aligned to the left and for the life of me I can't get it to be aligned to the center. I've tried using margin: 0px auto, text-align: center in the CSS on <td> and <div> along with <center> within the raw code.

Any help is appreciated. Thanks.

[tomdkat]

Given how you have the background images setup, it will be challenging to get that header centered as you desire.

Here is the CSS in question:

	#frame_header { width: 100%; clear: both; margin: 0px auto }
		.header_left { background: url('../images/template/header_left.png'); float: left  }
		.header_bg { background: url('../images/template/header_bg.png'); float: left; text-align: center; padding: 11px 0px 0px 0px }
		.header_right { background: url('../images/template/header_right.png'); float: left }

The "margin: 0px auto" rule on the "frame_header" id won't center that item because it has a width of 100%. If the width was the exact width of the header background image, you might be able to get the header centered the way you want. The problem is since the background image will stretch to match the width of the text in the header, you won't necessarily know what the required width should be.

I also notice you aren't specifying any widths for the "header_left", "header_bg", or "header_right" classes yet all three are floated to the left. The CSS spec requires floated elements to have a width specified. So, if I were you I would do this:

• Assign different color 1px borders to the "header_left", "header_bg", and "header_right" classes to see how those elements are laying out.
• Determine the appropriate width of the "header_left" and "header_right" elements (if possible) and specify those widths, accordingly.
• Determine the width of the header and set that width as the width of the "frame_header" id and then see if things start to center.

Now, you're violating a HTML rule by having more than one element with the same id. Each "frame_header" defined on the page now should have it's own id AND the "#frame_header" definition should be changed to a class definition. This way, you can specify the appropriate widths of each header as needed.

Alternatively, if the header text will be static, you can simply take screenshots of the current page and create static header images and use those instead of using dynamically sized headers.

So, one approach would be to get the width of the "frame_header" specified correctly so it can be centered. Here is an example of what I mean:

	.frame_header { clear: both; margin: 0px auto }
		.header_left { background: url('../images/template/header_left.png'); float: left  width: 20px}
		.header_bg { background: url('../images/template/header_bg.png'); float: left; text-align: center; padding: 11px 0px 0px 0px }
		.header_right { background: url('../images/template/header_right.png'); float: left; width: 20px }
        #frame_header1 { width: 200px; }
        #frame_header2 { width: 100px; } 

Another approach is to simply make static images out of the headers, as they are displayed now, and use those instead of the dynamically sized header images.

The second approach would be simpler since you can center the header image and move on with your life.

I have NOT tried any of the above so I could be completely mistaken.

Peace...

[emopoops]

go ahead say that php will solve this problem. u know that u should be usng javascript for this. im not aware which ones dont work but those static images are nonetheless images that need to be positioned absolutely. and that is about all the css u need here. you problem is mere javascript folks!

[tomdkat]

JavaScript? PHP? I don't think scripting is the answer at all. Besides, if they get their CSS and HTML right, the header will center even if JavaScript is disabled in the browser.

Peace...

[scrubbicus]

Ya Javascript or PHP won't effect the CSS position of it, it would be a way of outputting the div elements onto the page but CSS would handle everything else.

Anyway I got it positioned. It was tricky but I like it a lot better then having an image because all my boxes are dynamic now, I want to make it easier for one day the client to type in their own titles. Can everyone take a look and see if it's right to them? Some of the headers are off by 1px and others aren't which is weird.

[tomdkat]

The "Beauties" header is malformed when I view the page but the others look fine. I'm using Firefox 3.5.5 on Linux.

I see how you floated the left and right header DIVs left and right, respectively.

Peace...

[merin888]

The reason you're seeing it vertically centered in Firefox is because Firefox's default top margin for a UL is somewhere around 16px, and since the height of the navigation div is 50px, it appears to be vertically centered. Other browsers have a default margin-top value of 0px for UL's.

Solution: Define all values for the margin and padding of the navigation UL and LI and you'll have a more consistent appearance across the various browsers.
____________________________________________
Homes for Sale Nashville
hip embryos