...

View Full Version : CSS Horizontal menu



soulless
05-21-2009, 07:09 PM
Hi, I'm trying to make a horizontal menu, with sub menus appearing below in a second line as well.

Now, I've managed it, but I'm having trouble with a possibility I just realized. I was wondering, how can I make the sub menus remain rather than dissapear? The problem being that if I select a menu item with few sub menus, such that they don't reach the menu when arranged beneath the list, the submenu is innaccesible (happens with menu 3).

Page is http://profytec.com.ar/test/template.php

The css used is:

*
{
border: 0;
padding: 0;
}
#menu a
{
text-decoration: none;
}

#menu li
{
display: inline;
}

#menu li:hover ul
{
display:block;
}

#menu li ul
{
display: none;
position: absolute;
}
#menu ul
{
border: solid 1px;
display:table;
margin: 0 auto;
white-space: nowrap;
}

hthought
05-22-2009, 12:10 AM
I would HIGHLY recommend to take a look at listamatic's sources for horizontal menus. A great resource, take a look at it:

http://css.maxdesign.com.au/listamatic/

bazz
05-22-2009, 01:19 AM
iseem to recall, you need to make the sub 'ul' wider so that when you move down from 'item3' you are 'on' it and so it won't let the li disappear. while building it, make the ul have a color so you can see what is happening.

bazz

soulless
05-22-2009, 02:56 AM
hthought-

Thanks. I'll add that to my growing list of resources. I have a lot of reading to catch up on.

bazz-

I've come to that conclusion as well. Got the borders set so I can see what happens. I figure I can have it working if I use set widths, but I'm trying to make it a bit more fluid rather than use fixed px widths.

bazz
05-22-2009, 04:01 AM
you can try em's or % for the units of measurement

hth

bazz

soulless
05-22-2009, 04:36 AM
I'm still working out how those work. 'em's, I mean. But thought the answer might be through there.

genherald
07-26-2009, 01:06 PM
I wonder if someone knows the answer to this - I could do with some help! I have installed a CSS horizontal menu (from javascriptkit.com) with just one level which functions perfectly with IE but refuses to display horizontally in Safari, Chrome or Firefox browsers. The appearance and functionality is correct in each case but it displays vertically in those browsers, knocking the page content down below it. I have checked and re-checked every tweak that I can think of, but it still happens. Any ideas?

Genherald.

SB65
07-26-2009, 01:28 PM
Can you give a link to your page, or failing that post your complete code?

genherald
07-26-2009, 01:53 PM
Go to www.whitelionsociety.co.uk - you will get a green "interim" screen. After the slash in the address bar enter new-index.html and you will see the main page I am working on. The relevant css file is csshorizontalmenu.css and the javascript file is csshorizontalmenu.js

Genherald

SB65
07-26-2009, 02:01 PM
In your csshorizontalmenu.css you have:


/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: center;
}

float:center is invalid and won't do anything. Make this float:left and see what that does.

genherald
07-26-2009, 02:37 PM
Done, but it doesn't make any difference.

SB65
07-26-2009, 02:40 PM
Err, are you sure?

The menu now appears horizontal to me in Chrome2, FF3.5 and Safari4. It's in two lines - you may need to reduce the width of your items to fit within your container.

genherald
07-26-2009, 02:41 PM
I take that back! It took a little time to propagate. It has reverted the menu to horizontal, but I need to change another sertting to make the menu fit again (for sone reason it has enlarged the individual tabs). I will play with it and come back again if I need to!

Many thanks for your help.

genherald
07-26-2009, 07:46 PM
Hmm, I still have a problem. The width of the total menu bar fits perfectly when displayed in IE but in the other browsers drops the last tab to the second line. If I alter the width of each tab then the bar is too short in IE. I have tried fiddling with padding but that dioesn't get me very far. Grrr. Any ideas?

SB65
07-26-2009, 08:46 PM
OK, so your fixed width is 744px, and you're trying to get 7 menu items to fit exactly. 7 * 106 = 742 with 2px over, so we need to make each menu item 106px wide including any padding and border, and sort out the extra 2px at either end.

So for your menu items try:


.horizontalcssmenu ul li a {
background:transparent url(menubg.gif) repeat-x scroll center center;
border:1px solid #174495;/*1px border all round*/
color:black;
display:block;
font-family:Tahoma;
font-size:13px;
padding:1px 0;/*no horizontal padding*/
text-align:center;/* to centre the text */
text-decoration:none;
width:104px;/* total width 106px including the 1px border each side*/
}

and then for the extra 1px on each end of the menu


.horizontalcssmenu ul {
border:1px solid #174495;
height:20px;/*necessary to give the ul some height*/
list-style-type:none;
margin:0;
padding:0;
width:742px;/*total width 744px including the 1px border each side*/
}

AND remove the inline styling from this:


<li style="border-left: 1px solid #202020;">

If I test this on your website using Firebug it's fine in Firefox, as expected, but it isn't right in IE7. On a test version however it's fine in both.

I'm pretty sure this is because you don't have a valid doctype in your html - which IE requires if it's going to display things consistently. Check this for info on doctypes (http://www.alistapart.com/articles/doctype/).

For your html try:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

at the very top of your html.

General rule of thumb is to build for Firefox, then fiddle about to get things OK in IE. If it looks OK in Firefox it's probably also OK in Chrome, Safari and Opera. If it's right in IE and wrong elsewhere, then your code is probably at fault.

genherald
07-27-2009, 09:50 AM
Thank you for your help. The single most important element is the DOCTYPE tip - it immediately resolved several quirks. The arithmetic I had right in the beginning but it just didn't add up, if you see what I mean. Neither did yours, may I say, because a little blank margin was left in the menu container to the right. However, I have tweaked the values and it now works well in all the browsers. Thanks you for pointing me in the right direction.

I use AceHTML 6 Pro as an editor and it has an internal browser. That is the one I rely on, and it always chimes with IE8 so I suppose it must be based on IE. Otherwise I have Firefox v3, which has some shortcomings, Chrome v2, in which I am rather disappointed, and Safari v4 on both my desktop PC and an Apple laptop. I don't like Mac products in general but I have to say that I find Safari to be the best browser on the Web. Making sites display properly on all the browsers is a counsel of perfection, but if they display correctly on IE and Safari then I am reasonably happy.

Thanks again.

genherald
07-27-2009, 09:51 AM
Thank you for your help. The single most important element is the DOCTYPE tip - it immediately resolved several quirks. The arithmetic I had right in the beginning but it just didn't add up, if you see what I mean. Neither did yours, may I say, because a little blank margin was left in the menu container to the right. However, I have tweaked the values and it now works well in all the browsers. Thanks you for pointing me in the right direction.

I use AceHTML 6 Pro as an editor and it has an internal browser. That is the one I rely on, and it always chimes with IE8 so I suppose it must be based on IE. Otherwise I have Firefox v3, which has some shortcomings, Chrome v2, in which I am rather disappointed, and Safari v4 on both my desktop PC and an Apple laptop. I don't like Mac products in general but I have to say that I find Safari to be the best browser on the Web. Making sites display properly on all the browsers is a counsel of perfection, but if they display correctly on IE and Safari then I am reasonably happy.

Thanks again.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum