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 6 of 6
  1. #1
    Regular Coder
    Join Date
    Feb 2008
    Posts
    220
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Help with a navigation menu

    I have this inline code and some CSS code for a navigation menu (see attached image. In order to move the link names to the right, I had to add many blank boxes on the left. And I had to have some text in those boxes to keeo the height, so I put an l in each one. Can you help me remove the l's, or help me put one long blank box to the left of the nav menu names, please?

    inline page code:
    Code:
    <div id="menuh-container">
    <div id="menuh">
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>						
    <li><a href="./index.htm">l</a>
    </ul>
    <ul>
    <li><a href="./index.htm">l</a>
    </ul>
    
    <ul>
    <li><a href="./index.htm">home</a>
    </ul>
    <ul>
    <li><a href="./faq.htm">faq</a>
    </ul>
    <ul>
    <li><a href="./register.htm">register</a>
    </ul>
    <ul>
    <li><a href="[var.login_out_link]">[var.login_out]</a>
    </ul>
    <ul>
    <li><a href="./upload.htm">upload</a>
    </ul>
    <ul>
    <li><a href="page.php?page=9">search</a>
    </ul>
    </div>
    </div>CSS code:
    CSS code:

    Code:
    #menuh-container
    	{
    	/*position: absolute;*/
    	position: float;
    	top: 7em;     /* verical position (see canner group) */
    	left: 9em;   /* horizontal position (see canner group) */
    	}
    
    #menuh
    	{
    	font-size: 12px;
    	font-family: arial, helvetica, sans-serif;
    	width:100%;
    	float:right;
    	margin:0em;
    	margin-top: .5em;
    	}
    		
    #menuh a
    	{
    	text-align: left;
    	display:block;
    	border: 1px solid rgb(128, 0, 0);
    	white-space:nowrap;
    	margin:0;
    	padding: 0.3em;
    	}
    	
    #menuh a:link, #menuh a:visited, #menuh a:active	/* menu at rest */
    	{
    	color: white;
    	background-color: rgb(128, 0, 0);
    	text-decoration:none;
    	}
    	
    #menuh a:hover	/* menu at mouse-over  */
    	{
    	color:white;
    	background-color: #b22323;
    	text-decoration:none;
    	}	
    	
    #menuh a.top_parent, #menuh a.top_parent:hover  /* attaches down-arrow to all top-parents */
    	{
    	background-image: url(images/navdown_white.gif);
    	background-position: right center;
    	background-repeat: no-repeat;
    	}
    	
    #menuh a.parent, #menuh a.parent:hover 	/* attaches side-arrow to all parents */
    	{
    	background-image: url(images/nav_white.gif);
    	background-position: right center;
    	background-repeat: no-repeat;
    	}
    
    #menuh ul
    	{
    	list-style:none;
    	margin:0;
    	padding:0;
    	float:left;
    	width:6.2em;	/* width of all menu boxes was - 9 */
    	}
    
    #menuh li
    	{
    	position:relative;
        min-height: 1px; 			
        vertical-align: bottom;
    	}
    
    #menuh ul ul
    	{
    	position:absolute;
    	z-index:500;
    	top:auto;
    	display:none;
    	padding: 1em;
    	margin:-1em 0 0 -1em;
    	}
    
    #menuh ul ul ul
    	{
    	top:0;
    	left:100%;
    	}
    
    div#menuh li:hover
    	{
    	cursor:pointer;
    	z-index:100;
    	}
    
    div#menuh li:hover ul ul,
    div#menuh li li:hover ul ul,
    div#menuh li li li:hover ul ul,
    div#menuh li li li li:hover ul ul
    {display:none;}
    
    div#menuh li:hover ul,
    div#menuh li li:hover ul,
    div#menuh li li li:hover ul,
    div#menuh li li li li:hover ul
    {display:block;}Attached Images

  • #2
    New Coder
    Join Date
    Jun 2009
    Location
    Merced
    Posts
    36
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Hopefully this will work...

    Try this for the css code:

    Code:
    .menuh{
    font-size: 12px;
    font-family: arial, helvetica, sans-serif;
    width: 100%;
    background-color: rgb(128, 0, 0);
    }
    
    .menuh ul{
    padding: 6px 0px 7px 0px; 
    margin: 0;
    text-align: right;
    }
    
    .menuh ul li{
    display: inline;
    }
    
    .menuh ul li a{
    color: white;
    padding: 6px 3px 4px 3px;
    margin-right: 20px;
    text-decoration: none;
    }
    
    .menuh ul li a:hover, .menuh ul li a.selected{
    color:white;
    background-color: #b22323;
    text-decoration:none;
    }
    and this for the menu html:

    Code:
    <div class="menuh">
    <ul>
    <li><a href="./index.htm">home</a></li>
    <li><a href="./faq.htm">faq</a></li>
    <li><a href="./register.htm">register</a></li>
    <li><a href="[var.login_out_link]">[var.login_out]</a></li>
    <li><a href="./upload.htm">upload</a></li>
    <li><a href="page.php?page=9">search</a></li>
    </ul>
    </div>

  • #3
    Regular Coder
    Join Date
    Feb 2008
    Posts
    220
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Thanks

    Thanks, that works exactly as I'd hoped, with a lot less coding. Thank you much.

    When I select a link name on the nev menu, the background changes color tightly around the text. Is there any way to exapnd this background color change so the background changes color a little wider than each text word?

    thanks again
    Last edited by chrisjchrisj; 06-15-2009 at 06:59 PM.

  • #4
    New Coder
    Join Date
    Jun 2009
    Location
    Merced
    Posts
    36
    Thanks
    0
    Thanked 2 Times in 2 Posts
    sure, you can change the right and left padding in the ul li a{} section so when you hover over the text it will also include the padded area.

  • #5
    Regular Coder
    Join Date
    Feb 2008
    Posts
    220
    Thanks
    3
    Thanked 0 Times in 0 Posts

    thanks

    Thanks again. greatly appreciated.
    Would I be asking too much if I asked how I could make the nav bar have rounded corners?

    Thanks again.

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

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