I am trying to make my selected menu item look like a rounded corner button using images and 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;
}
The image (button_right.png) is not displayed, and at the same time ,the text color is displayed as white as indicated in the same CSS class. Any ideas why this might be happening?
Here is the HTML. My menu has 6 items: Reem, Omneya Ismail Siam, Michel, Nevine, Karim and Engy. The selected item is Nevine:
<!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','Mi开发者_运维问答chel')" 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>
![Interactive visualization of a graph in python [closed]](https://www.devze.com/res/2023/04-10/09/92d32fe8c0d22fb96bd6f6e8b7d1f457.gif)
加载中,请稍侯......
精彩评论