i am facing strange problem that i am not able to add stylesheet as selected item :
my html is like this :
<asp:Menu ID="Menu2"
runat="server"
Orientation="Horizontal"
DisappearAfter="10"
CssClass="art-hmenu"
DataSourceID="XmlDataSource1"
IncludeStyleBlock="false"
StaticEnableDefaultPopOutImage="False">
<StaticSelectedStyle CssClass="selected"/>
<DataBindings>
<asp:MenuItemBinding DataMember="Item" NavigateUrlField="Url" TextField="Text" />
</DataBindings>
</asp:Menu>
<asp:XmlDataSource ID="XmlDataSource1" runat="server" />
code behind is like this :
public partial class Menu : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
SelectRighMenuItem();
}
}
/// <summary>
///
/// </summary>
void SelectRighMenuItem()
{
string appDataPath = HttpContext.Current.Server.MapPath("~/App_Data");
this.XmlDataSource1.DataFile = appDataPath + "\\" + GetRole() + "_menu.xml";
this.XmlDataSource1.XPath = #"/Items/Item";
}
protected string GetRole()
{
string role = string.Empty;
role = Session["Roles"].ToString();
return role;
}
}
what i tried is :
$(".art-hmenu>ul>li").on("click", "a", function (event) {
debugger;
$(this).addClass("selected");
});
but this is not working !!
i also try to set StaticSelectedStyle!! but also not working!
stylesheet is i am using is :
/* menu structure */
ul.art-hmenu a, ul.art-hmenu a:link, ul.art-hmenu a:visited, ul.art-hmenu a:hover {
outline: none;
position: relative;
z-index: 11;
}
.active {
color:green;
background-color:yellow;
}
ul.art-hmenu, ul.art-hmenu ul {
display: block;
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
ul.art-hmenu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
z-index: 5;
background: none;
}
ul.art-hmenu li:hover {
z-index: 10000;
white-space: normal;
}
ul.art-hmenu li li {
float: none;
width: auto;
}
ul.art-hmenu li:hover > ul {
visibility: visible;
top: 100%;
}
ul.art-hmenu li li:hover > ul {
top: 0;
left: 100%;
}
ul.art-hmenu:after, ul.art-hmenu ul:after {
content: ".";
height: 0;
display: block;
visibility: hidden;
overflow: hidden;
clear: both;
}
ul.art-hmenu, ul.art-hmenu ul {
min-height: 0;
}
ul.art-hmenu ul {
visibility: hidden;
position: absolute;
z-index: 10;
left: 0;
top: 0;
background-image: url('images/spacer.gif');
padding: 10px 30px 30px 30px;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-left-to-right {
right: auto;
left: 0;
margin: -10px 0 0 -30px;
}
ul.art-hmenu ul.art-hmenu-right-to-left {
left: auto;
right: 0;
margin: -10px -30px 0 0;
}
ul.art-hmenu ul ul {
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
z-index: -1;
}
ul.art-hmenu ul ul.art-hmenu-left-to-right {
right: auto;
left: 0;
padding: 30px 30px 30px 10px;
margin: -30px 0 0 -10px;
margin-left: -11px;
}
ul.art-hmenu ul ul.art-hmenu-right-to-left {
left: auto;
right: 0;
padding: 30px 10px 30px 30px;
margin: -30px -10px 0 0;
margin-right: -11px;
}
ul.art-hmenu li li:hover > ul.art-hmenu-left-to-right {
right: auto;
left: 100%;
}
ul.art-hmenu li li:hover > ul.art-hmenu-right-to-left {
left: auto;
right: 100%;
}
ul.art-hmenu {
position: relative;
padding: 3px 3px 3px 3px;
float: left;
}
/* end menu structure */
/* menu bar */
.art-nav {
min-width: 700px;
max-width: 1728px;
margin: 0 auto;
min-height: 36px;
z-index: 100;
margin: 0 0 -36px;
width: auto;
top: 214px;
}
.art-nav:before, .art-nav:after {
background-image: url('images/nav.png');
}
.art-nav:before {
right: 0;
}
.art-nav:after {
width: 0;
}
/* end menu bar */
.art-nav-outer {
position: absolute;
width: 100%;
}
.art-nav-wrapper {
position: relative;
margin: 0 auto;
width: auto;
}
.art-nav-inner {
margin: 0 4px;
}
/* end Menu */
/* begin MenuItem */
ul.art-hmenu > li > a {
position: relative;
display: block;
height: 30px;
cursor: pointer;
text-decoration: none;
color: #D2E4EE;
padding: 0 20px;
line-height: 30px;
text-align: center;
}
ul.art-hmenu > li > a:before, ul.art-hmenu > li > a:after {
position: absolute;
display: block;
content: ' ';
top: 0;
bottom: 0;
z-index: -1;
background-image: url('images/menuitem.png');
}
ul.art-hmenu > li > a:before {
left: 0;
right: 12px;
background-position: top left;
}
ul.art-hmenu > li > a:after {
width: 12px;
right: 0;
background-position: top right;
}
.art-hmenu a, .art-hmenu a:link, .art-hmenu a:visited, .art-hmenu a:hover {
text-align: left;
text-decoration: none;
}
ul.art-hmenu > li > a.active:before {
background-position: bottom left;
}
ul.art-hmenu > li > a.active:after {
background-position: bottom right;
}
ul.art-hmenu > li > a.active {
color: #000000;
}
ul.art-hmenu > li > a:hover:before, ul.art-hmenu > li:hover > a:before {
background-position: center left;
}
ul.art-hmenu > li > a:hover:after, ul.art-hmenu > li:hover > a:after {
background-position: center right;
}
ul.art-hmenu > li > a:hover, ul.art-hmenu > li:hover > a {
color: #D9E0E8;
}
/* end MenuItem */
/* begin MenuSeparator */
ul.art-hmenu > li:before {
position: absolute;
display: block;
content: ' ';
top: 0;
left: -13px;
width: 13px;
height: 30px;
background: url('images/menuseparator.png') center center no-repeat;
}
ul.art-hmenu > li {
margin-left: 13px;
}
ul.art-hmenu > li:first-child {
margin-left: 0;
}
ul.art-hmenu > li:first-child:before {
display: none;
}
/* end MenuSeparator */
/* begin MenuSubItem */
.art-hmenu ul a {
display: block;
white-space: nowrap;
height: 24px;
background-image: url('images/subitem.png');
background-position: left top;
background-repeat: repeat-x;
border-width: 1px;
border-style: solid;
border-top-width: 0;
border-color: #99ADC2;
min-width: 7em;
text-align: left;
text-decoration: none;
line-height: 24px;
color: #152B38;
margin: 0;
padding: 0 8px;
}
.art-hmenu ul > li:first-child > a {
border-top-width: 1px;
}
.art-hmenu ul a:link , .art-hmenu ul a:visited, .art-hmenu ul a:hover, .art-hmenu ul a:active {
text-align: left;
text-decoration: none;
line-height: 24px;
color: #152B38;
margin: 0;
padding: 0 8px;
}
.art-hmenu ul a:link .highlighted {
color: #152B38;
background-color: #fff;
}
.art-hmenu ul li a:hover {
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.art-hmenu ul li a.art-hmenu-before-hovered {
border-bottom-width: 0 !important;
}
.art-hmenu ul li:hover > a {
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.art-hmenu ul li:hover > a.selected
{
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
.SelectedMenuItem
{
color: #000000;
background-position: left bottom;
border-color: #A76801;
border-top-width: 1px !important;
}
/* end MenuSubItem */
Related
I want to do a Menu with 3 levels using data-parents do close like that:
Menu1
---SubMenu1
------Sub_SubMenu1
------Sub_SubMenu2
---SubMenu2
Menu2
---SubMenu22
------Sub_SubMenu21
------Sub_SubMenu22
---SubMenu22
So I have the following sample code (not with full menu):
<div id="Menu1">
<button data-toggle="collapse" data-target="#div1">
Menu1
</button>
<div id="div1" data-parent="Menu1">
<div id="SubMenu1">
<button data-toggle="collapse" data-target="#div1">
SubMenu1
</button>
<div id="submenu1"></div>
<button data-toggle="collapse" data-target="#submenu2">
SubMenu2
</button>
<div id="submenu2"></div>
</div>
</div>
</div>
My problem is when I open any SubSubMenu And after I open a Menu , SubSubMenu isn't closed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<style>
.animate-menu-push {
left: 0;
position: relative;
transition: all 0.3s ease; }
.animate-menu-push.animate-menu-push-right {
left: 200px; }
.animate-menu-push.animate-menu-push-left {
left: -200px; }
.animate-menu {
position: fixed;
top: 0;
width: 200px;
height: 100%;
transition: all 0.3s ease; }
.animate-menu-left {
left: -200px; }
.animate-menu-left.animate-menu-open {
left: 0; }
.animate-menu-right {
right: -200px; }
.animate-menu-right.animate-menu-open {
right: 0; }
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu > li > a > .fa {
width: 20px; }
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu > li .label,
.sidebar-menu > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu li.sidebar-header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu li.active > .sidebar-submenu {
display: block; }
.sidebar-menu a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu .sidebar-submenu {
display: none;
list-style: none;
padding-left: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu .sidebar-submenu .sidebar-submenu {
padding-left: 20px; }
.sidebar-menu .sidebar-submenu > li > a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
color: #fff; }
.sidebar-menu-rtl {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu-rtl > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu-rtl > li > a {
padding: 12px 15px 12px 5px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu-rtl > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl > li:hover > a, .sidebar-menu-rtl > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu-rtl > li .label,
.sidebar-menu-rtl > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu-rtl li.sidebar-header {
padding: 10px 15px 10px 25px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu-rtl li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu-rtl li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu-rtl li.active > .sidebar-submenu {
display: block; }
.sidebar-menu-rtl a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu-rtl .sidebar-submenu {
display: none;
list-style: none;
padding-right: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu-rtl .sidebar-submenu .sidebar-submenu {
padding-right: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a {
padding: 5px 15px 5px 5px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu-rtl .sidebar-submenu > li.active > a, .sidebar-menu-rtl .sidebar-submenu > li > a:hover {
color: #fff; }
</style>
<body>
<section style="width: 200px">
<ul class="sidebar-menu">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level One</li>
<li>
<i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Two</li>
<li>
<i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Three</li>
<li><i class="fa fa-circle-o"></i> Level Three</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-circle-o"></i> Level One</li>
</ul>
</li>
</ul>
</section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$.sidebarMenu = function(menu) {
var animationSpeed = 300,
subMenuSelector = '.sidebar-submenu';
$(menu).on('click', 'li a', function(e) {
var $this = $(this);
var checkElement = $this.next();
if (checkElement.is(subMenuSelector) && checkElement.is(':visible')) {
checkElement.slideUp(animationSpeed, function() {
checkElement.removeClass('menu-open');
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is(subMenuSelector)) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp(animationSpeed);
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown(animationSpeed, function() {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
});
}
//if this isn't a link, prevent the page from being redirected
if (checkElement.is(subMenuSelector)) {
e.preventDefault();
}
});
}
$.sidebarMenu($('.sidebar-menu'))
</script>
</body>
</html>
If you want to test it in the "Code snippet" will appear exactly as it appears on smart phones, but the appearance will vary completely on the desktop
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Test</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Menus
<ul>
<li>Menu 1
<ul>
<li>Sub menu 1.1
<ul>
<li>Sub_SubMenu 1.1.1</li>
<li>Sub_SubMenu 1.1.2</li>
</ul>
</li>
<li>Sub menu 1.2</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub menu 2.1
<ul>
<li>Sub_SubMenu 2.1.1</li>
<li>Sub_SubMenu 2.1.2</li>
</ul>
</li>
<li>Sub menu 2.2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> Settings</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>
I am working on a custom menu control in ASP.Net.
I've created a separate new project on ASP.Net webform c# for menu and finally get the desire output which I want.
Desire Output
Now when I put menu control css and other HTML code in my running application which is on VB.Net then all custom css was gone and ASP.Net default CSS Classes override it. Below is my current output:
Here is my masterpage code:
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="false" />
<asp:Menu
ID="Menu"
runat="server"
DataSourceID="SiteMapDataSource1"
Orientation="Horizontal"
OnMenuItemDataBound="OnMenuItemDataBound"
IncludeStyleBlock="false"
StaticEnableDefaultPopOutImage="false"
CssClass="AHMenu">
<LevelSubMenuStyles>
<asp:SubMenuStyle CssClass="AHlevel1" />
<asp:SubMenuStyle CssClass="AHlevel2" />
<asp:SubMenuStyle CssClass="AHlevel3" />
<asp:SubMenuStyle CssClass="AHlevel4" />
</LevelSubMenuStyles>
<LevelMenuItemStyles>
<asp:MenuItemStyle CssClass="AHlevel1Style" />
<asp:MenuItemStyle CssClass="AHlevel2Style" />
<asp:MenuItemStyle CssClass="AHlevel3Style" />
<asp:MenuItemStyle CssClass="AHlevel4Style" />
</LevelMenuItemStyles>
</asp:Menu>
In browser view source all my CSS gone and override with default CSS. As shown below:
Here is my CSS:
#Menu > ul.AHlevel1 > li:hover {
background-color: white;
}
#Menu > ul.AHlevel1 > li:hover a.AHlevel1Style {
color: black !important;
}
.AHMenu {
float: none !important;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: #1965b0;
}
.AHMenu * {
float: none !important;
}
.AHMenu a:hover {
text-decoration: none;
}
.AHMenu .AHlevel1Style {
cursor: pointer;
color: white;
}
.AHMenu .AHlevel2Style, .AHMenu .AHlevel3Style, .AHMenu .AHlevel4Style {
color: #1965b0;
}
.AHMenu .AHlevel4Style {
cursor: pointer;
}
.AHMenu .AHlevel1 {
order: 0;
margin-bottom: 0;
padding: 0;
width: inherit !important;
}
.AHMenu .AHlevel1 li {
display: inline-block;
position: static !important;
padding: 12px;
}
.AHMenu .AHlevel2 {
/*display: block !important;*/
background: white;
width: inherit !important;
padding: 0 40px;
border: 1px solid #1965b0;
border-top: none;
/*border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px;*/
height: 250px;
}
.AHMenu .AHlevel2 li {
display: inline-block;
position: relative !important;
width: 200px;
padding: 12px 0;
padding-bottom: 0;
}
.AHMenu .AHlevel3 {
display: block !important;
padding: 0;
background: white;
left: 0 !important;
top: 70px !important;
border-bottom: 2px solid #1965b0;
}
.AHMenu .AHlevel3 li {
font-weight: 700;
font-family: calibri;
font-size: 19px;
display: inline-block;
position: initial;
width: auto;
margin: 6px 0;
padding: 0;
}
.AHMenu .AHlevel4 {
display: block !important;
padding: 0;
background: white;
left: 22px !important;
top: 38px !important;
}
.AHMenu .AHlevel4 li {
font-family: calibri;
font-size: 14px;
display: inline-block;
position: initial;
width: auto;
padding: 0;
margin: 0;
font-weight: 300;
white-space: nowrap;
}
.AHMenu .AHlevel4 li:before {
content: "►";
display: block;
float: left;
width: 1.2em;
color: #1965b0;
}
#AHMenu::after {
content: '';
flex-grow: 1;
order: 0;
}
Hi guys,
i have been debugging and reading for many hours but I can't seem to find the issue.
I'm not the most experienced coder so I turn to you guys.
I'm running an asp.net c# page created from a modified visual studio template.
In visual studio test every browser works like a charm but when now I published it to IIS, IE doesn't work anymore (other browsers do).
My master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Aanmelding.SiteMaster" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<title>Portaal</title>
<asp:PlaceHolder runat="server">
<%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:BundleReference runat="server" Path="/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<asp:ContentPlaceHolder runat="server" ID="HeadContent" />
</head>
My page:
<%# Page Title="Portaal" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Aanmelding._Default" %>
<asp:Content runat="server" ID="FeaturedContent" ContentPlaceHolderID="FeaturedContent">
<section class="featured">
<div class="content-wrapper">
<hgroup class="title">
<h1>Welkom. </h1>
</hgroup>
</div>
</section>
My CSS:
html {
background-color: #e2e2e2;
margin: 0;
padding: 0;
}
.button {
border-top: 1px solid #ffffff;
padding: 9px 18px;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
color: #e80c4d;
font-size: 12px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.button:hover {
background: #e80c4e;
background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#e80c4e));
background: -webkit-linear-gradient(top, #ffffff, #e80c4e);
background: -moz-linear-gradient(top, #ffffff, #e80c4e);
background: -ms-linear-gradient(top, #ffffff, #e80c4e);
background: -o-linear-gradient(top, #ffffff, #e80c4e);
color: white;
}
.button:active {
border-top-color: #ffffff;
background: #ffffff;
}
a.HyperLinkHover {
color: #95FBCF;
background-color:#ff0;
background-color: #377CB1; }
a.HyperLinkHover:visited { color:Purple;}
body {
background-color: #fff;
border-top: solid 10px #000;
color: #333;
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
}
a {
color: #333;
outline: none;
padding-left: 3px;
padding-right: 3px;
text-decoration: underline;
}
a:link, a:visited,
a:active, a:hover {
color: #333;
}
a:hover {
background-color: #c7d1d6;
}
header, footer, hgroup,
nav, section {
display: block;
}
mark {
background-color: #a6dbed;
padding-left: 5px;
padding-right: 5px;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.clear-fix:after {
content: ".";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
h1, h2, h3,
h4, h5, h6 {
color: #000;
margin-bottom: 0;
padding-bottom: 0;
}
h1 {
font-size: 2em;
}
h2 {
font-size: 1.75em;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
h5 a:link, h5 a:visited, h5 a:active {
padding: 0;
text-decoration: none;
}
/* main layout
----------------------------------------------------------*/
.content-wrapper {
margin: 0 auto;
max-width: 960px;
}
#body {
background-color: #fff;
clear: both;
padding-bottom: 35px;
}
.main-content {
background: url("../Images/accent.png") no-repeat;
padding-left: 10px;
padding-top: 10px;
}
header .content-wrapper {
padding-top: 20px;
}
footer {
clear: both;
background-color: #e80c4d;
font-size: .8em;
height: 10px;
}
/* site title
----------------------------------------------------------*/
.site-title {
color: #e80c4d;
font-family: Rockwell, Consolas, "Courier New", Courier, monospace;
font-size: 2.3em;
margin: 0;
}
.site-title a, .site-title a:hover, .site-title a:active {
background: none;
color: #c8c8c8;
outline: none;
text-decoration: none;
}
/* login
----------------------------------------------------------*/
#login {
display: block;
font-size: .85em;
margin: 0 0 10px;
text-align: right;
}
#login a {
background-color: #d3dce0;
margin-left: 10px;
margin-right: 3px;
padding: 2px 3px;
text-decoration: none;
}
#login a.username {
background: none;
margin-left: 0px;
text-decoration: underline;
}
#login ul {
margin: 0;
}
#login li {
display: inline;
list-style: none;
}
/* menu
----------------------------------------------------------*/
ul#menu {
font-size: 1.3em;
font-weight: 600;
margin: 0 0 5px;
padding: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
padding-left: 15px;
}
ul#menu li a {
background: none;
color: #000;
text-decoration: none;
}
ul#menu li a:hover {
color: #e80c4d;
text-decoration: none;
}
/* page elements
----------------------------------------------------------*/
/* featured */
.featured {
background-color: #e80c4d;
}
.featured .content-wrapper {
background-color: #e80c4d;
color: #3e5667;
padding: 20px 10px 10px 10px;
}
.featured hgroup.title h1, .featured hgroup.title h2 {
color: #fff;
}
.featured p {
font-size: 1.1em;
}
/* page titles */
hgroup.title {
margin-bottom: 10px;
}
hgroup.title h1, hgroup.title h2 {
display: inline;
}
hgroup.title h2 {
font-weight: normal;
margin-left: 3px;
}
/* features */
section.feature {
width: 300px;
float: left;
padding: 10px;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
margin: 25px 0;
padding-left: 45px;
}
ol.round li.zero {
background: url("../Images/orderedList0.png") no-repeat;
}
ol.round li.one {
background: url("../Images/orderedList1.png") no-repeat;
}
ol.round li.two {
background: url("../Images/orderedList2.png") no-repeat;
}
ol.round li.three {
background: url("../Images/orderedList3.png") no-repeat;
}
ol.round li.four {
background: url("../Images/orderedList4.png") no-repeat;
}
ol.round li.five {
background: url("../Images/orderedList5.png") no-repeat;
}
ol.round li.six {
background: url("../Images/orderedList6.png") no-repeat;
}
ol.round li.seven {
background: url("../Images/orderedList7.png") no-repeat;
}
ol.round li.eight {
background: url("../Images/orderedList8.png") no-repeat;
}
ol.round li.nine {
background: url("../Images/orderedList9.png") no-repeat;
}
/* content */
article {
float: left;
width: 70%;
}
aside {
float: right;
width: 25%;
}
aside ul {
list-style: none;
padding: 0;
}
aside ul li {
background: url("../Images/bullet.png") no-repeat 0 50%;
padding: 2px 0 2px 20px;
}
.label {
font-weight: 700;
}
/* login page */
#loginForm {
border-right: solid 2px #c8c8c8;
float: left;
width: 55%;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 40px;
float: left;
width: 40%;
}
#socialLoginForm h2 {
margin-bottom: 5px;
}
fieldset.open-auth-providers {
margin-top: 15px;
}
fieldset.open-auth-providers button {
margin-bottom: 12px;
}
/* contact */
.contact h3 {
font-size: 1.2em;
}
.contact p {
margin: 5px 0 0 10px;
}
.contact iframe {
border: 1px solid #333;
margin: 5px 0 0 10px;
}
/* forms */
fieldset {
border: none;
margin: 0;
padding: 0;
}
fieldset legend {
display: none;
}
fieldset ol {
padding: 0;
list-style: none;
}
fieldset ol li {
padding-bottom: 5px;
}
label {
display: inline;
font-weight: 600;
}
label.checkbox {
display: block;
}
input:focus, textarea:focus {
border: 1px solid #7ac0da;
}
input[type="checkbox"] {
background: transparent;
border: inherit;
width: auto;
}
input[type="submit"],
input[type="button"],
button {
background-color: #d3dce0;
border: 1px solid #787878;
cursor: pointer;
font-size: 1.2em;
font-weight: 600;
padding: 7px;
margin-right: 8px;
width: auto;
}
td input[type="submit"],
td input[type="button"],
td button {
font-size: 1em;
padding: 4px;
margin-right: 4px;
}
/* info and errors */
.message-info {
border: 1px solid;
clear: both;
padding: 10px 20px;
}
.message-error {
clear: both;
color: #e80c4d;
font-size: 1.1em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.message-success {
color: #7ac0da;
font-size: 1.3em;
font-weight: bold;
margin: 20px 0 10px 0;
}
.error {
color: #e80c4d;
}
/* styles for validation helpers */
.field-validation-error {
color: #e80c4d;
font-weight: bold;
}
.field-validation-valid {
display: none;
}
input.input-validation-error {
border: 1px solid #e80c4d;
}
input[type="checkbox"].input-validation-error {
border: 0 none;
}
.validation-summary-errors {
color: #e80c4d;
font-weight: bold;
font-size: 1.1em;
}
.validation-summary-valid {
display: none;
}
/* tables
----------------------------------------------------------*/
table {
border-collapse: collapse;
border-spacing: 0;
margin-top: 0.75em;
border: 0 none;
}
th {
font-size: 1.2em;
text-align: left;
border: none 0px;
padding-left: 0;
}
th a {
display: block;
position: relative;
}
th a:link, th a:visited, th a:active, th a:hover {
color: #333;
font-weight: 600;
text-decoration: none;
padding: 0;
}
th a:hover {
color: #000;
}
th.asc a, th.desc a {
margin-right: .75em;
}
th.asc a:after, th.desc a:after {
display: block;
position: absolute;
right: 0em;
top: 0;
font-size: 0.75em;
}
th.asc a:after {
content: '▲';
}
th.desc a:after {
content: '▼';
}
td {
padding: 0.25em 2em 0.25em 0em;
border: 0 none;
}
tr.pager td {
padding: 0 0.25em 0 0;
}
/********************
* Mobile Styles *
********************/
#media only screen and (max-width: 850px) {
/* header
----------------------------------------------------------*/
header .float-left,
header .float-right {
float: none;
}
/* logo */
header .site-title {
margin: 10px;
text-align: center;
}
/* login */
#login {
font-size: .85em;
margin: 0 0 12px;
text-align: center;
}
#login ul {
margin: 5px 0;
padding: 0;
}
#login li {
display: inline;
list-style: none;
margin: 0;
padding: 0;
}
#login a {
background: none;
color: #999;
font-weight: 600;
margin: 2px;
padding: 0;
}
#login a:hover {
color: #333;
}
/* menu */
nav {
margin-bottom: 5px;
}
ul#menu {
margin: 0;
padding: 0;
text-align: center;
}
ul#menu li {
margin: 0;
padding: 0;
}
/* main layout
----------------------------------------------------------*/
.main-content,
.featured + .main-content {
background-position: 10px 0;
}
.content-wrapper {
padding-right: 10px;
padding-left: 10px;
}
.featured .content-wrapper {
padding: 10px;
}
/* page content */
article, aside {
float: none;
width: 100%;
}
/* ordered list */
ol.round {
list-style-type: none;
padding-left: 0;
}
ol.round li {
padding-left: 10px;
margin: 25px 0;
}
ol.round li.zero,
ol.round li.one,
ol.round li.two,
ol.round li.three,
ol.round li.four,
ol.round li.five,
ol.round li.six,
ol.round li.seven,
ol.round li.eight,
ol.round li.nine {
background: none;
}
/* features */
section.feature {
float: none;
padding: 10px;
width: auto;
}
section.feature img {
color: #999;
content: attr(alt);
font-size: 1.5em;
font-weight: 600;
}
/* forms */
input {
width: 90%;
}
/* login page */
#loginForm {
border-right: none;
float: none;
width: auto;
}
#loginForm .validation-error {
display: block;
margin-left: 15px;
}
#socialLoginForm {
margin-left: 0;
float: none;
width: auto;
}
/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
float: none;
}
footer {
text-align: center;
height: auto;
padding: 10px 0;
}
footer p {
margin: 0;
}
}
/* END: Mobile Styles */
</pre>**
Can somebody help me?
Many CSS3 features (like round border) are not supported in IE8 and under versions, better to use IE10 Or later one
i found the problem.
When opening my site, the IE11 went to compatiblity mode IE7.
After toying around in the developer mode i tried switching the document mode to 11 and it immediately worked like a charm.
I simply added:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
to my master page, did a refresh and now everything works.
Thank you guys, for the responses.
I am very new to programing and this is my first project. I am trying to print out just the information shown in the screen shots, which do print out. Which is the "Caplugs West" "PN" "QTY" and "B#". This print fine going to a normal printer and normal paper size. But I am trying to print this information to a label and when I print it to the label it prints out the the whole page even the bottom blank part of it with no information. I just want to print the information and that's it. I do not want to print the header and footer and I do not want to print the blank part of the page. Is there a way to do this?
here is my Index View Model
#model NavisionStore.WebUI.Models.PrintIndexViewModel
#{
ViewBag.Title = "Bag Labels: Your Print";
}
<h2>Caplugs West</h2>
<table>
<tbody>
#foreach(var line in Model.Print.Lines) {
<tr>
<td>PN: #line.Product.PartName</td>
</tr>
<tr>
<td>QTY: #line.Product.Quantity</td>
</tr>
<tr>
<td>B# #line.Product.BagNumber</td>
</tr>
}
</tbody>
</table>
<p align="center" class="actionButtons noprint">
Continue shopping
</p>
Her is my Site.css
body {
font-size: .85em;
font-family: "Segoe UI", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
header, footer, nav, section {
display: block;
}
/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
textarea {
min-height: 75px;
}
.editor-label {
margin: 1em 0 0 0;
}
.editor-field {
margin: 0.5em 0 0 0;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #f00;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #f00;
background-color: #fee;
}
.validation-summary-errors {
font-weight: bold;
color: #f00;
}
.validation-summary-valid {
display: none;
}
BODY {
font-family: Cambria, Georgia, "Times New Roman"; margin: 0;
}
DIV#header DIV.title, DIV.item H3, DIV.item H4, DIV.pager A {
font: bold 1em "Arial Narrow", "Franklin Gothic Medium", Arial;
}
DIV#header {
background-color: #444;
border-bottom: 2px solid #111;
color: white;
}
DIV#header DIV.title {
font-size: 2em;
padding: .6em;
}
DIV#content {
border-left: 2px solid gray;
margin-left: 9em;
padding: 1em;
}
DIV#categories {
float: left;
width: 8em;
padding: .3em;
}
DIV.item {
border-top: 1px dotted gray;
padding-top: .7em;
margin-bottom: .7em;
}
DIV.item:first-child {
border-top: none;
padding-top: 0;
}
DIV.item H3 {
font-size: 1.3em;
margin: 0 0 .25em 0;
}
DIV.item H4 {
font-size: 1.1em;
margin: .4em 0 0 0;
}
DIV.pager {
text-align: right;
border-top: 2px solid silver;
padding: .5em 0 0 0;
margin-top: 1em;
}
DIV.pager A {
font-size: 1.1em;
color: #666;
text-decoration: none;
padding: 0 .4em 0 .4em;
}
DIV.pager A:hover {
background-color: silver;
}
DIV.pager A.selected {
background-color: #353535;
color: white;
}
/*This styles the left menu pane*/
DIV#categories A {
font: bold 1.1em "Arial Narrow","Franklin Gothic Medium",Arial;
display: block;
text-decoration: none;
padding: .6em;
border-bottom: 1px solid silver;
}
DIV#categories A.selected {
background-color: #666;
color: white;
}
DIV#categories A.hover {
background-color: #CCC;
}
DIV#categories A.selected:hover {
background-color: #666;
}
FORM {
margin: 0;
padding: 0;
}
DIV.item FORM {
float: right;
}
DIV.item INPUT {
color: white;
background-color: #333;
border: 1px solid black;
cursor: pointer;
}
H2 {
margin-top: 0.3em;
}
.actionButtons A, INPUT.actionButtons {
font: .8em Arial;
color: white;
margin: .5em;
text-decoration: none;
padding: .15em 1.5em .2em 1.5em;
background-color: #353535;
border: 1px solid black;
}
#media print {
.noprint {
display: none;
}
}
#media print {
#header, #categories, .actionButtons {
display: none;
}
DIV#content {
border-left: 0;
margin-left: 0;
}
}
I am trying to get my labels and text boxes to line up and I'm not getting it work right.
Here is what I have:
AddCustomer.cshtml
#model SuburbanCustPortal.Models.AddCustomerModel
#{
ViewBag.Title = "Add an Existing Account";
}
<h2>Change Password</h2>
<p>
Use the form below to add an existing account to your web login.
</p>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Account not found. Please verify the infomartion below and try again.")
<div>
<fieldset>
<legend>Account Information</legend>
<p>
<span class="smalllabel">
#Html.LabelFor(m => m.Branch)
</span>
<span class="largelabel">
#Html.LabelFor(m => m.AccountNumber)
</span>
<br />
<span class="smalltextbox">
#Html.TextBoxFor(m => m.Branch)
#Html.ValidationMessageFor(m => m.Branch)
</span>
<span class="largetextbox">
#Html.TextBoxFor(m => m.AccountNumber)
#Html.ValidationMessageFor(m => m.AccountNumber)
</span>
</p>
<div class="editor-label">
AND
</div>
<div class="editor-label">
#Html.LabelFor(m => m.LastName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.LastName)
#Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="editor-label">
OR
</div>
<div class="editor-label">
#Html.LabelFor(m => m.PhoneNumber)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.PhoneNumber)
#Html.ValidationMessageFor(m => m.PhoneNumber)
</div>
<p>
<input type="submit" value="Register" />
</p>
</fieldset>
</div>
}
This is my Site.css:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
background-color: #5c87b2;
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
a:link {
color: #034af3;
text-decoration: underline;
}
a:visited {
color: #505abc;
}
a:hover {
color: #1d60ff;
text-decoration: none;
}
a:active {
color: #12eb87;
}
p, ul {
margin-bottom: 20px;
line-height: 1.6em;
}
header,
footer,
nav,
section {
display: block;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-size: 1.5em;
color: #000;
}
h1 {
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2 {
padding: 0 0 10px 0;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page {
width: 90%;
margin-left: auto;
margin-right: auto;
}
header, #header {
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
header h1, #header h1 {
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-size: 32px !important;
text-shadow: 1px 1px 2px #111;
}
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
}
footer,
#footer {
background-color: #fff;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a {
background-color: #fff;
color: #000;
}
/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
textarea {
min-height: 75px;
}
input[type="text"],
input[type="password"] {
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}
select {
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
}
input[type="submit"] {
font-size: 1.2em;
padding: 5px;
}
/* TABLE
----------------------------------------------------------*/
table {
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td {
padding: 5px;
border: solid 1px #e8eef4;
}
table th {
padding: 6px 5px;
text-align: left;
background-color: #e8eef4;
border: solid 1px #e8eef4;
}
/* MISC
----------------------------------------------------------*/
.clear {
clear: both;
}
.error {
color: Red;
}
nav,
#menucontainer {
margin-top: 40px;
}
div#title {
display: block;
float: left;
text-align: left;
}
#logindisplay {
font-size: 1.1em;
display: block;
text-align: right;
margin: 10px;
color: White;
}
#logindisplay a:link {
color: white;
text-decoration: underline;
}
#logindisplay a:visited {
color: white;
text-decoration: underline;
}
#logindisplay a:hover {
color: white;
text-decoration: none;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
margin: 1em 0 0 0;
}
.display-field,
.editor-field {
margin: 0.5em 0 0 0;
}
.text-box {
width: 30em;
}
.text-box.multi-line {
height: 6.5em;
}
.tri-state {
width: 6em;
}
/* custom created by eric */
.smalllabel {
margin: 1em 0 0 0;
width: 30em;
}
.smalltextbox {
margin: 1em 0 0 0;
width: 30em;
}
.largelabel {
margin: 1em 0 0 0;
width: 60em;
}
.largetextbox {
margin: 1em 0 0 0;
width: 60em;
}
And this is the results:
I am trying to get the Branch label and text box to be the same small size and the account number to be the larger (same) size.
Apparently I'm not getting the css classes right in the code.
Any ideas what I am doing wrong?
try using -
#Html.TextBoxFor(m => m.Branch, new { #class = "smalltextbox" })
this will apply the class to the textbox directly and not the span wrapper - I think you are using the default css file with a razor page that contains a css class that is applying to your textbox while you are applying your css to the span wrapper.
Also, smalltextbox and smalllabel look the same to me :) - not sure if you need them both.
Make smalltextbox and small label float: left.