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.
Results 1 to 11 of 11

Thread: CSS Menu help

  1. #1
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Exclamation CSS Menu help

    Hi guys,

    I'm trying to add an <hr> to separate the menu's links. The <hr> css code is the following:

    Code:
    background: url(../images/hdot1.gif) repeat-x bottom;
    And this is the css code of the menu:

    Code:
    div.moduletable ul,
    div.moduletable_text ul,
    div.moduletable_menu ul,
    div.moduletable_hilite ul {
    	margin: 0;
    	padding: 0;
    }
    
    div.moduletable li,
    div.moduletable_text li,
    div.moduletable_menu li,
    div.moduletable_hilite li ul li {
    	background: url(../images/menu-arrow.gif) no-repeat 5px 8px;
    	margin: 0;
    	padding-left: 16px;
    }
    div.moduletable li ul li,
    div.moduletable_text li ul li,
    div.moduletable_menu li ul li,
    div.moduletable_hilite li ul li {
        background: url(../images/menu-arrow-small.gif) no-repeat 5px 8px;
        margin: 0;
    	padding-left: 16px;
    }
    div.moduletable li ul li ul li,
    div.moduletable_text li ul li ul li,
    div.moduletable_menu li ul li ul li,
    div.moduletable_hilite li ul li ul li {
        background: url(../images/menu-box.gif) no-repeat 5px 8px;
        margin: 0;
    	padding-left: 16px;
    }
    Code:
    ul.menu {
    	list-style: none;
    	margin: 0;
    	padding-left: 15px;
    }
    ul.menu li {
    	margin: 0;
    }
    
    ul.menu li a {
    	display: block;
    	outline: none;
    	padding: 5px 2px;
    	color: #695B4E;
    	text-decoration: none;
    }
    
    ul.menu li a:hover,
    ul.menu li a:active,
    ul.menu li a:focus {
    	color: #695B4E;
    	background: #E7E6DF;
    }
    
    ul.menu li.active a {
    	background: #E7E6DF;
    	font-weight: bold;
    }
    
    ul.menu li ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    
    ul.menu li li {
    	border: none;
    }
    
    ul.menu li li a {
    	background: no-repeat 10px 11px !important;
    	border: none;
    	font-weight: normal !important;
    	width: 75%; /*need for ie6*/
    }
    
    ul.menu li li a:hover,
    ul.menu li li a:active,
    ul.menu li li a:focus {
    	background: none;
    	color: #FA6900;
    }
    Can anyone please help me out on this on? Thanks!

    NOTE: Please check the attachments to see how my current menu is looking and how I want it to be.
    Attached Thumbnails Attached Thumbnails CSS Menu help-aim.gif   CSS Menu help-current.gif  

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    What do you need horizontal rules for? Just use borders or background images on the list items (and hide/remove them with CSS where the border doesn’t apply).

    I assume the first image is what you’re after? So you have nested lists there. The list items of the outermost list (the parent) will get bottom aligned backgrounds simulating the border like so: .menu li {background: …;} This would, however, result in all list items (even the ones of the nested lists) get a background. So that’s when you would specifically tell those nested list items to not get a background: .menu li li {background: none;}

    And that’s it. No unnecessary and semantically questionable hard coded horizontal rules.

  • #3
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Well that worked but now the "menu-arrow.gif" (Big Orange Arrow for the 1st menu links) have disappeared.

    All I did was this:

    Code:
    ul.menu li li {
    	border: none;
    	background: none;
    }
    ul.menu li {
    	margin: 0;
    	background: url(../images/hdot1.gif) repeat-x bottom;
    }

  • #4
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    I think it's in conflict with

    Code:
    div.moduletable li,
    div.moduletable_text li,
    div.moduletable_menu li,
    div.moduletable_hilite li ul li {
    	background: url(../images/menu-arrow.gif) no-repeat 5px 8px;
    	margin: 0;
    	padding-left: 16px;
    }

  • #5
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Ah I see. Well, nothing easier than that. Just apply the border image to the links within the list items (and “remove” it for the children’s links). You may have to alter the padding for the list items and also apply it to the anchors. I guess you’ll get there.

  • #6
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Ok, that was kinda confusing sorry
    Can you please elaborate on what exactly am I supposed to do?

    And thank you so much!

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Code:
    ul.menu li a {
    	margin: 0;
    	background: url(../images/hdot1.gif) repeat-x bottom;
    }
    ul.menu li li a {
    	border: none;
    	background: none;
    }
    Play with the list items’ and anchors’ padding if the border is too short at the left.

  • Users who have thanked VIPStephan for this post:

    Snitz (05-28-2009)

  • #8
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    This didn't work, the big orange arrow isn't appearing.

    This is my live site: http://bocti.seomena.com

  • #9
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    NOTE: It worked but now I have one last bug.

    This is how the menu is now looking. I have a missing <hr> at the end of the final sublink. How can I add one and to appear only at the bottom of the final link not all of them.
    Attached Thumbnails Attached Thumbnails CSS Menu help-working.gif  

  • #10
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,474
    Thanks
    6
    Thanked 980 Times in 953 Posts
    Code:
    .menu ul {background: url(bottom border image here) bottom left repeat-x;}
    Oh and on your site I see the sub links all highlighted, too. I suppose you want:
    Code:
    .menu .active li a {background-color: transparent;}

  • Users who have thanked VIPStephan for this post:

    Snitz (05-28-2009)

  • #11
    Regular Coder
    Join Date
    Jul 2004
    Location
    Lebanon
    Posts
    223
    Thanks
    6
    Thanked 0 Times in 0 Posts
    Thanks alot man! :d


  •  

    Tags for this Thread

    Posting Permissions

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