locked
Horizontal menu - curved tab look with 2 background images RRS feed

  • Question

  • User-1184487261 posted

    I've successfully implemented a horizontal menu with the CSS Friendly Adapter using an extended version of the SimpleEntertainmentMenu sample CSS provided with the toolkit, but I can't yet figure out how to achieve the curved tab look using right and left images. I've learned you can only use one background image per rule, and I've see other example of creating another rule for the other image so to achieve the right and left curves of each tab. Does anybody know how to extend the SimpleEntertainmentMenu sample CSS file to create a curved tab effect? The CSS snipet below is my attempt at this, but only the first image loads, not the second, so it only the right side of each of the tabs are curved. Exactly where do I put the background image attribute for the left side tab image to get the left side curved effect? Is it even possible?

    Thanks.

    _____ CSS (snipet) - only one image loading _____ 
    .
    .
    .
    .SimpleEntertainmentMenu
    a
    {
    background: #666666 url(tab_right.gif) right top no-repeat;
    color: #f0f0f0;
    padding: 4px 2px 4px 8px;
    }
    .SimpleEntertainmentMenu span
    {
    background: #666666 url(tab_left.gif) left top no-repeat;
    color: #f0f0f0;
    padding: 4px 2px 4px 8px;
    }
    .
    .
    .

    Friday, September 28, 2007 4:42 PM

All replies

  • User-546006562 posted

    The sliding doors technique for tabbed menus can be applied to your menu.

     Take a look at the details on A List Apart:

    http://www.alistapart.com/articles/slidingdoors/

    http://www.alistapart.com/articles/slidingdoors2/

     

    Thursday, October 4, 2007 3:09 PM