PDA

View Full Version : 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/dynamicindex1/ddlevelsmenu/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:


.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:

.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? :) :D

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. :rolleyes:

The ddlevelsmenu-topbar.css
It was this:

.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:

.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.

Nile
03-06-2009, 02:32 AM
Ermm.. I dont know if thats the best way to do it. But if thats what works, awesome. ;)

Try it in all of your browsers.

nefarious2all
03-06-2009, 03:06 AM
Obviously it works in Firefox. :D I tried it in Safari and IE and it seemed to work fine. *crosses fingers for future modifications*

Nile
03-06-2009, 03:09 AM
What I suggest doing is using the chrome menu, and change the images, and border colors, and font colors, and height. :D (easiest way)