[css-d] An Image On Top Of an Image
Hi; How do I place an image on top of another image? TIA, Victor __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
How do I place an image on top of another image? Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. For example: do you want the bottom image to be visible under the top image (translucent)? Are the images the same size or is one going to frame the other? Or are you looking for a scattered photographs effect? All of these would have significantly different solutions, but all fall under one image on top of another. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
Wouldn't it be easier to construct the finished image you want, and define the active area for the button with a map? -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
On Mon, Jun 21, 2010 at 12:23 PM, Peter Coates pcoa...@yukon1000.comwrote: Wouldn't it be easier to construct the finished image you want, and define the active area for the button with a map? Yeah, well, could do; however, I reuse the button over different images. How do? Too complicated? V -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
div style=position:relative;top:0;left:0 image src=one.jpg style=position:absolute;top:0;left:0;width:120px;height:120px image src=two.jpg style=position:absolute;top:50px;left:50px;width:20px;height:20px /div The enclosing div is important. It has positional info, so the coordinated in the enclosed imgs are relative to that div. You do not have to specify the width and height of the images. I've just doing that to show the sizes. The second image will be displayed on top of the first: no z-index is given, so they are rendered in the order they occur. If you want, you could say div style=position:relative;top:0;left:0 image src=one.jpg style=position:absolute;top:0;left:0;width:120px;height:120px;z-index:1 image src=two.jpg style=position:absolute;top:50px;left:50px;width:20px;height:20px;z-index:2 /div From: Victor Subervi [mailto:victorsube...@gmail.com] Sent: June-21-10 10:09 AM To: Peter Coates Cc: Climis, Tim; CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 12:23 PM, Peter Coates pcoa...@yukon1000.com wrote: Wouldn't it be easier to construct the finished image you want, and define the active area for the button with a map? Yeah, well, could do; however, I reuse the button over different images. How do? Too complicated? V -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Victor Subervi Sent: June-21-10 8:36 AM To: Climis, Tim Cc: CSS Discuss Subject: Re: [css-d] An Image On Top Of an Image On Mon, Jun 21, 2010 at 10:56 AM, Climis, Tim tcli...@indiana.edu wrote: Umm. Can we have an example of what you want? There are many options here, and depending on the effect you're looking for, some may or may not work. kinda figured that... For example: do you want the bottom image to be visible under the top image (translucent)? yes Are the images the same size or is one going to frame the other? not the same size. The bottom one has a hole in it for the button to fill. Imagine the logo for mailman (python mailing list). There is a flag part to the left with a circle on the right: http://www.mailmanlist.net/img/MailmanLogo75x199.jpg Imagine it with flags on either side. Hope that was better. TIA. V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
Well, Peter, your code worked well; however, I had to add several breaks at the end: table border='0' cellpadding='0' cellspacing='0' tr td colspan='2'#xa0;/td /trtr td width='117' height='147' align='center' valign='middle' bgcolor='#183452' img src='images/mic.jpg' width='107' height='137' / /tdtd width='5'#xa0;/tdtd align='center' span class='large_italic'Listen Live!/spanbr / Click here to listen live to WXZT 90.9 FM now!br /br / table valign='top' align='center' width='260' border='0' cellpadding='0' cellspacing='0' tr td div style='position:relative;top:0;left:0' image src='images/mic-lines.png' width='279' height='65' style='position:absolute;top:0;left:0;width:279px;height:65px' image src='images/button-off.png' width='71' height='71' style='position:absolute;top:-5px;left:105px;width:71px;height:71px' /div br /br /br / /td /trtr td colspan='2'#xa0;/td /tr /table /td /tr /table Even so, it has a little extra space at the top. What happened without the breaks is that your code forced everything down for some reason. Could you explain that? TIA, V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
snip a bunch of HTML Can you send us a link to your live page instead of all this code? It's a lot easier to debug things that way. If not, we can try and work with what we've got, but a link is always more helpful. ---Tim __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] An Image On Top Of an Image
On Mon, Jun 21, 2010 at 2:22 PM, Climis, Tim tcli...@indiana.edu wrote: snip a bunch of HTML Can you send us a link to your live page instead of all this code? It's a lot easier to debug things that way. http://creative.vi/clients/crucian-edu/ TIA, V __ css-discuss [cs...@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
