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 »

Relative positioned footer image being rendered inconsistently


  #1  
Old Nov 22, 2013, 02:05 PM
jodybethw
 
25 posts · Jun 2011
Relative positioned footer image being rendered inconsistently

Please Click here to see the page in question.

At the bottom of the page you will hopefully see some pink bunting (those triangle flags on a string.) I want the bunting to appear as though it is hanging from the top of the footer (the top of the green box) extending below the green box.

It looks correct on one of my computer screens, but on the others, it is appearing at three different places, as if it were absolute positioned. It is relative positioned, so how do I ensure that it renders in the same spot on every screen?

I wonder if this is because the HTML is placed in the wrong place? It is currently at "HTML Inserts: Body Bottom", because when put in "Footer: Content", the green box is stretched vertically to envelope it.

If this is not the issue, is it something with the CSS?

HTML:
Code:
<div id="footer-flag"><img src="http://www.p-is-for-party.com/blog/wp-includes/images/footer-flag.png"></div>
CSS:
Code:
#footer-flag {
position: relative;
width: 0px;
left: 650px;
top: -105px;
text-align: right;
}
  #2  
Old Nov 22, 2013, 02:23 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Put your div in the ato->Style & edit FOOTER->Footer: Content then play with the positioning
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 22, 2013, 02:48 PM
jodybethw
 
25 posts · Jun 2011
I've done so; if you look now you'll see that the footer, in green, has now stretched to accommodate the image. What I want is for the image to appear as if it's on top of the green box, which should be just 30px high....see the problem?
  #4  
Old Nov 22, 2013, 05:06 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
So why not make the image with a 30px green background?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 26, 2013, 10:48 AM
jodybethw
 
25 posts · Jun 2011
The image of the bunting has NO background -- it is transparent. I do not want it to have a background at all. What I need is to have a 30px-high horizontal green band in the footer, and then to visually layer the bunting on top so that it looks as though it is hanging from the top edge of the green band. Does that make sense?

By putting the code for the bunting in the footer, the green band which is supposed to be only 30px high stretches to around 200px high. I need to know where in Atahualpa to insert the html for the bunting.
  #6  
Old Nov 26, 2013, 02:44 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
There isn't an easy way to add a background color of one height and an image of another height. You are going to have to experiment with CSS or simply add a green bar to the image - the least time consuming option I can think of.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Last edited by lmilesw; Nov 26, 2013 at 09:27 PM.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Font changing inconsistently jasontbedell Center area post/pages 1 Mar 7, 2011 06:02 PM
Multi-post pages inconsistently using excerpts (eg. search results) Gravity Excerpts, Read more, Pagination 0 Jun 24, 2010 06:07 PM
JS script tag does not get rendered moglidude Center area post/pages 1 Jan 4, 2010 05:00 AM
Logo image positioned to far left on large monitors b1tzmast3r Header configuration & styling 16 Nov 16, 2009 06:41 AM
Logo positioned over page menu bar markday Header configuration & styling 3 Nov 3, 2009 01:36 PM


All times are GMT -6. The time now is 02:28 AM.


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