Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation Rounded button using 3 images in CSS ... please help

    I want to make a list with nice buttons that are long as the screen (compatible with more screens)....

    I will use 3 images (left , middle and right) ... something like this (of course, smaller):




    The middle part will repeat itself to "fill" the button. I want to get something like this:






    I have 2 ideas:


    1) To make an <div> with background-image:url('middle.bmp'); background-repeat:repeat-x; and in that <div> to have another 2 <div>s one with left.bmp (and placed left) and another one with right.bmp (and placed right) ....

    (tried it but can't make it work good, I only see the left image and the repeted middle one )


    2) To make an <div> containet that have 3 <div>s inside :
    one div with the left image as background (placed at the left)
    one div in the middle with the repeted middle image
    one div with the right image as background (placed at the right)



    Please help me .... also, what is better image format for the images on the web: JPG or PNG ?
    Last edited by virtual3oy; 06-21-2010 at 09:27 PM.

  • #2
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You could try the sliding doors technique for this - which only requires two, not three images.

  • #3
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Solved using an TABLE (1 row / 3 coloms)

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Always thank those CF Users who help you solve issues...
    Connecticut Web Design

  • #5
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by optimus203 View Post
    Thanks, but for what I need is good enough. Here it is (the "noise" is becouse I worked preety much at the buttons and I don't want someone simply get them by editing the image )





    Works on all screens , no matter how big or small is (no smaller than 240px )


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •