Solved

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

Posted on 2009-07-05
5
221 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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Keyup listener getting fired on initial page load 1 53
jQuery element reference issue 2 38
Javascript Error 10 24
Make qty change inside array as well 1 20
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

738 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