Styling question

[Daniel Plomp]

Hi all,

I've a question about styling the RadMenu. I'm not so good in CSS, but I have this challenge to make this menu work in Sitefinity.

The code for the menu is like this:

<ul id="nav">
   <li class="active">
      <a href="#"><span class="l"><span class="c">Home</span></span><span class="r"> </span>
      </a>
   </li>
   <li>
      <a href="#"><span class="l"><span class="c">Maatschappelijke stages</span> </span><span class="r"> </span>
      </a>
   </li>
   <li>
      <a href="#"><span class="l"><span class="c">Contact</span></span><span class="r"> </span>
      </a>
   </li>
</ul>

This is my CSS code:

#nav{
    list-style:none;
    padding:0;
    margin:0;
    overflow:hidden;
    height:50px;
    background:url(../Img/bg-nav.gif) repeat-x 0 100%;
    text-transform:uppercase;
}
#nav li{
    float:left;
    font:24px/27px BigNoodleTitlingRegular, Arial, Helvetica, sans-serif;
    margin:0 0 0 -4px;
}
#nav a{
    float:left;
    letter-spacing:-1px;
}
#nav a:hover,
#nav .active a{
    color:#000;
    text-decoration:none;
    border:0;
    cursor:pointer;
}
#nav span{float:left;}
#nav .c{padding:20px 10px 3px;}
#nav .l{padding:0 0 0 8px;}
#nav .r{
    width:8px;
    height:50px;
}
#nav a:hover .l,
#nav .active .l{background:url(../Img/bg-nav-left-hover.png) no-repeat;}
#nav a:hover .c,
#nav .active .c{
    background:url(../Img/bg-nav-center-hover.png) repeat-x;
    overflow:hidden;
}
#nav a:hover .r,
#nav .active .r{background:url(../Img/bg-nav-right-hover.png) no-repeat;}

I do not understand how I can transform this into a RadMenu_Custom skin. Because of the <span> tags that are around the menu items. I don't know if it is possible for the RadMenu to just output <ul> and <li>?

Anyway, if there is anyone that has done such kind of styling: I really could use some help.

Thanks!
Daniel

[Cori]

Hello Daniel,

Have you tried the Visual Style Builder, which allows you to create skins for the different RadControls.

I hope that helps.

[Daniel Plomp]

Ehm...yes I tried it, but I cannot add multiple spans around and inside the text element.
So, I have no clue about how to do this example inside the RadMenu.

I solved it (temporarily) with building a repeater that generates an <ul> etc...
I don't understand why RadMenu can't just output a simple <ul> <li> list. Would make things easier.

Well, I hope someone has have the same issue.

Thanks anyway,
Daniel