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 » Header configuration & styling »

[SOLVED] need help floating div over header image


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 Sep 1, 2010, 06:07 AM
berkleegrad
 
19 posts · Mar 2010
[SOLVED] need help floating div over header image

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
 
9,967 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
 
21,705 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
check your settings in both sites at ato->Style & configure LAYOUT->Layout Container Style
look for a difference
__________________
If you like my help, please consider donating. I am happy to provide greater detail on this and other topics if you hire me. Please send detailed support requests to me as a private message, thank you.
Juggledad | Forum Moderator/Support
  #5  
Old Sep 2, 2010, 05:47 AM
lmilesw's Avatar
lmilesw
 
9,967 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 06:11 AM.


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