jasonc Posted November 16, 2008 Share Posted November 16, 2008 below is the code i am using at the moment for my menu buttons but now i have buttons that need two lines to display the menu items name. so need to have the height of button be automatic to the content of the TD it is in. to have the image stretch to the full height of the TD how would i do this? td.menubutton{ background: url(images/menubutton.gif); background-repeat: no-repeat; background-position: center center; text-align: center; } [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted November 16, 2008 Share Posted November 16, 2008 You can't normally scratch a background-image, I've shown a way to fake this using Absolute Positioning, you can find the technique on given link, its up to you to figure out how to implement it in your case. Generally it wouldn't be hard if you have some basic understanding of position based layouts. Note however that this won't work in IE6, and it may disable normal right-click functionality. You might also be able to use some additional divs, and simply cut out the cornors and float each of them, the middle section of your button would then contain the text of your button. Its also generally considered a bad-practice to scratch images by percentages, imagne how things will look on larger screen resolutions. But the result is about the same as if those users simply used the build-in zoom function in their browser on a fully pixel-based layout. Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted November 16, 2008 Share Posted November 16, 2008 Forget about that I just tried it on li elements, and it didn't work as intended. Basically it just scratched the background beyond the edges of the elements, which is kinda wired. We can only hope that future properties will allow us to do the real thing. This technique is useless as-is, so no reason for me to keep it there. :'( Quote Link to comment Share on other sites More sharing options...
SuperBlue Posted November 16, 2008 Share Posted November 16, 2008 I know this isn't really a solution, since it only allows for limited hover effects on your links. You may however want to check out the below technique, i simply used an unordered list instead of the table you are using. Markup: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head> <title>CSS Rounded Corners Example</title> <style type="text/css"> ul li { width: 120px; list-style-type: none; margin: 0; padding: 0; border: 1px solid black; } ul li a { clear:both; display:block; padding-left: 1em; } </style> </head> <body> <ul> <li> <img src="LeftT.png" alt="" style="float:left;margin-top: -1px;margin-left: -1px;"><img src="RightT.png" alt="" style="float:right;margin-top: -1px;margin-right: -1px;"> <a href="" title="Example Link">Example Link</a> <img src="LeftB.png" alt="" style="float:left;margin-bottom: -1px;margin-left: -1px;"><img src="RightB.png" alt="" style="float:right;margin-bottom: -1px;margin-right: -1px;"> <span style="clear:both;"></span> </li> </ul> </body> </html> Same technique could be applied to division elements, while its rather limited, it is one of the techniques which requires the less markup. The images i used are attached to this post. [attachment deleted by admin] 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.