logo-dw

Go Back   Dreamweaver Club Forums > Dreamweaver forums > Spry
Register FAQ Members List Search Today's Posts Mark Forums Read

Reply
 
Thread Tools Display Modes
Old 02-16-2009, 11:32 AM   #1
mit
 
Join Date: Feb 2009
Posts: 6
Default How can I change height of Spry horizontal menu bar ?

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 !! D

-mit
mit is offline   Reply With Quote
Old 02-16-2009, 12:19 PM   #2
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by mit View Post
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 !! D

-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??
Corrosive is offline   Reply With Quote
Old 02-16-2009, 12:31 PM   #3
mit
 
Join Date: Feb 2009
Posts: 6
Default

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 ?
mit is offline   Reply With Quote
Old 02-16-2009, 01:26 PM   #4
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by mit View Post
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?
Corrosive is offline   Reply With Quote
Old 02-17-2009, 07:53 AM   #5
mit
 
Join Date: Feb 2009
Posts: 6
Default

Hello,

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

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;
}"

Last edited by Corrosive; 02-17-2009 at 02:29 PM..
mit is offline   Reply With Quote
Old 02-18-2009, 01:15 AM   #6
edbr
edbr's Avatar
 
Join Date: Aug 2005
Location: Bali
Posts: 11,164
Default

are you styling the font of the menu items? that could be adding margings also
__________________
If you're happy and you know it shake your meds!
different style links examples

Flight / Hotel search
Free script download
Bali Villas
edbr is offline   Reply With Quote
Old 02-18-2009, 08:32 AM   #7
mit
 
Join Date: Feb 2009
Posts: 6
Default

I modified the padding of this this and fixed my problem !! D
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;
}
mit is offline   Reply With Quote
Old 02-18-2009, 08:39 AM   #8
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by mit View Post
I modified the padding of this this and fixed my problem !! D
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
Corrosive is offline   Reply With Quote
Old 02-18-2009, 03:55 PM   #9
domedia
Administrator
domedia's Avatar
 
Join Date: Dec 2003
Posts: 9,730
Default

Look in the CSS section on this site for a tutorial specific on how the CSS box model works.
domedia is offline   Reply With Quote
Old 02-18-2009, 04:06 PM   #10
Corrosive
Corrosive's Avatar
 
Join Date: Feb 2008
Location: Bristol, England
Posts: 7,103
Default

Quote:
Originally Posted by domedia View Post
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
Corrosive is offline   Reply With Quote
Reply


Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT. The time now is 06:05 PM.


Powered by vBulletin® Version 3.8.7
Copyright ©2000 - 2017, vBulletin Solutions, Inc.
Copyright 2006 DreamweaverClub.com