LI buttons with images

[9three]

Hey,

 

I'm having issues trying to setup LIs to show as buttons. Basically what I'm trying to do is show left, mid and right of an image, but the trick is to allow expand based on the text in the middle.

 

One of my problems is that the image has a border around it and gradient. Does anyone have a method of accomplishing this? or know of a place where I can read up on it. I havent really found anything useful on the net. Most of what I found was based on having the same exact left and right images and repeat a background color in between.

 

thanks

[anatak]

I think I once wrote something similar.

I didn't end up using it so I can not give you the code.

 

Here is what I did more or less

you have a button that you divide in 3 parts

left middle and right with a graphics program

 

make the middle only a few pixels wide

 

I did it with a table

and every button was a 3 <td></td> one for left, one for middle and one for right.

you set the image as the background of the <td></td> and set it on repeat for the middle part

 

if your text becomes long it will just add an extra middle background image (this is why you have to use only a few pixels wide image for the middle part.

 

I am sure there is a much better way to do this with divs but at that time I was using tables for layout for everything (I know it is a mortal sin)

 

hope this is what you are looking for

anatak

[anatak]

I found the code again it is not complete

you still have to make the left and right part but this will (hopefully) help you in the right direction

/*test BUTTON fluid width*/
a.test_button, a.test_buttonDis {
display: block;
background-color: transparent;
background-image: url(graphic/button/test_button_background.gif);
background-repeat: repeat;
/*width: 200px;*/
height: 28px;
margin: 0px auto;
padding: 5px 0 0 0;
text-align: center;
font-size: 100%;
font-weight: bold;
text-decoration: none;
}
a.test_button:link, a.test_button:visited {
color: #002577;
}
a.test_button:hover, a.test_button:active {
background-position: 0 -36px;
color: #FF7200;
}

a.test_buttonDis:link, a.test_buttonDis:visited, a.test_buttonDis:hover, a.test_buttonDis:active {
background-position: 0 -72px;
color: #5F5F5F !important;
cursor: default;
}

[9three]

thanks ill give it a try.