Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    May 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Horizontal menu

    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:
    Code:
    *
    {
    	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;
    }
    Last edited by soulless; 05-21-2009 at 06:13 PM.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    55
    Thanks
    1
    Thanked 4 Times in 4 Posts
    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/

  • #3
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    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
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #4
    New Coder
    Join Date
    May 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #5
    Master Coder
    Join Date
    Apr 2003
    Location
    in my house
    Posts
    5,211
    Thanks
    39
    Thanked 201 Times in 197 Posts
    you can try em's or % for the units of measurement

    hth

    bazz
    "The day you stop learning is the day you become obsolete"! - my late Dad.

    Why do some people say "I don't know for sure"? If they don't know for sure then, they don't know!
    Useful MySQL resource
    Useful MySQL link

  • #6
    New Coder
    Join Date
    May 2009
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I'm still working out how those work. 'em's, I mean. But thought the answer might be through there.

  • #7
    New to the CF scene
    Join Date
    Jul 2009
    Location
    London UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Problem with browsers

    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.

  • #8
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Can you give a link to your page, or failing that post your complete code?

  • #9
    New to the CF scene
    Join Date
    Jul 2009
    Location
    London UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #10
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    In your csshorizontalmenu.css you have:

    Code:
    /*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.

  • #11
    New to the CF scene
    Join Date
    Jul 2009
    Location
    London UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Done, but it doesn't make any difference.

  • #12
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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.

  • #13
    New to the CF scene
    Join Date
    Jul 2009
    Location
    London UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #14
    New to the CF scene
    Join Date
    Jul 2009
    Location
    London UK
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?

  • #15
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    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:

    Code:
    .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

    Code:
    .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:

    Code:
    <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.

    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.


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •