The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Overlapping Png

View previous topic View next topic Go down

Solved Overlapping Png

Post by Fairfox1 on December 9th 2014, 2:10 pm

well i want to make some pngs overlap, since i am making each png a separate buttons normaly for style i been using i just get 4 png standard hyperlink codes then stick them in a table and edit said table for my own needs.

though design i am working on, inter-laps [for idea i have posted draft jpeg of it] each section will be a png hyperlinks, but i want to overlap, so it can stay close to entire design , with no big gaps.
[Guess their be something with fix placements, or something [Forcing the overlap] Thanks

l

Fairfox1
New Member

Posts : 18
Reputation : 1
Language : enlish

http://ffda.forumotion.co.uk/

Back to top Go down

Solved Re: Overlapping Png

Post by Ange Tuteur on December 9th 2014, 9:49 pm

Hello Fairfox1,

I think you might want to use z-index. z-index changes the stack index of an element allowing you to display an element on top, or below another element. You'll also need to use positioning to get the images where you want them.

Something like this :
Code:
<div class="elementContainer" style="position:relative;">
<!-- applying a non-static position to the parent makes it act as a containing block -->

<img style="position:absolute;top:0;left:0;z-index:1;" src="img1.gif"/>
<img style="position:absolute;top:0;left:50px;z-index:2;" src="img2.gif"/>
<img style="position:absolute;top:0;left:100px;z-index:3;" src="img3.gif"/>

</div>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Overlapping Png

Post by Luffy on December 9th 2014, 10:06 pm

@Ange Tuteur can this become a moving item? I mean can somehow by adding this code make it to change lets say every 10 seconds? Something like #slideshow images or something?






Luffy
Manager
Manager

Male Posts : 4035
Reputation : 407
Language : Greek, English
Location : Greece

http://www.thinktankforum.net

Back to top Go down

Solved Re: Overlapping Png

Post by Fairfox1 on December 10th 2014, 2:31 am

@Ange Tuteur wrote:Hello Fairfox1,

I think you might want to use z-index. z-index changes the stack index of an element allowing you to display an element on top, or below another element. You'll also need to use positioning to get the images where you want them.

Something like this :
Code:
<div class="elementContainer" style="position:relative;">
<!-- applying a non-static position to the parent makes it act as a containing block -->

<img style="position:absolute;top:0;left:0;z-index:1;" src="img1.gif"/>
<img style="position:absolute;top:0;left:50px;z-index:2;" src="img2.gif"/>
<img style="position:absolute;top:0;left:100px;z-index:3;" src="img3.gif"/>

</div>
in terms of them pngs this is working great but when i go to enter it like to make the images button replacing with url= http://postimage.org/]http://s9.postimg.org/6rzzqhajz/image.pn g[/url

or <a href version of buttons [it mess up

Fairfox1
New Member

Posts : 18
Reputation : 1
Language : enlish

http://ffda.forumotion.co.uk/

Back to top Go down

Solved Re: Overlapping Png

Post by Fairfox1 on December 13th 2014, 7:16 pm

bump, can you show me how to get this working as a button, i been trying modifiy what u gave me but not accepting as a button.

Fairfox1
New Member

Posts : 18
Reputation : 1
Language : enlish

http://ffda.forumotion.co.uk/

Back to top Go down

Solved Re: Overlapping Png

Post by Ange Tuteur on December 13th 2014, 8:35 pm

You would place the style attribute onto the link instead. Like :
Code:
<a href="/" style="position:absolute;top:0;left:0;z-index:1;">
<img src="/myimage.gif"/>
</a>

Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2684
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

Solved Re: Overlapping Png

Post by Fairfox1 on December 13th 2014, 10:36 pm

thank you, this works now

Fairfox1
New Member

Posts : 18
Reputation : 1
Language : enlish

http://ffda.forumotion.co.uk/

Back to top Go down

Solved Re: Overlapping Png

Post by SLGray on December 13th 2014, 10:52 pm

Topic solved and archived


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 35672
Reputation : 2375
Language : English
Location : United States

http://fmthemes.forumotion.com/

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum