[SOLVED] need help floating div over header image

berkleegrad · #1 Sep 1, 2010, 07:07 AM

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.

lmilesw · #2 Sep 1, 2010, 10:14 PM

How about using position:relative or better yet just give the image an ID and style in CSS Inserts?

berkleegrad · #3 Sep 2, 2010, 05:40 AM

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.

juggledad · #4 Sep 2, 2010, 06:41 AM

check your settings in both sites at ato->Style & configure LAYOUT->Layout Container Style
look for a difference

lmilesw · #5 Sep 2, 2010, 06:47 AM

It looks like you figured it out.

berkleegrad · #6 Sep 2, 2010, 06:51 AM

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).