Connecting Tech Pros Worldwide Help | Site Map

Split button in three parts

maliksleo's Avatar
Member
 
Join Date: Feb 2009
Location: Islamabad, Pakistan
Posts: 115
#1: Jul 1 '09
Hi

i want to give the background to all of my buttons in my web. I did the following in style sheet.
Expand|Select|Wrap|Line Numbers
  1. input[type=submit] {
  2.  
  3. background-color: black; 
  4. color:White;
  5. }
but now my requirement is changed and i want to give image as background. But the problem is that the size of buttons are different. So plaese tell me that is there any mathod to break the button in three parts and give them images as background?
Please reply fast i am in hurry.

regards
maliksleo
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Jul 1 '09

re: Split button in three parts


You can't split a normal button, but if you're using an element to simulate a button you could use 3 elements instead.
maliksleo's Avatar
Member
 
Join Date: Feb 2009
Location: Islamabad, Pakistan
Posts: 115
#3: Jul 2 '09

re: Split button in three parts


Quote:

Originally Posted by acoder View Post

You can't split a normal button, but if you're using an element to simulate a button you could use 3 elements instead.

Thanks bro
actually i want to place a picture for my buttons. But the difference in their sizes and text written on it makes it impossible to place one picture. And i can not make picture of different sizes for my button. What i want is to split the picture in three parts and place it on the buttons background by setting their positions and repeatation settings but i dont know how i can do this :( if any one having any idea of it please suggest me that.

maliksleo
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Jul 2 '09

re: Split button in three parts


This is not currently possible. Safari and one or two browsers have support for multiple background images and it's part of CSS3, but it's not widely supported, so for the time being you'll have to use multiple elements with one image each.
Newbie
 
Join Date: May 2007
Location: Perth, Western Australia
Posts: 10
#5: Jul 5 '09

re: Split button in three parts


Technically, you *could* achieve what you're wanting to do by using the "button" tag instead of the "input" tag and simply including two different images on either side of text to simulate the effect of a split button, because, unlike "input" tags, "button" tags can support content beyond the simple text values displayed by their "input" counterpart. I've used this in the past when desperate to achieve such as effect. However, "button" tags are not the current standard used to create buttons and there are a number of inherit problems with such a method that will likely cause problems in the correct processing of your forms, so I'm not sure if this method would be desirable or not.
Reply