Solved

how to center horizontal nav bar and make my dropdown menu stay open (stickyness)

Posted on 2009-06-27
6
2,000 Views
Last Modified: 2012-05-07
I am having trouble centering a horizontal css navigation bar.  I tried to wrap it in a .table with margin set to 0 and auto, I tried applying text-align to the li's, but it didn't work.
Also, the dropdown won't stay down in ie7 and Firefox, although I have success in ie6 (it appears to struggle a bit in ie6, but maybe that is my old touchpad! - I actually seemed to make it work in ie6 by reducing the top padding of the dropdown so my "hotspot" was "closer" - thought that would work in ie7 and Firefox, but to no avail. The site uses server side includes to work (my navigation is included on a txt page).  My practice page is at www.helpingservices.org/PRACTICE.html (I included below my css code - please excuse my notes in progress....)
/* Navbar division */
 #navbar{
	/* Set to any width */
    /* border:dashed 1px red; */ 
         /* Use any background color/image you like */
          background-image:url(Buttons/button_gradient_nav.jpg) repeat-x;
	/* Use any fonts you like */
         font-family: Verdana, Geneva, Arial, Helvitica, Sans-Serif;
	/* Same as simple navbar, but smaller font size here */
         font-size:80%;
	color:#fff; /* white */
	/* Use any height you like, but match to link height */
         height:1.5em;
	margin-left:0px; /* WAS 10 PX- REMOVED BECAUSE IT CREATED WHITE SPACE */
	background-color: #000000;
	text-align:center; /*added to center contents of navbar, will then apply to child ul margin-left and margin right to center */
    }
    
    /* Remove bullets from unordered list */
    #navbar ul{
        list-style-type:none;	
		 background-image:url("Buttons/button_gradient_nav.jpg");	
		/* padding-left:3em;
		padding-right:3em; /* ORIGINALLY COMMENTED OUT THE PADDING, BECAUSE IT SCREWS UP THE DROPDOWNS ALIGNING WITH THE PARENT NAVIGATION BUTTON */
    }
    
   /* List items in the navbar */ 
#navbar li{ 
  float:left; 
  /* Required for drop-down menus */ 
  position:relative; 
} 
 
#navbar a,
#navbar a:link,
#navbar a:visited {
text-decoration:none;
font-family: Verdana, Geneva, Sans-Serif;
 background-image:url("Buttons/button_gradient_nav.jpg");
	background-repeat:repeat-x;
font-size:80%;
color:#fff;
display:block;
height:1.5em;
width:auto; _width:9.5em;/* WAS 6 EM, NOT ENOUGH FOR TEXT, MAKING IT AUTO ALLOWED THE LONGER LINKS TO FIT - 6/24/09 IE6 doesn't respond to auto */
  border-right: solid 1px #ddd; 
  line-height:1.5em; /* WAS 2EM, CHANGED TO 1.5EM */
  text-align:center; 
  outline-style:none; 
  padding-left:.5em;
  padding-right:.5em;
  }
 
/* Navbar hover, active, and current page links */ 
#navbar a:hover, 
#navbar a:active, 
#navbar li.selected a:link, 
#navbar li.selected a:visited{ 
  background:#ddd url("Buttons/button_gradient_nav.jpg"); repeat-x center; 
  color:#000; 
} 
 
/* Drop-down menu styles */ 
/* Applies to drop-down menus in navbar */ 
#navbar li ul{ 
  position:absolute; 
  z-index:100; 
  visibility:hidden; 
  line-height:1.5em;
} 
 
/* Make drop-down visible on navbar hover */ 
#navbar li:hover ul, 
#navbar li a:hover ul{ /* IE6 hack */ 
  visibility:visible; 
  top:1.4em; 
  left:0; 
} 
 
 
/* Applies to links on the drop-down menu */ 
#navbar li:hover ul li a, 
#navbar li a:hover ul li a{ /* IE6 hack */ 
  background:#ccc; /* Removes background image */ 
  color:#000; 
  text-align:left; 
  display:block; 
  width:10em; 
  padding:.1em 0 0 1em; /* padding more than .4em prevents the dropdown from "sticking down" and allowing the user to hover over and select from dropdown menu in IE6 */
  /* height:auto; */
} 
 
/* Hover on drop-down menu links */ 
#navbar li:hover ul li a:hover, 
#navbar li a:hover ul li a:hover{ /* IE6 hack */ 
  background: #aaa; 
  color:#000; 
} 
 
/* IE6 hack applies to its table drop-down */ 
#navbar table { 
margin:-1px;
  border-collapse:collapse; 
  position:absolute; 
 top:-.199em; /* WAS 0.5 BUT CHANGED TO O.1 BECAUSE THERE WAS A GAP FOR THE DROPDOWN MENU 6/24/09 */
  left:0; 
  z-index:100; 
  font-size:14px; /* font size has to be defined inside the table for IE6 hack, otherwise dropdown shrinks */
  }

Open in new window

0
Comment
Question by:SweetIowa
  • 4
  • 2
6 Comments
 
LVL 25

Accepted Solution

by:
Rouchie earned 125 total points
ID: 24727955
Hi

Because of the amount of code hacks in your example I would recommend abandoning your approach and using an already-proven method that works in all major browsers.  This way as IE updates to newer versions you won't continuously have to rehack the code.

The 'suckerfish' approach is the most widely recommended as it is standards compliant and requires hardly any coding to get working.  I use it in all my designs as it is vitually future-proof:  http://htmldog.com/articles/suckerfish/dropdowns/
0
 

Author Comment

by:SweetIowa
ID: 24728283
I've come across that solution frequently.  I was hoping to do a pure css solution... I thought I was so close!  I am going to investigate this and come back in a few hours - Renee
0
 
LVL 25

Expert Comment

by:Rouchie
ID: 24728504
There is no pure CSS solution unfortunately because IE6 is so bad at CSS, and some people are even still using IE5
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

Author Comment

by:SweetIowa
ID: 24729138
...still trying to get this all to work.....Sweet Iowa
0
 

Author Comment

by:SweetIowa
ID: 24735229
Well, my Dreamweaver crashed, so I am sidetracked with that problem.  The sucker fish menu is working, but I had  a bit of a hangup with it with IE7.  It's working now, I just need to style it.  
0
 

Author Comment

by:SweetIowa
ID: 24735259
I should say it working on a DIFFERENT test page than what I have above - if you go there, it probably still looks like a problem!  -Sweet Iowa
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

773 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question