...

View Full Version : Help on a nav bar menu please



zoe20
11-28-2009, 05:10 AM
hi am making a horizontal nav bar with drop downs. and every thing working well and i need to show a a button there with more prominent ( In this case button "Important one" ) so i want to add a different background image for that specific button compared to the rest of the buttons. How to achieve this? Am also enclosing the Live demo of the page and also the css and xhtml. Plz help me solve this problem.

regards
zoe

Live demo o the page:
Live Demo (http://hook4adesign.com/test/all.htm)
css:

html,body {
background: url(../images/bg.png) repeat;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
margin: 0px;
}
#wrapper {
background:#FFFFFF url(none);
width:1024px;
margin: 0 auto;
height: 600px;
}
#header{
background: url(../images/top%20header.png) no-repeat;
height: 120px;
width: 1024px;
}
#logo{
background: no-repeat;
width: 478px;
height: 109px;
margin-top: 8px;
margin-left: 4px;
float: left;
}

#navigation
{
width: 1024px;
margin: 0px auto 0;
background: url(../images/navbar1.png) repeat-x;
height: 40px;
padding: 0;
}
#navigation UL
{
margin: 0;
padding: 0;
background: no-repeat;
height: 40px;
float: left;
}
#navigation UL LI
{
list-style-type: none;
float: left;
position: relative;
border-left: 1px solid #875CA3;
}
#navigation UL LI A
{
padding: 8px 15px 10px;
height: 22px;
display: block;
color: #000000;
text-decoration: none;
font: bold 11px "Trebuchet MS", Arial, Helvetica, sans-serif;

}
#navigation UL LI A:hover
{
background: url(../images/hover.png) repeat-x left top;
color: #FFFFFF;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;;
text-decoration: none;
}
#navigation UL LI UL
{
position: absolute;
top: 40px;
left: -1px;
width: 220px;
visibility: hidden;
padding: 0;
margin: 0;
height: auto;
border-bottom: 1px solid #474646;
}
#navigation UL LI:hover UL
{
visibility: visible;
color: #FFFFFF;
}
#navigation UL LI UL LI
{
float: none;
position: static;
border: 1px solid #474646;
border-bottom: 0;
background: url(../images/sublibg.png);
}


HTML

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Testing</title>
<link href="css/zoe.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="wrapper">
<div id="header">
<div id="logo"><img src="images/ynmc logo.png" width="478" height="109" border="0" usemap="#Map" />
<map name="Map" id="Map"></div>
<area shape="rect" coords="3,3,136,105" href="index.htm" />
</map></div>
<div id="navigation"><ul>
<li><a href="" title="">Button-</a></li>
<li><a href="" title="">Courses</a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-1</a></li>
</ul>
</li>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-1</a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="">Button-2</a></li>
</ul>
</li>
<li><a href="" title="">Button-1 </a>
<ul>
<li><a href="" title="">Button-1</a></li>
<li><a href="" title="" target="_blank">Button-1</a></li>
</ul>
</li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Important One</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>
<li><a href="imp.htm" title="">Button-1</a> </li>

</ul>
</div>

</div>
</body>
</html>

abduraooft
11-28-2009, 08:31 AM
You may add an extra class/id to that list-item/anchor and add a specific rume in your CSS, like

<li class="imp"><a href="#">Important</a></li>

#navigation ul li.imp a {
background:transparent url(../images/anotherone.png) repeat-x scroll left top;
} See the specificity rules at http://htmldog.com/guides/cssadvanced/specificity

zoe20
11-29-2009, 09:44 AM
Tks a lot



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum