...

View Full Version : CSS Menu help



Snitz
05-28-2009, 10:48 AM
Hi guys,

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


background: url(../images/hdot1.gif) repeat-x bottom;

And this is the css code of the menu:


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;
}



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.

VIPStephan
05-28-2009, 11:06 AM
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.

Snitz
05-28-2009, 11:23 AM
Well that worked but now the "menu-arrow.gif" (Big Orange Arrow for the 1st menu links) have disappeared.

All I did was this:



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

Snitz
05-28-2009, 11:25 AM
I think it's in conflict with



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;
}

VIPStephan
05-28-2009, 11:33 AM
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. :)

Snitz
05-28-2009, 11:53 AM
Ok, that was kinda confusing sorry :(
Can you please elaborate on what exactly am I supposed to do?

And thank you so much!

VIPStephan
05-28-2009, 12:11 PM
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.

Snitz
05-28-2009, 12:38 PM
This didn't work, the big orange arrow isn't appearing.

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

Snitz
05-28-2009, 12:45 PM
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.

VIPStephan
05-28-2009, 02:53 PM
.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:


.menu .active li a {background-color: transparent;}

Snitz
05-28-2009, 03:13 PM
Thanks alot man! :d



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum