Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme »

What is the best way to center the entire page?


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Dec 23, 2010, 12:53 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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;
}

Last edited by Wimbledon; Dec 23, 2010 at 01:00 PM.
  #2  
Old Dec 23, 2010, 01:29 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
HTML Code:
div#container {
width: 1189px;
margin-right: auto;
margin-left: auto;
}
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #3  
Old Dec 23, 2010, 01:56 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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?

Last edited by Wimbledon; Dec 23, 2010 at 02:02 PM.
  #4  
Old Dec 23, 2010, 02:08 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
It should center. When you say the large header images you have in the background how are you putting them in the background?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #5  
Old Dec 23, 2010, 02:23 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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; .
  #6  
Old Dec 23, 2010, 02:35 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
Then yes all should center even if set to 1189px but again I would stay away from absolute positioning where possible.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #7  
Old Dec 23, 2010, 03:25 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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.
  #8  
Old Dec 23, 2010, 03:37 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #9  
Old Dec 24, 2010, 07:37 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
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.
  #10  
Old Dec 24, 2010, 03:01 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #11  
Old Dec 24, 2010, 05:02 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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...
  #12  
Old Dec 25, 2010, 08:56 AM
rosetrees
 
102 posts · Mar 2009
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;
  #13  
Old Dec 25, 2010, 11:28 AM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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.
  #14  
Old Dec 28, 2010, 02:40 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
How about using a gallery or slideshow plugin (using a new widget area) or perhaps some code for the background image?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #15  
Old Dec 28, 2010, 09:57 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
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.
  #16  
Old Dec 28, 2010, 10:48 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #17  
Old Jan 22, 2011, 02:01 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
Quote:
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.

Last edited by Wimbledon; Jan 22, 2011 at 02:30 PM.
  #18  
Old Jan 23, 2011, 09:55 PM
Wimbledon's Avatar
Wimbledon
 
320 posts · Apr 2009
[VA & AZ], USA
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.
  #19  
Old Jan 23, 2011, 10:55 PM
lmilesw's Avatar
lmilesw
 
10,107 posts · Jul 2009
Central New York State USA
What happens if you take out any CSS for wrapper or container from ATO>Add HTML/CSS Inserts>CSS Inserts?
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
All comments of entire site on one page? hannamargolien Comments, trackbacks & pings 4 Mar 16, 2011 09:06 AM
How to get entire page centered? gwpad Forum How-To 3 Jan 14, 2010 03:18 PM
sidebar not stretching across entire page tim5046 Sidebars & Widgets 4 Jun 10, 2009 03:11 PM
Entire site is off center on a particular computer evalee Atahualpa 3 Wordpress theme 0 Apr 21, 2009 09:11 AM
IE Not Showing Entire page Mande Atahualpa 3 Wordpress theme 1 Apr 14, 2009 05:46 AM


All times are GMT -6. The time now is 08:11 PM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.