SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    SLiding Doors CSS Buttons with three images?

    Hi all,

    I am currently looking for a method to design link buttons with three images instead of two.

    Here are examples for methods with two images:

    http://www.filamentgroup.com/lab/buttonElement/
    http://www.oscaralexander.com/tutori...-with-css.html

    Is it possible to cut off the left corner as well and wrap it in another span? I have tried it, but without much success. The button sometimes breaks in FF depending on its outer containers, floats, etc.

    and in IE 6 and 7 it looks weird as well.

    Here it is:

    HTML:

    HTML Code:
    <a class="button" href="#"><span>some caption</span><span class="btn_right"></span></a>
    [css]
    .button {
    background: transparent url(../img/button_left.png) no-repeat left top;
    height: 24px;
    padding-top:6px;
    }
    a.button span.btn_right{
    background: transparent url(../img/button_right.png) no-repeat;
    height: 50px;
    margin-left: 0px!important;
    display:inline;
    }

    a.button span{
    background: transparent url(../img/button_middle.png) repeat-x;
    padding: 6px 5px;
    margin: 0px 0px 0px 8px!important;
    color: #fff;
    display:inline;
    height: 24px;
    }
    [/css]

    Attached are the images I used.

    Any help is greatly appreciated!
    Attached Files Attached Files

  2. #2
    Founder of Primal Skill Ltd. feketegy's Avatar
    Join Date
    Aug 2006
    Posts
    482
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You cannot set width to an inline element (span is inline element and a is too)
    Maybe set
    Code:
    display:block;
    to these elements or use unordered list to build up your menu (UL)

  3. #3
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hrm you mean "height" ? I set no width anywhere, just height.

  4. #4
    SitePoint Wizard
    Join Date
    May 2003
    Location
    Berlin, Germany
    Posts
    1,829
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    .button {
    height: 24px;
    padding-top:6px;
    display:block;
    }
    a.button span.btn_left{
    background:transparent url(../img/button_left.png) no-repeat left top;
    margin-left: 0px!important;
    display:block;
    width:8px;
    height:24px;
    float:left;
    }
    a.button span.btn_right{
    background: transparent url(../img/button_right.png) no-repeat;
    margin-left: 0px!important;
    display:block;
    width:8px;
    height:24px;
    float:left;
    }

    a.button span.btn_middle {
    background: transparent url(../img/button_middle.png) repeat-x;
    padding: 6px 5px;
    color: #fff;
    float:left;
    }



    with

    HTML Code:
    <a class="button" href="#"><span class="btn_left"></span><span class="btn_middle">some caption</span><span class="btn_right"></span></a>
    seems cool. testing now..


Bookmarks

Posting Permissions

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