Wuhtzu Posted February 3, 2008 Share Posted February 3, 2008 Hey Please have a look at this site / page: http://www.threadless.com/product/1134/Interloper_From_Beyond_The_Heavens. In the middle where they list sizes ("S BUY!") they have a image ("S", "M", "L" ect.) and beside that image they have the text "BUY!". How do they achieve that? This is what I have so far: http://www.wuhtzu.dk/sandbox/css/css_how_to.html html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- Meta information --> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <!-- Title --> <title>How to?</title> <!-- Styles --> <link href="master.css" rel="stylesheet" type="text/css" /> </head> <body> <table> <tr> <td>Dreng:</td> <td><a class="buy" href="#"><img alt="S" src="small.png" /> Læg i kurv</a></td> <td><a class="buy" href="#"><img alt="M" src="medium.png" /> Læg i kurv</a></td> <td><a class="buy" href="#"><img alt="L" src="large.png" /> Læg i kurv</a></td> </tr> <tr> <td>Pige:</td> <td><a class="buy" href="#"><img alt="S" src="small.png" /> Læg i kurv</a></td> <td><a class="buy" href="#"><img alt="M" src="medium.png" /> Læg i kurv</a></td> <td><a class="buy" href="#"><img alt="L" src="large.png" /> Læg i kurv</a></td> </tr> </table> </body> </html> css: img { border: 0; } .buy { margin-right: 25px; display: block; border: 1px solid lime; height: 28px; } Right now my text drops below the image and is not at all centered vertically beside it. The lime border is there just to outline the <a> element. I have spend literally hours look at threadless.com's source through Firebug and I can't see what I'm missing. Can you either see what I do different or purpose a way to achieve the same result? Best regards Wuhtzu Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted February 3, 2008 Share Posted February 3, 2008 The way i would do it, would be to asign a margin-top Example: margin: 0.5em 0;, given that the height of the image is 1em, it should work. Btw, no need to use images for that; A much better effect, can be achived with real text, since it scale alot better then images. And as you can see, there really isent anything fancy about those images. Quote Link to comment Share on other sites More sharing options...
Wuhtzu Posted February 3, 2008 Author Share Posted February 3, 2008 Thank you for your reply BlueBoden. Which element would you assing the margin-top property to? The text is only inside a <a> element so right now I can't really assign properties to the link text directly. Regarding the use of images I agree with you - it should be doable with text and some background color. But I can't decide what element to use... just a div? <a href=""><div class="size-box">S</div>Læg i kurv</a> <a href=""><div class="size-box">M</div>Læg i kurv</a> <a href=""><div class="size-box">L</div>Læg i kurv</a> size-box { height: 1em; width: 1em; background: #363636; color: #FFFFFF; } Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 3, 2008 Share Posted February 3, 2008 Don't use a top-margin, it won't even work properly for inline elements. Firebug will show you what they are doing in 5 seconds: - Using align="left" in the image markup - Using {line-height:24px} in the css targeting the anchor Rather than using the depreciated align attribute, just use {float:left;} in the css targeting the image. Two lines of code and you're done. There is no need to be using tables. Use an unordered list instead. If you want to use text then just wrap it in a span element and remember to use the abbr attribute: <span abbr="Extra Large">XL</span> Quote Link to comment Share on other sites More sharing options...
Wuhtzu Posted February 3, 2008 Author Share Posted February 3, 2008 Don't use a top-margin, it won't even work properly for inline elements. Firebug will show you what they are doing in 5 seconds: ... I have spend literally hours look at threadless.com's source through Firebug and I can't see what I'm missing. ... Thank you bronzemonkey - I had overlooked or rather chosen to overlook the align="left" or float: left; property since I didn't think it did anything, but it made all the difference. I like your idea about the unordered list. I have also used a <span> with great success... but there is no such attribute as abbr - at least not in xhtml 1.0. What good would it do? All browsers can render <span> and even if they don't apply any styles to it the text "M" for "medium" would still appear? Quote Link to comment Share on other sites More sharing options...
bronzemonkey Posted February 3, 2008 Share Posted February 3, 2008 but there is no such attribute as abbr - at least not in xhtml 1.0. Sorry, you're totally right. Been coding tables all week, where the abbr attribute can be used in the td or th element, but you can use the abbr element instead: <span><abbr title="Extra Large">XL</abbr></span> This will let people understand what XL is an abbreviation of (if they put the cursor over it) and will help people using screen-readers. It's about improving accessibility - http://www.maxdesign.com.au/presentation/abbreviations/ 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.