Solved

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

Posted on 2009-07-05
5
222 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

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.
This article discusses how to create an extensible mechanism for linked drop downs.
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

622 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