Hi there guys!
I created a cool button in Photoshop. I didn’t want to make it very wide, doesn’t match to the layout. So basically, it’s a normal vertical menu. But with narrow image I faced a problem. If the name of button is too big then it goes vertically over the image. Looks ugly. Is there any way I could stretch the image together with text? The image doesn’t have to repeat-y though, cause it has bottom and top custom borders. Any ideas? Open to CSS3 toooo :) But of course the solution for all browsers would be much better :)
Here is my CSS:
@charset "utf-8";
/* CSS Document */
body {
background-color:#000;
font-size:12px;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
}
#wrapper {
position: relative;
width: 900px;
border:#FFF 1px solid;
margin:0 auto;
}
#submenu {
width:145px;
position:relative;
margin-left:50px;
margin-right:0px;
padding-left:0px;
top:0px;
left:0px;
float:left;
}
#submenu li {
padding:0px;
list-style:none;
margin-left:-40px;
margin-bottom:10px;
}
#submenu a {
margin-left:0px;
display:block;
background:url(images/submenu.png); /****This has to stretch with text vertically*****/
background-repeat:no-repeat;
width:143px;
height: auto; /*******doesn't work :( ****/
text-decoration:none;
font-family:Verdana, Geneva, sans-serif;
color:#FFF;
font-size:12px;
vertical-align:middle;
text-align:center;
line-height:20px;
}
#submenu a:hover {
position:relative;
top:1px;
left:1px;
text-decoration:none;
}
And HTML:
