PDA

View Full Version : How can I change height of Spry horizontal menu bar ?


mit
02-16-2009, 11:32 AM
Hello,

I have created Spry Horizontal menu bar and it appears well. I use the font size 12 and I would like that the menu block would be thinner as it comes to height ... more closer to the font and less space up and down. How can I do this ? I'm able to change the width, but not this - only when I choose smaller font (for ex 10pt) the menu height becomes smaller.

Please help me !! :DD

-mit

Corrosive
02-16-2009, 12:19 PM
Hello,

I have created Spry Horizontal menu bar and it appears well. I use the font size 12 and I would like that the menu block would be thinner as it comes to height ... more closer to the font and less space up and down. How can I do this ? I'm able to change the width, but not this - only when I choose smaller font (for ex 10pt) the menu height becomes smaller.

Please help me !! :DD

-mit

Has it got padding top and bottom at all? I tend to just use padding to get the heights I want so that elements will shrink and grow if the user selects to view with different font sizes. Look out for padding in the corresponding styles and adjust the sizes I.e. padding top and bottom was 10px, make them 5px. Make sense??

mit
02-16-2009, 12:31 PM
I did't have any padding-top or bottom defined. Only padding: 0;. Padding-top add well some space at the top, but bottoms seems to have no effect. I Tried to use padding: -5px; but it doesn't reduce my menu height. Is there any other tips ?

Corrosive
02-16-2009, 01:26 PM
I did't have any padding-top or bottom defined. Only padding: 0;. Padding-top add well some space at the top, but bottoms seems to have no effect. I Tried to use padding: -5px; but it doesn't reduce my menu height. Is there any other tips ?

You got a link you can post at all?

mit
02-17-2009, 07:53 AM
Hello,

this is how my css lookes like for the menu (as you see I'm quite a beginner with css ..) the code:

"/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
}
/* Set the active Menu Bar with this class, currently setting z-index to accomodate IE rendering bug: http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html */
ul.MenuBarActive
{
z-index: 1000;
}
/* Menu item containers, position children relative to this container and are a fixed width */
ul.MenuBarHorizontal li
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
position: relative;
text-align: left;
cursor: pointer;
width: 8em;
float: left;
}
/* Submenus should appear below their parent (top: 0) with a higher z-index, but they are initially off the left side of the screen (-1000em) */
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 8.2em;
position: absolute;
left: -1000em;
}"

edbr
02-18-2009, 01:15 AM
are you styling the font of the menu items? that could be adding margings also

mit
02-18-2009, 08:32 AM
I modified the padding of this this and fixed my problem !! :DD
Thank you all for your responses!!

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #F33;
color: #FFF;
padding: 0.2em 0.75em;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

Corrosive
02-18-2009, 08:39 AM
I modified the padding of this this and fixed my problem !! :DD
Thank you all for your responses!!

ul.MenuBarHorizontal a
{
display: block;
cursor: pointer;
background-color: #F33;
color: #FFF;
padding: 0.2em 0.75em;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}

Great. Nicely done. I thought some padding somewhere might help but I have never used Spry. If you need a little further reading on padding, margins etc. then have a look here...

http://www.w3.org/TR/CSS2/box.html

It's good to know how the box model works :)

domedia
02-18-2009, 03:55 PM
Look in the CSS section on this site for a tutorial specific on how the CSS box model works.

Corrosive
02-18-2009, 04:06 PM
Look in the CSS section on this site for a tutorial specific on how the CSS box model works.

I had no idea that was there either :shock: