Alamo25 Posted April 3, 2009 Report Share Posted April 3, 2009 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", ""); } } } } } Quote Link to comment Share on other sites More sharing options...
PicnicTutorials Posted April 3, 2009 Report Share Posted April 3, 2009 (edited) Hi, You need a doctype ya-know? And it's table based, so I can't help you there. But if you want to go the way of the div, then this is how I would do it. Edited April 3, 2009 by Eric Quote Link to comment Share on other sites More sharing options...
Wickham Posted April 3, 2009 Report Share Posted April 3, 2009 (edited) 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 April 3, 2009 by Wickham Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted April 4, 2009 Author Report Share Posted April 4, 2009 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. Quote Link to comment Share on other sites More sharing options...
jlhaslip Posted April 4, 2009 Report Share Posted April 4, 2009 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. Quote Link to comment Share on other sites More sharing options...
Alamo25 Posted April 4, 2009 Author Report Share Posted April 4, 2009 Cheers mate! Thats what the problem was. Legend. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.