3 replies [Last post]
fire.walk.with.me
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2004-11-10
Posts: 2
Points: 0

Hello there,

As you can see i'm new here. Well, here's what i'm trying to do.... (and can't do, of course Sad )

I've got 3 images:

And as you can notice i want to join them together on the same line, so they can look like a button.
So here's my first approach (and the only one for now):

Using a list , altering the display property to inline and using each image as a background for the <li>'s . Sound pretty, so here's my CSS code:

ul {
			list-style-type: none;
		}
		
		ul li {
			display: inline;
			
		}
		
		.left {
			background-image: url(ButtonLeftMargin.png);
			background-repeat: no-repeat;
		}
		
		
		.right {
			background-image: url(ButtonRightMargin.png);
			background-repeat: no-repeat;
		}
	
		.text {
			background-image: url(ButtonText.png);
			background-repeat: repeat-x;
		}		

Ok, now my HTML (the part that is relevant here):

<ul>
		<li class="left">a</li>
		
		<li class="text">basdad</li>
		
		<li class="right">c</li>
	</ul>

And now, here's what i get:

As you can see, there are two problems here.

One: The little space between the "left" and the "text".
Solution: A simple margin adjustement should do it.

Two (THE BIG PROBLEM): The background gets cut in half!
Solution: Well.. tell me!

I've tried to change the height of the elements li, but it doesn't have effect. I've tried another zillion of things, and i can't manage to do it.

If any of you could help me, that would be great.

Thanks!!

Tongue

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 7 years 26 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Help in creating a button! HELP HELP

Everything you'll ever need to know about tabs (works for buttons too) > http://www.alistapart.com/articles/slidingdoors/

Life's a b*tch and then you die!

fire.walk.with.me
Offline
newbie
Last seen: 16 years 10 weeks ago
Joined: 2004-11-10
Posts: 2
Points: 0

Help in creating a button! HELP HELP

I've managed a solution using tables...

CSS:

                 .left {
                        background-image: url(BotaoMargemEsquerda.png);
                        background-repeat: no-repeat;
                        width: 6px;
                }


                .right {
                        background-image: url(BotaoMargemDireita.png);
                        background-repeat: no-repeat;
                        width: 9px;
                }

                .text {
                        background-image: url(BotaoCentro.png);
                        background-repeat: repeat-x;
                        vertical-align: middle;
                }

HTML:

<table cellpadding=0 cellspacing=0 border=0>
         <tr style="height: 40px;">
                <td class="left"></td>
                <td class="text">aszxczxcasdasdd</td>
                <td class="right"></td>
         </tr>
</table>

Not properly a pretty one, since i hate tables.
Using the solution you have suggested i would have to use and extra div, but it would be more elegant though. (ALA rocks!)

Thanks!

P.S: oh, if you want to see the result HERE!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 43 weeks 6 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Help in creating a button! HELP HELP

You don't need tables. It's only showing half the bg image because the text isn't big enough. Give the list items a height equal to the image height and it should show the whole button.

Verschwindende wrote:
  • CSS doesn't make pies