Solved

How can i dispay and image above another image in a html page ?

Posted on 2009-07-05
5
212 Views
Last Modified: 2012-08-13
Hello as you could see in this page
http://keyboards-midi.musiciansfriend.com/product/Nord-Electro-2-Package?sku=500540#new

the image on this link "We will beat any price..." is shown above and mixed with the normal product image so how can i do what in java script or css ?

Thanks.
0
Comment
Question by:Styleminds
  • 2
  • 2
5 Comments
 
LVL 31

Expert Comment

by:GwynforWeb
ID: 24781540
Put them in divs and control their position with the style definition, z-index controls which goes on top


<div style="position: absolute;top:0px;left:0px;z-index:1">
  <img src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif">
</div>

<div style="position: absolute;top:0px;left:100px;z-index:0">
  <img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg">
</div>
0
 
LVL 4

Expert Comment

by:stevepicks
ID: 24781548
in css he has position absolute so he can place the price image everywhere:
#ribbon  { position:absolute; width:150px; height:150px; z-index:1; }
/*end page styles */
.usedItemBox {
margin-bottom:10px;
}
in html he uses the div ribbon with the image of the price
<div id="ribbon">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
pretty basic css
also look here:
http://www.barelyfitz.com/screencast/html-training/css/positioning/
0
 

Author Comment

by:Styleminds
ID: 24781577
Still didn't get the figure ! what i need is the easiest way to get two image one on the top of the other in addition i need to control the display on the top image i need to place a little up-left of the background image.
0
 
LVL 4

Expert Comment

by:stevepicks
ID: 24781605
try this inside the body of  any html:
<table><tr><td>
<div id="ribbon" style="position:absolute; width:150px; height:150px; z-index:1;">
<img alt="We Will Beat Any Price - Guaranteed!" src="http://img3.musiciansfriend.com/dbase/graphics/new_detail/r_price_guarantee.gif" />
</div>
<img src="http://img3.musiciansfriend.com/dbase/pics/products/regular/1/6/4/568164.jpg"
</td></tr></table>
0
 
LVL 31

Accepted Solution

by:
GwynforWeb earned 500 total points
ID: 24781735
"Still didn't get the figure ! what i need is the easiest way to get two image one on the top of the other in addition i need to control the display on the top image i need to place a little up-left of the background image."

I think my response demonstrates that? Or am I misunderstanding your question?
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now