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 2 of 2
  1. #1
    New Coder
    Join Date
    Jul 2009
    Posts
    59
    Thanks
    10
    Thanked 0 Times in 0 Posts

    Thumbs up Help me Fix horizontal Nav bar

    Hi respected css gurus am customizing a java script and css based drop down menu and and am almost done and i need some experts help to sort out some problems. Am enclosing the css , xtml and the live demo of the page as well.
    i want some margins after each button i tried to edit the css with out success and i want to add icons before the each name of the buttons and also on the drop down buttons like this . Marked with red arrows




    This is the css :
    Code:
     .chromestyle{
    	width: 1024px;
    	font-weight: bold;
    	margin-right: auto;
    	margin-left: auto;
    }
    
    .chromestyle:after{ /*Add margin between menu and rest of content in Firefox*/
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
    }
    
    .chromestyle ul{
    	border: 1px solid #BBB;
    	width: 100%;
    	background: url(nav_bg.png) repeat-x center center; /*THEME CHANGE HERE*/
    	padding: 4px 0;
    	margin: 0;
    	text-align: center;
    	font: 12px Verdana, Arial, Helvetica, sans-serif;
    }
    
    .chromestyle ul li{
    display: inline;
    }
    
    .chromestyle ul li a{
    	color: #494949;
    	padding: 4px 7px;
    	margin: 0;
    	text-decoration: none;
    	border-right: 1px solid #DADADA;
    }
    
    .chromestyle ul li a:hover, .chromestyle ul li a.selected{ /*script dynamically adds a class of "selected" to the current active menu item*/
    	background: url(hover.png) repeat-x center center; /*THEME CHANGE HERE*/
    	color: #FFFFFF;
    }
    
    /* ######### Style for Drop Down Menu ######### */
    
    .dropmenudiv{
    	position:absolute;
    	top: 0;
    	border: 1px solid #BBB; /*THEME CHANGE HERE*/
    	border-bottom-width: 0;
    	font:normal 12px/18px Verdana, Arial, Helvetica, sans-serif;
    	z-index:100;
    	background-color: white;
    	width: 200px;
    	visibility: hidden;
    }
    
    
    .dropmenudiv a{
    width: auto;
    display: block;
    text-indent: 3px;
    border-bottom: 1px solid #BBB; /*THEME CHANGE HERE*/
    padding: 2px 0;
    text-decoration: none;
    font-weight: bold;
    color: black;
    }
    
    * html .dropmenudiv a{ /*IE only hack*/
    width: 100%;
    }
    
    .dropmenudiv a:hover{ /*THEME CHANGE HERE*/
    background-color: #F0F0F0;
    }
    This is the Mark Up :

    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" lang="en" xml:lang="en">
    <head>
    <title>Chrome CSS Drop Down Menu</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
    
    <script type="text/javascript" src="chromejs/chrome.js">
    
    
    </script>
    
    </head>
    
    <body>
    
    
    
    <div class="chromestyle" id="chromemenu">
    <ul>
    <li><a href="#">Button-1</a></li>
    <li><a href="#">Button-2</a></li>
    <li><a href="#">Button-3</a></li>
    <li><a href="#" rel="dropmenu1">Button-4</a></li>
    <li><a href="#" rel="dropmenu2">Button-5</a></li>
    <li><a href="#" rel="dropmenu3">Button-6</a></li>	
    </ul>
    </div>
    
    <!--1st drop down menu -->                                                   
    <div id="dropmenu1" class="dropmenudiv">
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    <a href="#">Link-4</a>
    <a href="#">Link-5</a>
    </div>
    
    
    <!--2nd drop down menu -->                                                
    <div id="dropmenu2" class="dropmenudiv" style="width: 150px;">
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    </div>
    
    <!--3rd drop down menu -->                                                   
    <div id="dropmenu3" class="dropmenudiv" style="width: 150px;">
    <a href="#">Link-1</a>
    <a href="#">Link-2</a>
    <a href="#">Link-3</a>
    </div>
    
    
    <script type="text/javascript">
    
    cssdropdown.startchrome("chromemenu")
    
    </script>
    <p>&nbsp;</p>
    </body>
    
    </html>
    This is the Live Demo Of the page
    Last edited by vijetha; 08-11-2010 at 08:17 PM.

  • #2
    New Coder
    Join Date
    Aug 2009
    Posts
    94
    Thanks
    0
    Thanked 16 Times in 16 Posts
    If you want margins between buttons, then change the .chromestyle ul li {} css class.

    Code:
    .chromestyle ul li{
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
    }
    change the margin value as per your need.

    To display images before the button label:
    Code:
    <li><a href="#"><img src = "test.gif" /> &nbsp; Button-1</a></li>


  •  

    Posting Permissions

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