Hello everyone, I am working on a site built with Atahualpa theme version 3.5.3 and Wordpress 3.0.1 here: www.lotuseterneforum.com (just a testbed URL - site will be moved to a different URL) I have tried asking the Atahualpa support forums for help, yet no one there has been able to provide the answer. What I am trying to do is have a large set of rotating header images (like say 1500px wide and 700 px high) at the top of the page. I am then overlaying the logo, a 468x60 ad, and a portion of the blog content overlaid on top of the bottom of the header images. I would like these header images to rotate upon each page load. I have solved the header image rotation behavior and positioned the header images exactly where I want them, using either the Frontpage-Slideshow plugin or Atahualpa's native image rotation feature. I have figured out the code for each. The problem is that when a large header image is loaded, the page is not centered anymore -- rather the page loads justified to the left. When the site width is fixed at say 700px, the page is nicely centered on the blog content area. I figure the solution is some CSS insert, but I'm not sure what it is and need help formulating the correct CSS. For extra clarification, I want my page to behave <em>exactly</em> like this page: http://www.kilometermagazine.com/artman2/publish/first-drive/First_Drive_Audi_quattro_Concept.html While the header image is too large for my small laptop screen, the left ends and right ends are simply truncated, and no scrollbars are displayed! And the blog content is centered! How exactly do I achieve this?!? I have tried studying that page with Firebug but I'm not sure what I should be gleaning from the Firebug data. ANY help is greatly appreciated!
You really have some problems with the header. I suggest putting the rotating header images as a background image and just rotate their parent element The other option, that is also good is setting overflow hidden on your divs where the images are and width and height on the element (div would be good) <something id='rotate'> <div><img src='img/rotate/1.jpg' /></div> <div><img src='img/rotate/2.jpg' /></div> <div><img src='img/rotate/3.jpg' /></div> </something> This will fix your site width problems
You'll need to find a script in PHP/JavaScript/whatever to rotate the image's path between yours. You then use that and insert it as the background image of a divider or the body, depending on how your site was coded. This really varies from one script to the next.