Solved

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

Posted on 2009-06-27
6
1,976 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
Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now