Solved

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

Posted on 2009-06-27
6
2,010 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
Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
how to debug htl and js pages 8 39
Css regex 6 39
Search Item in Table 2 23
Bootstrap 3 - Style a dropdown 1 15
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
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 customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

821 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