Aureole Posted August 1, 2007 Share Posted August 1, 2007 It looks like I'm posting a huge topic but if you take a quick look it's not really that much...just in case you were thinking OMG. Ok here's the thing I have like... <div id="steps"> <div id="stepone"> </div> <div id="steptwo"> </div> <div id="stepthree"> </div> </div> then the CSS for those divs is... #steps { background: #2C2C2C; width: 900px; height: 46px; margin: 0; padding: 0; } #stepone { background: #2C2C2C url(img/orange/stepone.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } #steptwo { background: #2C2C2C url(img/orange/steptwo.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } #stepthree { background: #2C2C2C url(img/orange/stepthree.png) left no-repeat; width: 300px; height: 46px; float: left; margin: 0; padding: 0; } Now I need to make it so steps 1, 2 and 3 each are a link...the way I have done this is buy making a transparent .png called invisible and doing the following: <div id="steps"> <div id="stepone"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> <div id="steptwo"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> <div id="stepthree"> <a href="#"><img src="img/orange/invisible.png" /></a> </div> </div> While this works perfectly in modern browsers I know there are quite a few that don't support transparent pngs...what can I do. Quote Link to comment Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 Since you're setting a width and height for each div, give each link a class and set the width and height on it as well. Then, you won't have to use a transparent image and you'll only need a Why can't you just use the image in the link instead of putting it in the background? Quote Link to comment Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 Because I have different styles like orange, red, blue etc. and each one has a different css file and each css file has a different image so I need to keep most of the images in the css. Quote Link to comment Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 The thing with the class with the height and the didn't work... <div id="steps"> <div id="stepone"> <a href="#" class="steps"> </a> </div> <div id="steptwo"> <a href="#" class="steps"> </a> </div> <div id="stepthree"> <a href="#" class="steps"> </a> </div> </div> a.steps:link { height: 46px; width: 300px; margin: 0; padding: 0; } Only the area with the works as a link. Quote Link to comment Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 You could "hack" it like this. <html> <head> <style> #imginbg { background: url('magazine_ad.png'); width: 225px; height: 228px; border: 1px solid black; } #imginbg a.foo { padding-right: 222px; padding-bottom: 210px; text-decoration: none; } </style> </head> <body> <div id="imginbg"> <a class="foo" href="#"> </a> </div> </body> </html> Quote Link to comment Share on other sites More sharing options...
Aureole Posted August 1, 2007 Author Share Posted August 1, 2007 I'm not sure how that would work but I'll play around with it a bit, thanks. Quote Link to comment Share on other sites More sharing options...
soycharliente Posted August 1, 2007 Share Posted August 1, 2007 I tested it myself on a page. It works. It just makes the link area big enough to cover the image. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.