Выбранный элемент в элементе управления asp меню, чтобы выглядеть как кнопка с закругленными углами, используя CSS2.1? - PullRequest
Новая
       2

Выбранный элемент в элементе управления asp меню, чтобы выглядеть как кнопка с закругленными углами, используя CSS2.1?

0 голосов
/ 28 сентября 2011

Я пытаюсь сделать выбранный пункт меню похожим на кнопку с закругленными углами, используя изображения и CSS2.1. 

.StaticSelectedStyle a
{
    display: block;
    padding-left:5px;
    height:35px;    
    width: 100%;    
    background: transparent url('../images/button_right.png') no-repeat scroll right top;    
    float:left;
    /*FONT*/    
    color: White;
    text-align:center;  
    vertical-align:middle;
    line-height: 32px;
}    
.StaticSelectedStyle
{
    display: block;
    height:35px;
    background: transparent url('../images/button_left.png') no-repeat;
    text-align:center;
    vertical-align:middle;
}

Изображение (button_right.png) не отображается, и в то же время цвет текста отображается белым, как указано в том же классе CSS. Есть идеи, почему это может происходить?

Вот HTML. В моем меню 6 пунктов: Рим, Омнея, Исмаил, Сиам, Мишель, Невин, Карим и Энги. Выбранный предмет - Невин: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>
    <link href="CSS/menu_style.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        .Menu1_0 { background-color:white;visibility: hidden; display: none; position: absolute; left: 0px; top: 0px; }
        .Menu1_1 { text-decoration: none; }
        .Menu1_2 { }
        .Menu1_3 { border-style: none; }
        .Menu1_4 { }
        .Menu1_5 { }
        .Menu1_6 { border-style: none; }
        .Menu1_7 { }
        .Menu1_8 { border-style: none; }
        .Menu1_9 { }
    </style>
</head>
<body bgcolor="black">
    <form name="form1" method="post" action="default.aspx" id="form1">
    <table id="Menu1" class="menunav StaticMenuStyle Menu1_5 Menu1_2" cellpadding="0" cellspacing="0" border="0">
        <tr>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" >
                <table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Reem</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
            <td style="width: 10px;"></td>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n1">
                <table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Omneya Ismail Siam</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
            <td style="width: 10px;"></td>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n2">
                <table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="javascript:__doPostBack('Menu1','Michel')" style="border-style: none; font-size: 1em;">Michel</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
            <td style="width: 10px;"></td>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n3">
                <table class="StaticMenuItemStyle Menu1_4 StaticSelectedStyle Menu1_7" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3 StaticSelectedStyle Menu1_6" href="#" style="border-style: none; font-size: 1em;">Nevine</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
            <td style="width: 10px;"></td>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n4">
                <table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Karim</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
            <td style="width: 10px;"></td>
            <td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="Menu1n5">
                <table class="StaticMenuItemStyle Menu1_4" cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr>
                        <td style="white-space: nowrap;"><a class="Menu1_1 StaticMenuItemStyle Menu1_3" href="#" style="border-style: none; font-size: 1em;">Engy</a></td>
                    </tr>
                </table>
            </td>
            <td style="width: 10px;"></td>
        </tr>
    </table>
    <a id="Menu1_SkipLink"></a></div>
    <script type="text/javascript"> 
        //<![CDATA[
        var Menu1_Data = new Object();
        Menu1_Data.disappearAfter = 500;
        Menu1_Data.horizontalOffset = 0;
        Menu1_Data.verticalOffset = 0;
        Menu1_Data.staticHoverClass = 'Menu1_9 StaticHoverStyle';
        Menu1_Data.staticHoverHyperLinkClass = 'Menu1_8 StaticHoverStyle';
        //]]>
    </script>
    </form>
</body>
</html>
...