Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post

    Thumbs up Help on a nav bar menu please

    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
    css:
    Code:
    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
    Code:
    <!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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    You may add an extra class/id to that list-item/anchor and add a specific rume in your CSS, like
    Code:
    <li class="imp"><a href="#">Important</a></li>
    Code:
    #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
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    zoe20 (11-29-2009)

  • #3
    New Coder
    Join Date
    Feb 2009
    Posts
    78
    Thanks
    19
    Thanked 1 Time in 1 Post
    Tks a lot


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •