Jump to content
Stef's Coding Community
Alamo25

CSS Drop down menu problem - aligning menu items to center

Recommended Posts

Hi all

 

I'm having a bit of trouble getting a drop down menu to work.

 

URL: http://web.aanet.com.au/~natalie/victor/

 

1) Basically, I want to align all the menu headings so they are evenly spaced horizontally across. The only way I can figure to do this is to change the 'text-align' to center instead of left in the ul li class. However, this moves all the drop downs to be centered under the menu headings, giving a tabbed across look for all the drop downs when hovered over.

 

2) The width: 157, also means that menu items with smaller amounts of characters receive the same menu width, resulting in disproportionate spacing across the menu items. Is there any way to fix to achieve a similar effect that a 'distribute columns evenly' function does in a html table?

 

Your help is greatly appreciated. Cheers.

 

Code below

 

/* PART OF COMMON/STYLE.CSS FILE */

ul {

margin: 0;

padding: 0;

list-style: none;

}

ul li {

position: relative;

float:left;

width: 157;

text-align: left;

 

}

li ul {

position: absolute;

top: 23px;

display: none;

}

ul.nav li a{

display: block;

color: #FFF;

padding: 5px;

background: #000000;

margin: 0 0px;

font-size: 11px;

font-weight:bold;

text-decoration: none;

}

 

 

ul li a:hover { color: #ffffff; background: #08a9ec; text-decoration: none;}

li:hover ul, li.over ul { display: block; text-decoration: none;}

 

 

/* PART OF HTML PAGE HEAD*/

 

window.onload = function()

{

className="nav";

if (document.all&&document.getElementById)

{

navRoot =

document.getElementById(className);

for (i=0; i

{

node = navRoot.childNodes[l]; // l is really an i but forum won't let me post what it thinks is a broken italic tag

if (node.nodeName=="LI")

{

node.onmouseover=function()

{

this.className+=

"over";

}

node.onmouseout=function()

{

this.className=

this.className.replace("over", "");

}

}

}

}

}

Share this post


Link to post
Share on other sites

There are three ways to make each menu tab text look a bit better:-

 

1. Center the text with text-align: center which still keeps the same overall width and the same width of each tab, but looks a bit better than left-aligned.

 

To center all levels, change ul li { } from text-align: left; to text-align: center; which works in Firefox but IE7 shifts all the drop down boxes to the right so add a conditional comment in the head section after the main stylesheet link:-

 

You say that the dropdowns get centered too, but you can center just the top level and leave the drop down level left-aligned, it's just a question of which you prefer.

 

To leave the drop down level aligned left, make the above edits to center the top level and add this to the main stylesheet:-

li li { text-align: left; }

The top level will be centered and width 157px, the drop down levels will be left-aligned and also width 157px with the black box still directly under the top level.

 

See my version here:-

http://www.wickham43.com/forumposts/alamovictor090403.html

and the css file:-

http://www.wickham43.com/forumposts/alamostyle090403.css

 

2. If you delete all the widths, ul li style in your case, and give the style side padding or side margin, this gives even spacing to the top level but causes difficulties for positioning the drop down levels as they don't know how wide the top level is, so you can only position them from the left of the top level box and they may be wider which looks odd. Also, when a viewer increases text size it makes the top level wider and probably sends one or two tabs down to a lower row. This method isn't very successful.

 

See my version here:-

http://www.wickham43.com/forumposts/alamovictor090403-2.html

CSS:-

http://www.wickham43.com/forumposts/alamostyle090403-2.css

 

3. Make each tab and its drop down boxes a different width using classes.

 

See my version here:-

http://www.wickham43.com/forumposts/alamovictor090403-3.html

and the css file:-

http://www.wickham43.com/forumposts/alamostyle090403-3.css

 

There are an awful lot of errors when using the validator http://validator.w3.org/ and I haven't corrected any, but I don't think any affect the structure of the my menu versions.

 

The invisible scrollbars are not a very good idea as you need the main window scrollbars if the window resolution is too small for the whole menu width. I found out that the scrollbars are there, but you couldn't see them, so I made them light grey. The scrollbars to the div #maincontent are not sufficient in a small window.

Edited by Wickham

Share this post


Link to post
Share on other sites

Thanks so much for your help Wickham.

 

Re. the maincontent css setup I had before, I know it was a disaster. I have rectified this by introducing a new style that makes use of the browsers scrollbars. In terms of the menu, I chose the #3 option you suggested.

 

http://web.aanet.com.au/~natalie/victor/

 

The only problems now

1) the gap between the menu and top header area producing white space.

2) the black menu is not extending to the full width, resulting in the white space on right hand side. The page width is now 950px, I adjusted your 'widthe' class down by 10px, to accomodate for this.

Share this post


Link to post
Share on other sites

Remove the margin on the

tag wrapping the Navbar (or replace it with a div?) and remove the vspace from the image (or the table cell containing the image) to get the navbar up into the header.

Also, there is an empty

tag (that the validator won't like) in the top of the content area.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...