Dragosvr92 Posted October 14, 2011 Share Posted October 14, 2011 Ok, so i have a .... In the bottom right of a 468x60 image, I would like to add two small images about 16x16, each with a link on it. It would be nice to have the 468x60 image as a background. Does anyone have any idea how to do that? I have no clue on how to do it myself... Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/ Share on other sites More sharing options...
AyKay47 Posted October 14, 2011 Share Posted October 14, 2011 you will want the large image to either be position: static (default) or position: relative; you can make the two little pictures position: absolute and locate them wherever you want.. you also might want to incorporate a z-index here as well.. Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279199 Share on other sites More sharing options...
Dragosvr92 Posted October 14, 2011 Author Share Posted October 14, 2011 Ok, i understanded that. but how do i set the position? it is absolute etc.... but it has to be absolute somewhere..... bottom, top etc. And, should i use them all as backgrounds? Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279242 Share on other sites More sharing options...
Dragosvr92 Posted October 14, 2011 Author Share Posted October 14, 2011 I have just made this messy code ....... How may i make the small icon to stay ONLY Inside the main image? <style> <!-- #BigBanner{ background-color:green; width:468; height:60; } #Small{ background-color:red; width:16; height:16; position:absolute; right:690px; bottom:600px; } --> </style> <a href="http://TEST.COM"> <div id="BigBanner"> <a href="http://TEST.COM"><div id="Small"></div></a> </div> </a> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279246 Share on other sites More sharing options...
Dragosvr92 Posted October 15, 2011 Author Share Posted October 15, 2011 No one replyed :'( I can figure it out how to arrange the little icons. But i dont know how to make the 468x60 image to be the main body. So that what i put in it, wont get outside it. <style> <!-- #BigBanner{ background-color:green; width:468; height:60; cursor:pointer; } #Small{ background-color:red; width:16; height:16; position:absolute; right:690px; bottom:600px; } #Small:hover{ border-style:solid; border-color:#98bf21; } --> </style> <div id="BigBanner" onclick="location.href='{U_INDEX}';"> <div id="Small" onclick="location.href='{U_INDEX}';"></div></div> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279552 Share on other sites More sharing options...
teynon Posted October 15, 2011 Share Posted October 15, 2011 <html> <head> <style> <!-- #BigBanner{ background-color:green; width:468; height:60; cursor:pointer; position: relative; } #Small{ background-color:red; width:16px; height:16px; position:absolute; right:0px; bottom:0px; } #Small:hover, #Small2:hover{ border-style:solid; border-color:#98bf21; } #Small2{ background-color:red; width:16px; height:16px; position:absolute; right:18px; bottom:0px; } --> </style> </head> <body> <div id="BigBanner" onclick="location.href='{U_INDEX}';"> <div id="Small2" onclick="location.href='{U_INDEX}';"></div> <div id="Small" onclick="location.href='{U_INDEX}';"></div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279651 Share on other sites More sharing options...
Dragosvr92 Posted October 16, 2011 Author Share Posted October 16, 2011 Thank You very much teynon ! But there is a small issue. All the links from the divs go to the main id, BigBanner. i cant add links on the other 2 buttons :-\ Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279661 Share on other sites More sharing options...
teynon Posted October 16, 2011 Share Posted October 16, 2011 <html> <head> <style> <!-- .container { width: 468px; height: 60px; position: relative; } #BigBanner{ background-color:green; width:468; height:60; cursor:pointer; position: absolte; z-index: 1; } #Small{ background-color:red; width:16px; height:16px; position:absolute; right:0px; bottom:0px; z-index: 10; } #Small:hover, #Small2:hover{ border-style:solid; border-color:#98bf21; } #Small2{ background-color:red; width:16px; height:16px; position:absolute; right:18px; bottom:0px; z-index: 10; } --> </style> </head> <body> <div class="container"> <div id="BigBanner" onClick="location.href='test1.html';"></div> <div id="Small2" onclick="location.href='test2.html';"></div> <div id="Small" onclick="location.href='test3.html';"></div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279663 Share on other sites More sharing options...
Dragosvr92 Posted October 16, 2011 Author Share Posted October 16, 2011 Thanks alot again! my last question would be if theres a way to add the dotted border that usually appears on the <a> element, when keeping the click pushed. If you dont know how, thats fine. Thank you very much again for your help. Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279669 Share on other sites More sharing options...
teynon Posted October 16, 2011 Share Posted October 16, 2011 I don't know what dotted line you are referring to, but you could always use :active in css: <html> <head> <style> <!-- .container { width: 468px; height: 60px; position: relative; } #BigBanner{ background-color:green; width:468; height:60; cursor:pointer; position: absolte; z-index: 1; } #Small{ background-color:red; width:16px; height:16px; position:absolute; right:0px; bottom:0px; z-index: 10; } #Small:hover, #Small2:hover{ border-style:solid; border-color:#98bf21; } #Small:active, #Small2:active, #BigBanner:active { border: 3px dotted #98bf21; } #Small2{ background-color:red; width:16px; height:16px; position:absolute; right:18px; bottom:0px; z-index: 10; } --> </style> </head> <body> <div class="container"> <div id="BigBanner" onClick="location.href='test1.html';"></div> <div id="Small2" onclick="location.href='test2.html';"></div> <div id="Small" onclick="location.href='test3.html';"></div> </div> </body> </html> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279680 Share on other sites More sharing options...
Dragosvr92 Posted October 16, 2011 Author Share Posted October 16, 2011 I meant the outline property. What you said helps Another thing....... is it possible to use the <img> tag and a 1x1 pixel image, over the background, instead of a div? I appreciate all your help Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279755 Share on other sites More sharing options...
teynon Posted October 16, 2011 Share Posted October 16, 2011 You can use any block element. So yes, you can use img. Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279758 Share on other sites More sharing options...
Dragosvr92 Posted October 16, 2011 Author Share Posted October 16, 2011 Well this wont work: <img class="container"> <img src="pixel.png" id="BigBanner" onClick="location.href='test1.html';"></img> <img src="pixel.png" id="LinkE" onclick="location.href='test2.html';" title="Link on placed banner"></img> <img src="pixel.png" id="ContactL" onclick="location.href='test3.html';" title="Contact"></img> </img> Cant put <img> tags in another :-\ Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279769 Share on other sites More sharing options...
teynon Posted October 16, 2011 Share Posted October 16, 2011 <div class="container"> <img id="BigBanner" onClick="location.href='test1.html';"> <img id="Small2" onclick="location.href='test2.html';"> <img id="Small" onclick="location.href='test3.html';"> </div> Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279771 Share on other sites More sharing options...
Dragosvr92 Posted October 16, 2011 Author Share Posted October 16, 2011 Damn im stupid, i added the img tag over the container for nothing Thank You ! I got it working. I'll get back to you if im stuck anywhere, thanks again for your time. Link to comment https://forums.phpfreaks.com/topic/249080-add-two-images-over-a-bigger-one/#findComment-1279773 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.