WebsiteBaker Community Forum

General Community => Off-Topic => Topic started by: sky writer on January 07, 2009, 08:39:57 PM

Title: vertical alignment (spacing) of menu and child menu
Post by: sky writer on January 07, 2009, 08:39:57 PM

I have been at this for some time, and can't seem to get it just right.

I have a fairly simple vertical menu structure (Templeron Template) with background color boxes (which change colour when hovered over) around each text link.

Home

Link 1

   Link 1 child 1

   Link 1 child 2

Link 2

What I would like to do is decrease the vertical spacing of the parent/child menu items, so it looks like this:

Home

Link 1
   Link 1 child 1
   Link 1 child 2

Link 2

But for the life of me, I can't seem to get it right.  Can anyone offer any assistance.  I am willing to read and learn myself, but I have searched here and Google and can't find any reference to doing this.

Here is the menu CSS info:

.menu {
    vertical-align: top;
    background-color: #FFFFFF;
    width: 170px;
    padding: 0px;
}
.menu ul, .menu li{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
.menu ul {
    border-bottom: 0px;
    background-color: #003366;
}
.menu ul ul {
    font-style: italic;
    padding-left: 10px;
}
.menu a:link, .menu a:visited, .menu a:active {
    padding: 4px 10px 4px 10px;
    color: #FFFFFF;
    display: block;
    background-color: #003366;
    text-decoration: none;
}
.menu a:hover {
    background-color: #336699;
    text-decoration: none;
}
.menu_current {
    font-weight: bold;
}

Title: Re: vertical alignment (spacing) of menu and child menu
Post by: marathoner on January 08, 2009, 02:46:42 AM

You don't give us much info such as a URL or anything. I'm going to *guess* that your child links are in a nested UL tag. However, you define links (A tag) with a top and bottom padding of 10px. Since you haven't defined anything different for the A tags in the nested UL they will inherit that properties of the A tags that you have defined.

Do a Google search on CSS to understand how cascading works. Also, you might want to try something like the 'Web Developer' addon for FF so that you can see information such as where a particular element falls in your CSS heirarchy and it also allows you to alter the CSS and see the results immediately.

It's probably something like this:

Code: [Select]

.menu UL UL a:link, .menu a:visited, .menu a:active {
   padding: 4px 0px;
}