Modifying 'Solid Block Menu'

**nefarious2all** · 03-04-2009, 10:33 PM

1) Script Title: All Levels Menu Generator - Solid Block Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici.../generator.htm

3) Describe problem:
a) I'm trying to center the menu horizontally in the bar (like the Chrome Menu in the All Levels Menu Generator).
b) I'm also trying to make the menu shorter in it's height. I've tried to simply make the images (blockactive & blockdefault) shorter but that didn't work.

Any help is appreciated!

**Nile** · 03-04-2009, 11:34 PM

Change:

Code:

.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}

To:

Code:

.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
text-align: center;
}

**nefarious2all** · 03-06-2009, 01:22 AM

Thank you Nile for the reply.
But that didn't work, it didn't do anything. Though it is something in the css that has to be changed/added? Perhaps that's not the only place I need to add that line?

Can you tell I'm new at this? And that I'm messing around with the css to see what does what?

**nefarious2all** · 03-06-2009, 02:28 AM

Haha! I think I figured it out. Trial and error of course. This centered the text the way I wanted and it shrunk the vertical size of the entire bar... the highlighted parts. I changed some other stuff for a more custom look. It works so far, lord knows if I'm going to run into problems down the road.

The ddlevelsmenu-topbar.css
It was this:

Code:

.solidblockmenu ul{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

I changed it to this:

Code:

.solidblockmenu ul{
	margin: 0;
	padding: 6px;
	float: left;
	font: bold 12px Arial;
	width: 100%;
	overflow: hidden;
	margin-bottom: 1em;
	border: 1px solid #625e00;
	border-width: 1px 0;
	background: black url(blockdefault.gif) center center repeat-x;
}

.solidblockmenu li{
	display: inline;
}

.solidblockmenu li a{
	float: none;
	color: white;
	padding: 9px 9px;
	text-decoration: none;
	border-right: 0px solid white;
}

ALTHOUGH.... now when a menu drops down there's a small gap between it and the main menu, because I shrunk the height of the main menu bar. This of course makes the dropdown items useless because the mouse (arrow on the screen) can't scroll down the menu. Does that make sense? I'll be looking for the cure to that but if you (or anyone) can help me find the code for that, it would be appreciated.