theme andreas01

[Dr.CSS]

if you add to this,,
#avmenu li li{
margin-bottom: 0px;
}                          this makes those children touch each other (no gaps)

#avmenu li li{
margin-bottom: 0px; border:1px solid #'some number color';
}                         

it will give you a border and you can make it change just like the fat grey/blue one on the left that changes on hover

/* second level */
#avmenu li li a {
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
/*padding: 6px 0 0 24px; */
padding: 6px 0 0 24px;  this makes the kids fat
background: #f4f4f4;
border-left: 4px solid #cccccc; border-top: blah blah; border-right: blah blah; border-bottom: blah blah;
      this makes them the same as first level or if you want just delete all the  border:0; 's and all the kids will look the same as parents
}


then change it with,,,

#avmenu li li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0; border-top: blah blah; border-right: blah blah; border-bottom: blah blah;
}

for the font too big go to Typo in the style sheets it should have something that points to your menu font.


  HTH  mark

[wientanz]

Mhm... looks nicer now. I added the border in the #avmenu li li{} and deleted it in the children. I don't think that I should look at any specific font-declaration (for the too big font). It has to be declared somewhere in the Menu, since it's too big from one menu level to the next. at the top level and the next it's ok, but after that...

Something else: I looked at the older template and the new and noticed that there's a space between the menu and the content that wasn't there before.

[wientanz]

Ok, I found the font-culprit...

Code: Select all

#avmenu ul {	
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

It's called every time a new menu-level is created thus making every level 1.1 times bigger. So it seems that I have to use a declaration like

Code: Select all

font: 76% Verdana,Tahoma,Arial,sans-serif;

, which is the declaration for the whole site. I would have to use 1.1 time 76%, right?

haven't tried it yet, because I have to be off for a lecture. Will be back in about 3 hours.

[wientanz]

ok, I got it working with the following changes:

Code: Select all

/* second level */
#avmenu li li a {
font-weight: normal;
[color=Blue]font-size: small;[/color]
height: 20px;
text-decoration: none;
color: #505050;
display: block;
/*padding: 6px 0 0 24px; */
padding: 10 0 10 24px;
background: #f4f4f4;
/*border:0;*/
}

same with third level.

The Menu isn't perfect because the text does a line break and the menu doesn't adapt the length of the field accordingly, but well. If anybody knows how to do that... give me a hint.

More important though is the fact that I need to close the gap between content and menu. I think I saw another thread where that was discussed. And I'd like to make the padding underneath each top level menu item a little bigger. Not the gap between the items. That looks good to me.

[wientanz]

I got the gap closed... it wasn't there with the firefox, but with IE. Hmm...

The error was in the Default CSSMenu Vertical stylesheet.

Changed

Code: Select all

#menuwrapper { 
	[color=Red]width: 200px; [/color] 
	}

to

Code: Select all

#menuwrapper { 
	[color=Blue]width: 100px; [/color] 
	}

And it works now.

Almost done. Have to change the padding of the toplevel-navigation first so that there's a little bit more of the box under each item. Couldn't trace it down yet. Hmmm...

edit: this results in some of the children not to being displayed properly. They're trunctuated somehow.
edit2: 130px instead of 100px did it.

[wientanz]

damn, it appears that IE automatically makes a line-break when the menu-items are too long whereas Firefox doesn't.





Ok, now I DESPERATELY need help because I really don't know a solution to that.

The link is http://www.bugovsky.com/index.php?page=Rumba

[wientanz]

I just repaired part of the menu (the space below every menu item in the top level navigation).

changed

Code: Select all

/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 0 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}	

to

Code: Select all

/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 6px 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

But I still can't repair the error in firefox as shown above. Again: any help is appreciated

[Dr.CSS]

try this it works but needs little more tweekin,,
Firefox w/ the Web Developer extension is your best friend,, 

  mark


#avmenu {
clear: left;
float: left;

margin: 0 0 10px 0;
padding: 0;
font-size: 0.9em;
}

#avmenu ul {
list-style: none;
width: 150px;
margin: 0 0 20px 0;
padding: 0;
font-size: 1.1em;
}

#avmenu li {
margin-bottom: 4px;
}

#avmenu li li{width: 190px;
margin-bottom: 0px; border:1px solid #cccccc
}

/* first level */
#avmenu li a {
font-weight: bold;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 6px 10px;
background: #f4f4f4;
border-left: 4px solid #cccccc;
}

#avmenu li a:hover {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}

#avmenu li a.menuactive {
background: #eaeaea;
color: #286ea0;
border-left: 4px solid #286ea0;
}


/* second level */
#avmenu li li a {width: 180px;
font-weight: normal;
font-size: small;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
/*padding: 6px 2px 6px 24px;*/
/*padding: 10 0 10 24px;*/
padding-bottom: 6px;
background: #f4f4f4;
/*border:0;*/
}

#avmenu li li a:hover {
background: #eaeaea;
color: #286ea0;
/*border:0;*/
}

#avmenu li li a.menuactive {
background: #eaeaea;
color: #286ea0;
}

/* third level neu */
#avmenu li li li a {
font-size: small;
font-weight: normal;
height: 20px;
text-decoration: none;
color: #505050;
display: block;
padding: 6px 0 6px 10px;
background: #f4f4f4;
}

#avmenu li li li a:hover {
background: #eaeaea;
color: #286ea0;
}

#avmenu li li li a.menuactive {
background: #eaeaea;
color: #286ea0;
}

[wientanz]

hmmm... thanks, I tried it. But making the menus wider doesn't help the general layout. And the longer menu-item names still don't fit. IE wraps the text around and adapts the individual menu-item's hight. That's my goal. Is something like that possible with firefox and CSS?

Another thing: Some of the content didn't fit into the layout, so I copied the template and stylesheets and replaced it with the CSS Menu Horizontal. This whole thing I used on the specific content that didn't fit. It does now, but the menu doesn't. It misbehaves in IE and Firefox in two completely different ways!

Please have a look!

http://www.bugovsky.com/index.php?page=Ballkalender