Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] need help floating div over header image


  #1  
Old Sep 1, 2010, 06:07 AM
berkleegrad
 
19 posts · Mar 2010
ATA 3.5.3 WP 3.0

http://media-organic.com

added the following code to ATO Config Header Area:

<div style="position:absolute; top:20px; left:20px; width:360px; height:113px; z-index:40;">
<a href="http://media-organic.com"><img src="<?php bloginfo('template_directory'); ?>/images/mologo.png"></a>
</div>

unfortunately the <div> is postioning relative to the browser window not the layout container or header area.

I tried this on a fresh install on my development site and it seems to work fine. I was also able to get it to work by styling the logo area with the same code. I suspect there is something in my CSS that is causing this to break. Could this have anything to do with the default styles in ATA 3.5.3 vs my legacy install? Any help would be much appreciated.

Last edited by berkleegrad; Sep 1, 2010 at 09:02 AM.
  #2  
Old Sep 1, 2010, 09:14 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
How about using position:relative or better yet just give the image an ID and style in 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.
  #3  
Old Sep 2, 2010, 04:40 AM
berkleegrad
 
19 posts · Mar 2010
I tried position:relative but it leaves a gap in the flow where the div normally would fall. Position:absolute is the correct call. I also have given the div an ID and used CSS inserts. Again, it works perfectly on my dev site but not on my legacy site. Both sites running latest updates on ATA and WP.

legacy site = http://media-organic.com
dev site for comparison: http://thechickenchannel.com

The right logo is the div floated over the background image using CSS (the left logo is part of the background image). It works exactly as predicted on this site. It does not work on my legacy site. I'm, trying to identify why the difference.
  #4  
Old Sep 2, 2010, 05:41 AM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
check your settings in both sites at ato->Style & configure LAYOUT->Layout Container Style
look for a difference
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Sep 2, 2010, 05:47 AM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
It looks like you figured it out.
__________________
~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.
  #6  
Old Sep 2, 2010, 05:51 AM
berkleegrad
 
19 posts · Mar 2010
SOLVED! Persistence pays dividends (uses lots of time too).

Searching around the web I learned that for a div to be position:absolute, the parent div needs to be position:relative.

Using Chrome to inspect elements on both dev and legacy sites I compared the styles of the container div and noticed that the dev site called for position:relative, the legacy site did not.

I then went to ATO and compared the layout CSS and saw that the dev site included a position:relative; statement that was not picked up when I updated my legacy site from earlier version of ATA.

Thanks JD and Larry - once again excellent advice (even though I figured it out on my own while you were responding).

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] invisible floating buttons in %logo area thalo Header configuration & styling 2 Aug 28, 2010 09:13 AM
[SOLVED] Thumbnails with excerpts - not resizing or floating docfox Excerpts, Read more, Pagination 6 May 13, 2010 03:19 PM
Want to make background image visible through logo div keblake Header configuration & styling 4 Mar 11, 2009 08:32 PM


All times are GMT -6. The time now is 04:38 PM.


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