homepage Welcome to WebmasterWorld Guest from 54.145.209.80
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Need help with CSS of menu
Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 12:31 pm on Mar 15, 2007 (gmt 0)

Long time reader - first time poster.

Im using the rather cool Blm Multi-level Effect menu from
<snip>

Now I have had trouble with this menu as what is happening that when the second tier is opened with the cursor - the wording from the client is too long and needs widening. Within the current CSS there seems to be no way to do this (or is there?!).

I have also tried putting a class I made up called "wide_menu" that i set with a wider amount for the text box - and it still wont work! any ideas?!

<li><a class="wide_menu" href="#">Mediation Services</a></li>

In firefox it is worst as the text overlaps but in IE it is "ok". I would prefer the text to be on one line:

Thanks guys - hope someone can save me!

Sarah

[edited by: SuzyUK at 12:39 pm (utc) on Mar. 15, 2007]
[edit reason] No site specifics, thanks. See TOS #13 [WebmasterWorld.com] [/edit]

 

PSWorx

10+ Year Member



 
Msg#: 3282648 posted 12:35 pm on Mar 15, 2007 (gmt 0)

Welcome to webmasters world and congratulations on your first post.

Firstly those links will be removed sooner or later, try avoid posting external links and post the html/css here so we can copy the example and see whats going on.

Regarding the issue, it looks as tho a height is being set for the sub menu which is most likely the cause of the problem you are seeing, i havent looked at the css just yet but find the style related to the sub menu and remove any height styling from it and see if that helps.

I noticed you said you would like it all on one line, you will need to adjust the width of the sub menus (in the css) to a width that will allow the largets sub link name to fit on one line.

Im just speculating here as i have no code to go with but see if the sub menu list is contained in a div element i.e. <div class="sub_menu">....</div> and locate the styling associated to it, you will probably find the bits to edit there.

On the down side tho the root menu and sub menus may use the same base styling (sorry for terminology im crap with that) thus the width if adjusted may have an adverse effect on the root menu. If thats the case then wrap the sub menu in a div and apply the styling you require (width in this case) and see if that helps.

If you can post a code example here of the menu and the css to go with it, no need for the rest of the html.

[edited by: PSWorx at 12:44 pm (utc) on Mar. 15, 2007]

Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 12:47 pm on Mar 15, 2007 (gmt 0)

ok thanks - but i can't see that height anywhere for a sub_menu. here is the css. Thanks so much - i appreciate this.

/*this is the css for the vertical version*/

.vertical ul{
list-style-type: none;
padding: 0px;
border-top: 1px solid;
font-size: 95%;
font-family: verdana, serif;
width: 100px;
}
.vertical li a{
display: block;
width: 100px;
text-decoration: none;
height: 1.2em;
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}
.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
}
.vertical li ul{
position: absolute;
margin-top: -1.3em;
margin-left: 100px;
}
/*this is the css for the horizontal version*/
.horizontal ul{
list-style-type: none;
padding: 0px;
border-left: 1px solid;
display: block;
height: 1.4em;
}
.horizontal li{
float: left;
display: inline;
}
.horizontal li a{
text-decoration: none;
height: 1.2em;
float: left;
display: block;
width: 125px;
padding: .1em 1px;
border: 1px solid;
border-left: none;
}
.horizontal li li a{
border-top: none;
border-left: 1px solid;
}
.horizontal li ul{
position: absolute;
margin-top: 1.3em;
margin-left: -1px;
width: 129px;
border: none;
display: block;
height: auto;
border-top: 1px solid;
}
.horizontal li li ul{
position: absolute;
margin-top: .1em;
margin-left: 125px;
}
.horizontal li ul li a{
width: 125px;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
/*Not sure if I recommend this or not*/
.inaccesible li ul{
display: none;
}
/*Arrow code - looks like <a class="haschild" href="#">Text <span>Arrow</span></a> can be turned on/off with arrow class*/
.arrow a span{
padding-left: 1em;
font-size: 85%;
}
.arrow a:hover span{
padding-left: 2em;
}
.arrow a span.noshow{
visibility: hidden;
}
/*Plus code*/
.plus a span{
padding-left: .5em;
}
/*colors for menu*/
.blackwhite li a{
background-color: white;
color: black;
border-color: 003300;
}
.blackwhite li a:hover{
background-color: 003300;
color: white;
border-color: black;
}
.blackwhite ul{
border-color: black;
}
.bluewhite li a{
background-color: white;
color: #000033;
border-color: #000033;
}
.bluewhite li a:hover{
background-color: #000033;
color: white;
border-color: #000033;
}
.bluewhite ul{
border-color: #000033;
}

PSWorx

10+ Year Member



 
Msg#: 3282648 posted 12:57 pm on Mar 15, 2007 (gmt 0)

Ok i did get the chance to look at the link u posted, not that i should have, if a mod see's this then is it legal to do this with a class:

class="mlmenu vertical blindv blackwhite arrow inaccesible delay"

Which from the css looks like its linking to multi styles, which looks like the heart of the problem

Ok so going of that (what i see to be a) problem, you need to add this:

.vertical li ul li{
width: whateveryouneedpx;
}

after this this:

.vertical li ul{
position: absolute;
margin-top: -1.3em;
margin-left: 100px;
}

See if that works, basically the sub menu is inheriting the style from the root menu thus the restricted height and width.

Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 1:05 pm on Mar 15, 2007 (gmt 0)

i added:

.vertical li ul li
{
width: 250pixels;
}

to the CSS and it didn't do anything. I tried to add a class to the <ul> in the html as in:

.second_tier { width: 250pixels; }

and it made no difference

:(

PSWorx

10+ Year Member



 
Msg#: 3282648 posted 1:25 pm on Mar 15, 2007 (gmt 0)

That is such a messy javascript script im sure ive seen the same thing condensed down to about 10 lines or less with the same effects and compatability, anyhow change this:

.vertical li a{
display: block;
width: 100px;
text-decoration: none;
height: 1.2em;
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}

to this:

.vertical li a{
display: block;
width: 100px;
text-decoration: none;
/*we removed the height*/
padding: .1em 1px;
border: 1px solid;
font-size: 72%;
font-family: verdana, serif;
border-top: 1px;
}

This fix will let the link contents go onto another line, regarding width im not sure didnt play around with it but as its inherited from the root menu it might have an effect on that which you dont want, also i think the javascript is playing havock with the css as i tried to apply additional classes and they wernt playing, i could set them as ID's but the html/xhtml wont validate but then that might not be needed.

As i said before it looks like the height was being inherited, not sure on the effects this will have on the root altho i dare say it means you can have longer names in the root menu same as the sub, hope it works!

[edited by: PSWorx at 1:28 pm (utc) on Mar. 15, 2007]

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3282648 posted 1:35 pm on Mar 15, 2007 (gmt 0)

Welcome to WebmasterWorld Sarah_Design2002!

.vertical li{
/*Needed for IE. Don't ask me why, It was a lucky guess.*/
display: inline;
}

was that you or was it in the code you got? regardless this means the li's will not accept a width - only block elements can take widths - I see the width is actually declared on the .vertical li a (width: 100px;} so does it work if you apply the the width of 250px to the second level <a> .vertical li li a {width: 250px;}?

and Yes PSWorx, it's quite legal to have classes like that, I presume there are so many in this case because it's a multifunctional menu (download code for every eventuality). When using multiple classes the cascade still applies it will be the class name nearest the element content that trumps the others
e.g.

.red {color: red; font-weight: bold;}
.blue {color: blue;}

<p class="red blue">text will blue and bold</p>

Suzy

[edited by: SuzyUK at 1:37 pm (utc) on Mar. 15, 2007]

Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 1:41 pm on Mar 15, 2007 (gmt 0)

*hits CD player*

"Did you ever know that you're my hero!"

Thanking you!

Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 1:45 pm on Mar 15, 2007 (gmt 0)

hi suzy
i didnt put in that "lucky" comment - it was in the code.

So do you think i can take that "inline" out?

at the moment the previous posters suggestion worked - although it wasnt on one line - but it now appears as IE had been displaying it.

SuzyUK

WebmasterWorld Senior Member suzyuk us a WebmasterWorld Top Contributor of All Time 10+ Year Member



 
Msg#: 3282648 posted 2:25 pm on Mar 15, 2007 (gmt 0)

So do you think i can take that "inline" out?

no not if the rest of the menu is working.. I have a feeling that it's there to fix an IE whitespace in lists bug, and if you remove it you would need float the li's instead. Just be aware that you can't set the widths or heights on the li.

at the moment the previous posters suggestion worked - although it wasnt on one line - but it now appears as IE had been displaying it.

maybe I've misunderstood I thought you wanted the list widened so the text from an individual menu item would stay on one horizontal line?

The height removal works by taking away it's restriction allowing the box to stretch vertically, IE6 and below stretches boxes incorrectly tis why it was doing it before.

a combination of both my and PSWorx's solutions should cover both eventualities though I admit to missing the fact that there is also a width on ul! so along with removing height if you add

.vertical ul ul, .vertical li li a {width: 250px;}

adjust the 250px to suit your needs you should be able to get your text all one one line too.

Suzy

Sarah Design2002

5+ Year Member



 
Msg#: 3282648 posted 3:00 pm on Mar 15, 2007 (gmt 0)

OMG! perfect! that works a treat!
You're the best! Thanks Suzy!

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved