Hello,

I created a set of menu using the [NAV] skin object, however, I am having trouble centered the menu vertically. I attached the code. I also attached the menu to this post. Let me know if I am missing anything.

Thank you,

Lily

in .ascx file...
 
<div class="righttab"> 
    <div class="dnnMenuNav"><dnn:NAV runat="server" id="dnnNAV" ProviderName="DNNMenuNavigationProvider" CSSControl="main_dnnmenu_bar" CSSContainerRoot="main_dnnmenu_container" CSSNode="main_dnnmenu_item" CSSNodeRoot="main_dnnmenu_rootitem" CSSIcon="main_dnnmenu_icon" CSSContainerSub="main_dnnmenu_submenu" CSSBreak="main_dnnmenu_break" CSSNodeHover="main_dnnmenu_itemhover" ControlAlignment="Left" ControlOrientation="horizontal" SeparatorLeftHTML="<img alt=&quot;*&quot; BORDER=&quot;0&quot; src=&quot;hcmenutab-left.gif&quot;/>" SeparatorRightHTML="<img alt=&quot;*&quot; BORDER=&quot;0&quot; src=&quot;hcmenutab-right.gif&quot;/>" StyleNodeHeight="18" StyleSelectionForeColor="#000000" IndicateChildren="False" /></div>
</div>

in .css file...

.dnnMenuNav
{
    background-color: Transparent;
    margin: 0px 0px 5px 0px;
    padding: 0px 0px 5px 0px;
}

.main_dnnmenu_container
{
 vertical-align: middle;
 
}

.main_dnnmenu_container a
{
 vertical-align: middle; 
 
}

.main_dnnmenu_bar
{
    list-style:none;
    padding: 0px 0px -5px 0px;
    margin: 8px 0px 0px 0px;
    height: 32px;
    background-image: url(hcmenutab-mid.gif); /*affects submenu td's*/
    background-repeat: repeat-x;
    text-align: center;
}

.main_dnnmenu_item td
{/*TD if menu option for using tables is on*/
 /* background: #c0c0b0;*/
 font-weight: bold;
 font-style: normal;

 display:block;
 float:left;
 font-weight: bold;
 white-space: nowrap;
 background-image:  url(hcmenutab-mid.gif);
 /*background-position: top right;*/
 background-repeat: repeat-x;
 height: 32px;
 /* margin: 0px 0 0 0; */ 
 color: #4d4c4c;

 /*border-right:1px solid #ffffff;
 border-bottom:1px solid #ffffff; effect submenu
 padding-right:10px;*/
 padding: 0px 0px 0px 0px;
 vertical-align: middle;
  
}

 
.main_dnnmenu_rootitem
{
 /*TD if menu option for using table is on */
 height: 32px;

 font-weight: bold;
 font-style: normal;
 display:block;
 float:left;
 background-color: #c0c0b0;
 background-image: url(hcmenutab-mid.gif);
 background-repeat: repeat-x;
 letter-spacing: 0px;
 color: #4d4c4c;
 text-decoration:none;
 border-right: 1px #ffffff solid;
 margin: 0px 0px 2px 0px;
 padding: 0px 0px -5px 0px;
 white-space: nowrap;
}

.main_dnnmenu_itemhover
{ background-color: #c0c0b0; 
 text-decoration: underline;
 color: #ffffff;
 height: 32px;
 padding: 0px 0px 0px 0px;
 font-weight: bold;
 font-style: normal; 
 margin: 0px 0px -2px 0px;
 padding: 0px 0px -5px 0px;
}

.main_dnnmenu_itemhover td
{
 color: #ffffff;
 font-weight: bold;
 font-style: normal;
 /*background-color: #c0c0b0;
 background-image:  url(hcmenutab-mid.gif);*/
 height: 32px;
 /*background-position: top left;*/
 margin:0;
 text-decoration: underline;
 padding:0px 0px -5px 0px;
 margin: 0px 0px -2px 0px;
}

.main_dnnmenu_icon {
                cursor: pointer;
                cursor: hand;
                text-align: center;
                width: 15px;
                height: 100%;
}

.main_dnnmenu_submenu {
                background-color: #c0c0b0; 
                background-image:url(hcmenutab-mid.gif); /*affects submenu td's*/
                height:32px;
    
                white-space: nowrap;
                background-repeat:repeat-x;
                z-index: 1000;
                cursor: pointer;
                cursor: hand;
                padding: 0px 0px -5px 0px;   /*explicitly set padding for sub-menus */
                margin: 0px 0px -2px 0px;
}
.main_dnnmenu_break {
                height: 1px;
                font-size: 1px;
}

.main_dnnmenu_arrow {
 border-right: #cad5ea 1px solid;
 border-bottom: #cad5ea 1px solid;
 border-top: #cad5ea 0px solid;
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}
.main_dnnmenu_rootmenuarrow {
 font-family: webdings;
 font-size: 10pt;
 cursor: pointer;
 cursor: hand;
}

dnnNAV renders using span tags (assuming you specificed UseTables="False" ).

The nature of span tag is to display inline, if you wish to vertically align the item, it doesn't help by setting vertical-align to middle. What you can do is to reset the display of the span  element within dnnNAV to display as block. Then you have the ability to (not really vertically align items) set padding to make it vertically aligned with whatever design elements you have.

ie:

.mynav span {display: block;}

Hope this helps!

Cuong Dang
Co-founder: Enliven, dnnGallery
LinkedIn | Twitter
I'm the author of DNN and Web Standards Wrox Blox

You could our dnnpages skin menu object, the structure is built in UL List,
Please visit www.dnnpages.com for more details.