I am working on a site built with Atahualpa 3.5.3 and WP 3.0.1 here:

www.lotuseterneforum.com

When the site width is fixed at say 700px, everything is nicely centered.

Yet when I increased the site width to 1189px, the page loads by default to the left, and img.logo and my new widget area (text6) in the header are no longer centered to the layout.

I would like those to be centered, and I would like the page to load in the center of the visitor's browser by default.

What is the best way to accomplish this? I tried Googling and found this helpful link:

http://davidwalsh.name/horizontally-...-structure-css

I am not sure what CSS ID I need to modify in Atahualpa to apply the "{ width:900px; margin:0 auto; }" suggested, and if this is even the best way.

I tried searching the forum but I did not see a relevant topic.

Thanks for any help!

P.S. Here are the relevant CSS inserts for how the logo and text-6 widget (the ad) are positioned:

img.logo {
position: absolute;
top: 30px;
left:18px;
z-index: 59;
}

div#text-6.widget{
position: absolute;
top: 30px;
right: 18px;
z-index:60;
}

Just to be sure are you setting your site width in ATO>Style & configure layout?

As for the other two items I would set them as position: relative and use negative positioning if necessary to get them in the right place.

If you do for some reason need to center the the site with CSS use something like the following but I would try the above first.

div#container {
width: 1189px;
margin-right: auto;
margin-left: auto;
}

Thanks for the help lmilesw.

Yes, I set the site width at ATO>Style & configure layout. Should the site be loading centered already?

I think the issue is the large header images I have in the background. Regardless of the size of the background image, I would like the visitor's page to load centered on the content box. Does that make sense?

It should center. When you say the large header images you have in the background how are you putting them in the background?

The large images are just placed in the rotating header images folder of Atahualpa. I then moved the central content up a bit so the content is overlaid on top of the images.

Sorry for the incorrect terminology -- the background itself is #FFFFFF; .

Then yes all should center even if set to 1189px but again I would stay away from absolute positioning where possible.

I'm not very familiar with the overflow CSS attribute, but I'm thinking I need to somehow include it regarding the header images.

The idea being that no matter what your screen size is, the content is displayed in the center. The visitor should only see as wide a header image as their screen allows, without scrollbars. Instead of scrollbars, I would just like the ends of the header image hidden from view, so the visitor only sees the central portion. How do I achieve this? I've been trying to wrap my head around this for days but I'm just not sure what CSS I need.

Thanks again.

In ATO>Style & Edit Header image you would set the position to top center. You won't get scroll bars when you resize your browser window. But I am not really clear on what you are trying to achieve.

Originally Posted by lmilesw

But I am not really clear on what you are trying to achieve.

I am trying to achieve exactly the following setup seen here:

http://www.kilometermagazine.com/art...o_Concept.html

The background image in the above link is larger than the screen of my small laptop, yet instead of creating a left-right scrollbar, the browser just truncates the left and right edges of the large image and keeps the content focussed in the center of the browser window.

I would like my page to behave the same way, when viewed by a smaller screen. No scrollbars, with the content in the center, and if the header image is too wide, simply do not show the extra width -- just show the center of the header image. Does that make sense? How do I achieve this with Atahualpa?

Thank you.

I fiddled with this awhile and don't know how you can get the page to cut off on both the left and right equally. I'm still playing with it though.

I really do appreciate your effort Larry, as I just have no idea what else I should try.

Perhaps studying that page I linked with Firebug will help? I've tried that but I'm not sure what I should be learning from that page...

Try taking the image out of the header and using it as a background image instead.

Ftp the image to your theme images folder and then add it in body, text and links with code something like this:

background: url(/wp-content/themes/atahualpa353/images/test.jpg)no-repeat top center;

Thank you for the suggestion rosetrees, but I would like to retain the rotating header images feature. There are only two header images there currently, but I plan to make many more, and the overall effect should be very nice.

How about using a gallery or slideshow plugin (using a new widget area) or perhaps some code for the background image?

Originally Posted by lmilesw

How about using a gallery or slideshow plugin (using a new widget area) or perhaps some code for the background image?

As the Atahualpa rotating header images feature already accomplishes the image rotation effect that I'm looking for, what advantage would I gain with another solution for the image rotation? Why would I switch?

The problem with the design now is the page-centering, nothing else.

Because of the way you want to have you page laid out and the way Atahualpa is constructed I just thought that might lend itself to what you are trying to accomplish. This isn't a for sure but I may test in the next day or two to see if my thoughts are accurate.

Originally Posted by lmilesw

How about using a gallery or slideshow plugin (using a new widget area) or perhaps some code for the background image?

I'm trying to sort between the various plugins for this application - anyone have one in particular they'd recommend?

EDIT: It looks like Frontpage-Slideshow may accomplish what I need. I'll post back once I've had time to tinker with it.

I've now had time to configure Frontpage-Slideshow to display the images in the background just like the native Atahualpa image rotator.

The centering issue still remains, and I am completely stumped.

Does Larry or anyone else have any other ideas which may help to solve this issue? I need the page centered on the post content.

Thanks for any ideas.

What happens if you take out any CSS for wrapper or container from ATO>Add HTML/CSS Inserts>CSS Inserts?