Hello,
I am building my first DNN (v 5.0) website and am needing a little advise.
All was going fine until the last section, modifying the menu bar. I have been using the tutorials in issues 5&6 and cannot see how to make the necessary changes. I have tried a few things but cannot quite get it right.
I am trying to design a horizontal bar with a black background (nav-bar.jpeg) and an orange oval image (menu_icon.jpeg) which will sit directly behind the link text.
At present all I have is a black background and cannot get the orange oval to appear.
The html text is as follows:
<td class="menupane" id="MenuPane" runat="server" height="62px" valign="top" align="left">[MENU]
|
|
The css text is as follows:
.menupane
{
background-image: url (nav_bar.jpeg);
background-color: #000000;
background-position: left top;
background-repeat:repeat-x;
padding-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
}
.MainMenu_MenuContainer {
padding-left: 5px;
padding-right: 7px;
padding-top: 0px;
border: 1px solid #000000;
height: 63px;
}
.MainMenu_MenuBar {
cursor: pointer;
cursor: hand;
height:62px;
background-color: Transparent;
}
.MainMenu_MenuItem {
background-image: url(menu_icon.jpeg);
border-left: #000000 0px solid;
border-bottom: #000000 1px solid;
border-top: #000000 1px solid;
border-right: #000000 0px solid;
cursor: pointer;
cursor: hand;
color: #000000;
font-size: 9pt;
font-weight: bold;
font-style: normal;
background-color: Transparent;
font-family: Tahoma, Arial, Helvetica;
height: 50px;
}
.MainMenu_MenuIcon {
background-color: #000000;
border-left: #cad5ea 0px solid;
border-bottom: #cad5ea 0px solid;
border-top: #cad5ea 0px solid;
cursor: pointer;
cursor: hand;
text-align: center;
width: 15px;
height: 50px;
}
.MainMenu_SubMenu {
background-color: #fab913;
z-index: 1000;
cursor: pointer;
cursor: hand;
filter:progid
XImageTransform.Microsoft.Shadow(color='#696969', Direction=135, Strength=3);
}
.MainMenu_MenuBreak {
height: 1px;
}
.MainMenu_MenuItemSel {
background-color: #8da4d3;
cursor: pointer;
cursor: hand;
color: black;
font-family: Tahoma, Arial, Helvetica;
font-size: 9pt;
font-weight: bold;
font-style: normal;
height: 21px;
}
.MainMenu_MenuArrow {
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;
}
.MainMenu_RootMenuArrow {
font-family: webdings;
font-size: 10pt;
cursor: pointer;
cursor: hand;
}
Please can someone let me know how to resolve this issue.
Many thanks,
Trevor