I suck at skinning the menu... any help?

[Fooberichu]

I have an example using the RadMenu on http://dev1.homeip.net/adventdvr that I "cheated" on by using my own XML file to databind to and it works fine (don't know *how* I accomplished it)... but I want to do the exact same thing now using DNN and autogenerated menus instead of XML binding.  In my cheater way I had an "ImageUrl" and "HoveredImageUrl" property so it would be smart enough to just change the image for me... but in the DNN site I want to set an image that can be a background normally and one that can be the hover background and then write the text (page name) centered vertically and horizontally like the static images show on my example.

So I just really suck at the whole UL/LI menu structure and can never quite get it to look right.  If I could just be pointed in the right direction then I could probably figure it out from there.  Don't really need/want somebody to just outright give me the answer, just some pointers about how to correctly set up the menu to appear like my sample.

Thanks in advance!

[Fooberichu]

Ok... I've made some headway and it at least looks *mostly* ok, but I need a little assistance getting it closer.  Take a look at my DNN version: http://dev1.homeip.net/advent and see how the sub-menu items don't have the "padding" before and after but they do on my non-DNN version.  Below is the CSS I've used: -- ideas?

.RadMenu_Advent
{
   white-space: nowrap;
}

.RadMenu_Advent ul
{
    list-style: none;
    padding: 0;
    margin: 0;
}

.RadMenu_Advent li
{
    float: left;
    margin: 0;
}

.RadMenu_Advent li a:active
{
    color: White;
}

.RadMenu_Advent li a:visited
{
    color: White;
}

.RadMenu_Advent li a:link
{
    color: White;
}

.RadMenu_Advent li a
{
    background: url(images/btn_background.gif) #fff bottom left repeat-x;
    height: 40px;
    line-height: 40px;
    float: left;
    width: 9em;
    display: block;
    border: 1px solid #AFD2FF;
    border-bottom: none;
    border-top: none;
    color: white;
    text-decoration: none;
    text-align: center;
    padding: 0 5px;
    font-size: 16pt;
    text-transform: uppercase;
    font-family:Arial,sans-serif;
}

.RadMenu_Advent li ul li a
{
    background: #1E3445;
    height: 1.5em;
    line-height: 1.5em;
    text-align: left;
    font-size: 8pt;
    font-family:Arial,sans-serif;
    text-transform: none;
    margin: 0 5px 0 5px;
}

.RadMenu_Advent li a:hover
{
    background: url(images/btn_background_h.gif) #fff bottom left repeat-x;
    text-decoration: none;
}

.RadMenu_Advent .rmFirst
{
    color: White;
    text-decoration: none;
}

[Yana]

Hi there,

Please add padding to the following css style in your skin.css file:

.RadMenu_Advent li ul li a
{
    background: #1E3445;
    height: 1.5em;
    line-height: 1.5em;
    text-align: left;
    font-size: 8pt;
    font-family:Arial,sans-serif;
    text-transform: none;
    margin: 0 5px 0 5px;
    padding: 0 10px !important;
}

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Fooberichu]

Yana,

Thank you for the pointer.  I actually figured it out on Saturday after going through my rules one by one and comparing them against the RadMenu_Default skin (and through gratuitous use of the FireBug tool in FireFox to see the CSS inheritance tree).  I appreciate the follow-up though because that confirmed I fixed it the right way.

One of these days I'll get better at skinning those UL-based menus. :)

Thanks again, love the Telerik toolset!