Not signed in (Sign In)

SkillShare - A place to discuss Web Standards and Web Design topics

Categories

Vanilla 1.1.4 is a product of Lussumo. More Information: Documentation, Community Support.

    • CommentAuthorYubi
    • CommentTimeJun 24th 2008
     permalink
    Hello there,
    I'm new to your forum and actually have a question on a rounded corner menu I'm working on.
    I am currently building a website and have problems with finishing off the right and left ends as rounded corners.
    I have the following css and html structure:

    html:

    <div id="styletwo" class="styletwo" style="left: 18px; top: 10px; height: 30px" >
    <div>
    <ul>
    <li> <a href="Default2.aspx" >НАЧАЛО</a></li>
    <li > <a href="AboutUs.aspx" >ЗА НАС</a></li>
    <li><a href="Services.aspx" >УСЛУГИ</a> </li>
    <li ><a href="Technology.aspx" >ТЕХНОЛОГИЯ</a></li>
    <li ><a href="Gallery.aspx" >ГАЛЕРИЯ</a></li>
    <li ><a href="Training.aspx" >ОБУЧЕНИЕ</a></li>
    <li> <a href="Contact.aspx">KОНТАКТИ</a></li>


    </ul>


    </div>
    </div>

    css:

    .styletwo{position:absolute;display:block; top:10px;height:30px;font-size:11px;font-weight:bold; z-index:100; background:transparent url(YOKOweb/menu_660x32-px.gif) repeat-x top left;font-family:Verdana; left:18px; width:660px; }

    .styletwo ul{position:relative; margin:8px 4px 8px 4px;}
    .styletwo ul li{display:block;float:left;margin:50 10px 20 30;}
    .styletwo ul li a{display:block;float:left;color:#000;text-decoration:none;padding:1px 5px 0px 15px ;height:28px;}
    /* to remove default sel*/#styletwo ul li a:hover{color:#fff;background:transparent url(YOKOweb/smallmenu_mouseover_68x32-px.gif) repeat-x;margin-top:-7px; }
    #styletwo ul li a:hover .start{color:#fff;background:transparent url(YOKOweb/left_corner_menu_72x32-px.gif) repeat-x;margin-top:-7px;} /*my try at left corner
    #styletwo ul li a:hover .just {color:#fff;background:transparent url(YOKOweb/right_corner_menu_72x32-px.gif) repeat-x;margin-top:-7px;}/*my try at right corner


    I set one image to the entire length of the menu as you can see: menu_660x32-px.gif
    My problem is how to get the hover effect for the right and left end rounded corners for this menu with my images for left and right ends. I keep getting the same rectangle images for other menu pieces and not the rounded corner images. I've tried different things but have not been able to get it right.
    I would really be grateful for assistance in solving this
    • CommentAuthorParthiban
    • CommentTimeJul 15th 2008
     permalink
    Hi Yubi,

    Can you give me a dev or test link which you facing the issue. Because it 'll be more helpful to figure out the problem easily.

    Thanks.
    Parthiban
    • CommentAuthorpixelalb
    • CommentTimeJul 18th 2008
     permalink
    Privet yubi.

    You may want to use a rounded cnr image as right background for the UL and a rounded cnr image for the .first link on hover ;)
Add your comments
    Username Password
  • Format comments as (Help)