Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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
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,672 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,672 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,672 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.
  #7  
Old Nov 26, 2013, 09:37 PM
lmilesw's Avatar
lmilesw
 
10,174 posts · Jul 2009
Central New York State USA
You could try something like the following and fiddle with top, bottom, left, right to postion.
HTML Code:
#footer-flag img {
    position: absolute;
    top: 0;
}
__________________
~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.

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 08:16 PM.


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