as the title states. I have this popup that I need to be responsive. Right now, when I adjust the window size, the buttons get off the window for some reason. I have used % instead of pixels, still nothing. Anyone got advice?
CSS:
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
font-size: 13px;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
margin-top: 200px;
padding: 20px;
border: 2px solid cornflowerblue;
width: 21%;
height: 10.5%;
min-width: 400px;
min-height: 15%;
}
.modalHdr {
margin-left: -1px;
font-size: 20px;
}
.popupConfirm {
border: 1px #aaa;
padding: 10px 82px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 13px;
margin: 20% 2px;
cursor: pointer;
background: lightgrey;
color: black;
}
ASPX:
<div id="myModal" class="modal">
<div class="modal-content">
<h3 class="modalHdr">
<asp:Label runat="server" Text="TRNSLTDelete Contact" />
</h3>
<asp:LinkButton ToolTip="TRNSLTNo" ID="ButtonNo" runat="server" Text="TRNSLTNo" CssClass="popupConfirm" />
<asp:LinkButton OnClick="ButtonYes_OnClick" ToolTip="TRNSLTYes" ID="ButtonYes" runat="server" Text="TRNSLTYes" CssClass="popupConfirm" />
</div>
</div>
Try use VH and VW, https://css-tricks.com/viewport-sized-typography/ and #media screen
Related
I'm having trouble with the style for a disabled button.
The enabled button works, the hover works but the disabled button reverts to the default? style:
CSS:
.smlbutton:enabled{
color: #fff;
background-color: #1d60ff;
height: 20px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:hover{
color: #fff;
background-color: #1d60ff;
height: 22px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:disabled,.smlbutton.disabled{
color: #fff;
background-color: #1d60ff;
height: 200px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
The ASPX:
<asp:TemplateField HeaderText="Approval Drawings Approved" Visible="true">
<ItemTemplate>
<asp:TextBox ID="tbApprovals" runat="server" Text='<%# Bind("Approvals", "{0:MM/dd/yy}") %>' AutoPostBack="true" Enabled="true" OnTextChanged="tbDate_OnTextChangeApprovals" Width="100px"></asp:TextBox>
<ajaxToolkit:CalendarExtender ID="tbApprovals_CalendarExtender" runat="server" TargetControlID="tbApprovals" />
<asp:Button ID="btnApprovalsConvertToBaseline" class="smlbutton" runat="server" Text="B." OnClick="btnApprovalsConvertToBaseline_Click" Enabled="FALSE" />
<asp:Button ID="btnApprovalsCompleteTask" class="smlbutton" runat="server" Text="D." OnClick="btnApprovalsCompleteTask_Click" Enabled="FALSE" />
<asp:Button ID="btnApprovalsCompleteTaskOnTime" class="smlbutton" runat="server" Text="DOT" OnClick="btnApprovalsCompleteTaskOnTime_Click" Enabled="FALSE" />
</ItemTemplate>
</asp:TemplateField>
I enable the button using this c#
try
{
TextBox tempApprovals = (TextBox)e.Row.Cells[9].FindControl("tbApprovals");
DateTime myDateApprovals = DateTime.ParseExact(tempApprovals.Text.ToString(), "yyyy-MM-dd",
System.Globalization.CultureInfo.InvariantCulture);
if (myDateApprovals <= DateTime.Now.Date && e.Row.Cells[10].Text != "Actual")
{
tempApprovals.ForeColor = System.Drawing.Color.Red;
tempApprovals.Font.Bold = true;
}
Button btnApprovals = (Button)e.Row.Cells[9].FindControl("btnApprovalsConvertToBaseline");
Button btnApprovals2 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTask");
Button btnApprovals3 = (Button)e.Row.Cells[9].FindControl("btnApprovalsCompleteTaskOnTime");
if (e.Row.Cells[10].Text.ToString() == "Forecast")
{
btnApprovals.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Baseline")
{
btnApprovals.Enabled = false;
btnApprovals2.Enabled = true;
btnApprovals3.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Adjusted")
{
btnApprovals.Enabled = false;
btnApprovals2.Enabled = true;
btnApprovals3.Enabled = true;
}
if (e.Row.Cells[10].Text.ToString() == "Actual")
{
btnApprovals2.Enabled = false;
btnApprovals3.Enabled = false;
}
}
catch { }
}
You do not need to style each pseudo-class. Instead, let inherit from parent.
.smlbutton {
color: #fff;
background-color: #1d60ff;
height: 22px;
width: 18px;
padding: 0px;
border: none 0px transparent;
font-size: 7px;
font-weight: lighter;
webkit-border-radius: 20px 10px 10px 10px;
-moz-border-radius: 9px 10px 10px 10px;
border-radius: 5px 20px 20px 20px;
}
.smlbutton:disabled,
.smlbutton[disabled] {
background-color: #0f0;
}
.smlbutton:hover {
background-color: #f00;
}
Here is how my master page is designed:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span> </div>
<div id="navigation">
<table>
<tr>
<td><asp:Menu ID="m" runat="server" Orientation="Horizontal">
<Items>
<asp:MenuItem Text="Home" NavigateUrl="~/Default.aspx"></asp:MenuItem>
</Items>
</asp:Menu></td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
This is my css:
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: 0;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#header {
height: 120px;
overflow: hidden;
}
#Content {
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: absolute;
background: #F8F8FF;
text-align: center;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
Here are issues I am not able to figure:
I am trying to stick footer at bottom, but such a
way that if page has lot of content that should still work.
Center align whole page and master page
Updated : Try this
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Title</title>
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<form id="form1" runat="server">
<div id="header">
<h1 class="Title">Title</h1>
<span class="TagLine">tagline</span>
</div>
<div id="navigation">
<table cellpadding="0" cellspacing="0" width="1000" align="center">
<tr>
<td>
<asp:Menu ID="Menu1" runat="server" Orientation="Horizontal" CssClass="Menu" Font-Names="Verdana" ForeColor="Black" Width="800px">
<staticmenuitemstyle height="40px" />
<dynamicmenuitemstyle cssclass="Menu" height="40px" horizontalpadding="25px" />
<dynamichoverstyle cssclass="menuhover" />
<statichoverstyle cssclass="menuhover" />
<items>
<asp:menuitem text="Home" navigateurl="~/Default.aspx"></asp:menuitem>
</items>
</asp:Menu>
</td>
</tr>
</table>
</div>
<div id="body">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
<!-- Page-specific content will go here... -->
</asp:ContentPlaceHolder>
</div>
<div id="Footer">
<p>footer</p>
</div>
</form>
</div>
</body>
</html>
CSS:
<style type="text/css">
body {
margin: 20px 20px 20px 20px;
padding: 0;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
color: darkslategrey;
width: 960px;
background-color: #F8F8FF;
margin: auto;
padding:auto;
height: 100%;
position: relative;
}
#container {
min-height: 100%;
position: relative;
height: 100%;
}
#body {
padding: 10px;
}
#header {
margin: 10px 10px 0px 10px;
height: 120px;
overflow: hidden;
}
#Content {
padding-top: 1em;
margin: 5px;
background-color: #F8F8FF;
overflow: hidden;
}
#Footer {
position: fixed;
background: #F8F8FF;
text-align: center;
bottom:0px;
}
#header .Title {
color: #2E2E2E;
}
#header h1 {
margin:0px;
padding:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
}
h1 {
padding:0px;
margin:0px;
background-color: #F8F8FF;
overflow: hidden;
font-size: 100%;
}
#header .TagLine {
color: #2E2E2E;
}
.Menu li {
display: inline;
margin: 0px;
}
.Menu a {
text-decoration: none;
background-color: #BDBDBD;
padding: 5px;
color: White;
border-right: .5px solid White;
margin: 0px;
}
.Menu a:hover {
background-color: #BDBDBD;
padding: 5px;
margin: 0px;
}
.Menu {
text-align: justify;
font-size: 25px;
}
.menuhover {
color: #fff;
}
</style>
I have figure out your spacing issue.
spacing issue is related to line-height. You will set line height for h1
header h1 {
padding-top: 1em;
background-color: #F8F8FF;
overflow: hidden;
font-size: 170%;
line-height: 21px;
}
Same issue with content and navigation menu.
Sticky footer : You will add position: fixed; and bottom:0;
Center align whole page and master page. You will add two more property in body css
body {
margin: 0 auto;
width: 80%;
}
I have a CSS3 modal dialog with a gridview that will be populated upon doing a search. However, when I go and actually do the search (and therefore cause a postback), the modal dialog closes. If I manually open it again, the gridview is populated as I wanted.
My question is how to keep the modal dialog open in the code behind after the search. Any help would be greatly appreciated!
This is my CSS:
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 800px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
/*border-radius: 10px;*/
background: #fff;
/*background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);*/
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}
and the HTML:
Open Modal
<div id="openModal" class="modalDialog">
<div>
X
<div>
<asp:Button ID="SearchBtn" runat="server"
OnClick="Search" Text="Search" />
<asp:GridView ID="gridview" GridLines="None"
AutoGenerateColumns="False" runat="server">
<Columns>
<asp:BoundField SortExpression="Name" DataField="Name"
HeaderText="Name" />
</Columns>
</asp:GridView>
</div>
</div>
</div>
If you want the modal to be open after searching and populating the gridview with values, do this.
gridview.DataBind();
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
openModal should be containing the function you need to reopen your modal.
I'm new into developping an asp.net website and when I navigate from page to page or just click on my own section menu, it's flickering in IE9 (didn't tested other IE version yet), but not in Firefox. I searched over the Internet and found this solution:
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
But this is not working for me actually...
Here's my site.Master page:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="HomeSite.SiteMaster" %>
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<meta http-equiv="Page-Enter" content="blendTrans(Duration=0)" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0)" />
<link type="text/css" rel="stylesheet" href="~/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="False">
<AnonymousTemplate>
[ Partner Login ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server"
meta:resourcekey="HeadLoginNameResource1" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect"
LogoutText="Log Out" LogoutPageUrl="~/"
meta:resourcekey="HeadLoginStatusResource1"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
</div>
<div class="menuContainer">
<div class="menuRight">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal"
meta:resourcekey="NavigationMenuResource1">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"
meta:resourcekey="MenuItemResource1"/>
<asp:MenuItem NavigateUrl="~/Literature.aspx" Text="Documents"
meta:resourcekey="MenuItemResource2"/>
<asp:MenuItem NavigateUrl="~/Photos.aspx" Text="Photos & videos"
meta:resourcekey="MenuItemResource4"/>
<asp:MenuItem NavigateUrl="~/Download.aspx" Text="Download"
meta:resourcekey="MenuItemResource5"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"
meta:resourcekey="MenuItemResource6"/>
</Items>
</asp:Menu>
</div>
<div class="menuLeft">
</div>
</div>
<div class="subMenu">
<img src="Styles/images/Blue-Background.jpg" alt="" width="100%" height="150px" style="vertical-align: top;" />
<img src="Styles/images/Logo_Flofab.png" alt='' height='100px' style="position:absolute;z-index:2;top:5px;left:120px;" />
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
</div>
<div class="footerContainer">
<div style='float:left;'>Copyright © 2012 Flofab All rights reserved.</div>
<div style='float:right;'>
<a href='http://www.linkedin.com'>
<img src="Styles/images/linkedin.png" alt='' style='border:0;' />
</a>
<a href='http://www.twitter.com'>
<img src="Styles/images/twitter.png" alt='' style='border:0;' />
</a>
<a href='http://www.facebook.com'>
<img src="Styles/images/facebook-icon.png" alt='' style='border:0;' />
</a>
</div>
</div>
</form>
</body>
</html>
Now here's my Default.aspx
<%# Page Title="Flofab" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="HomeSite._Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id='mainTitle' class='mainTitle' runat='server'>
Home
</div>
<div id='mainBody' class='mainBody'>
<p>
Put text here...
<br />
This is some text to be sure it's placed over the FF logo. <br /> Is my text over it? I'm going to check now...
</p>
</div>
</asp:Content>
And my .css file
body
{
/*background-color: #fff;*/
width:100%;
height:100%;
margin: 0px;
padding: 0px;
color: #575757;
font: 12px/18px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif;
background-image:url('images/Body-Background.jpg');
background-repeat:repeat-x;
}
a:link, a:visited
{
color: #034af3;
}
a:hover
{
color: #1d60ff;
text-decoration: none;
}
a:active
{
color: #034af3;
}
p
{
margin: 0 10px 10px 10px;
line-height: 1.6em;
}
table
{
margin: 5px;
border: 1px solid #4194E7;
border-collapse:collapse;
padding-left: 5px;
padding-right: 5px;
}
table th
{
border-bottom: 1px solid #4194E7;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
color:White;
padding-right: 10px;
}
table td
{
border-bottom: 1px solid #4194E7;
padding: 5px;
}
tr.row1
{
background-color: #B4D4FA;
}
tr.row2
{
background-color: #A0D4FA;
}
.page
{
width: 80%;
min-width:600px;
margin: 2px auto 0px auto;
}
.header
{
position: relative;
margin: 0px;
padding: 0px;
width: 100%;
min-height:50px;
}
.header h1
{
font-weight: 700;
margin: 0px;
padding: 0px 0px 0px 20px;
color: #000;
border: none;
line-height: 2em;
font-size: 2em;
}
.subMenu
{
margin-top: 35px;
/*border: 1px solid gray;*/
position: relative;
}
.main
{
margin-top: 5px;
min-height: 420px;
border-left: 1px solid #4194E7;
border-right: 1px solid #4194E7;
border-bottom: 1px solid #4194E7;
background-color:#C8D4FA;
}
.mainTitle
{
padding: 5px 0px 2px 10px;
/*border-bottom: 1px solid white;*/
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
font-size: 1.5em;
font-variant: small-caps;
font-weight: bold;
color: #fff;
min-height:25px;
}
.mainBody
{
background-image:url('images/LogoFF-Filigrane.png');
background-repeat:no-repeat;
min-height: 395px; /*.main height - .mainTitle height*/
padding-top:5px;
}
.mainItems
{
padding-left: 10px;
padding-right: 10px;
margin-top:5px;
border-bottom: 1px solid gray;
/*background-color:#B8B8B8;*/
font-size: 1em;
font-variant: small-caps;
text-transform: none;
width: 120px;
}
.leftCol
{
padding: 6px 0px;
margin: 12px 8px 8px 8px;
width: 200px;
min-height: 200px;
}
.footerContainer
{
color: #fff;
padding-left: 2px;
margin: 0px auto;
text-align: center;
line-height: normal;
width: 80%;
}
.footerContainer a:link
{
text-decoration:none;
}
div.menuContainer
{
float:right;
width:100%;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
border-top:1px solid gray;
}
div.menuLeft
{
width:100%;
color:#ff99dd;
display:inline;
}
div.menuRight
{
color:#ff99dd;
float:right;
display:inline;
}
.menu
{
padding: 0;
margin: 0;
min-height: 30px;
}
div.menu ul
{
margin: 0;
padding: 0;
float:right;
}
div.menu ul li
{
display: block;
float:left;
background-image:url('images/Menu-Background.jpg');
background-repeat:repeat-x;
border-left:1px solid white;
}
div.menu ul li a
{
color: #fff;
float: left;
padding: 0.3em 1em 0.7em;
text-decoration: none;
}
div.menu ul li a:hover
{
color: #000;
}
div.menu ul li a:active
{
color: #777;
text-decoration: none;
}
fieldset
{
margin: 1em 0px;
padding: 1em;
border: 1px solid #ccc;
}
fieldset p
{
margin: 2px 12px 10px 10px;
}
fieldset.login label, fieldset.register label, fieldset.changePassword label
{
display: block;
}
fieldset label.inline
{
display: inline;
}
legend
{
font-size: 1.1em;
font-weight: 600;
padding: 2px 4px 8px 4px;
}
input.textEntry
{
width: 320px;
border: 1px solid #ccc;
}
input.passwordEntry
{
width: 320px;
border: 1px solid #ccc;
}
div.accountInfo
{
width: 42%;
}
.clear
{
clear: both;
}
.titleLogo
{
display: block;
float: left;
text-align: left;
width: auto;
}
.loginDisplay
{
font-size: 1.1em;
display: block;
text-align: right;
padding: 10px;
color: #fff;
}
.loginDisplay a:link
{
color: #fff;
text-decoration:none;
}
.loginDisplay a:visited
{
color: #fff;
}
.loginDisplay a:hover
{
color: #fff;
}
.failureNotification
{
font-size: 1.2em;
color: Red;
}
.bold
{
font-weight: bold;
}
.submitButton
{
text-align: right;
padding-right: 10px;
}
.floatLeft
{
float:left;
}
.floatRight
{
float:right;
}
.errorContent
{
color: Red;
text-align: center;
font-size: 1.2em;
}
Any idea of what makes IE flicker?
Instead of displaying an image as the background and menu, I changed for css linear-gradient and there's no flickering anymore. Looks like a IE cache problem.
I have an ASP.NET menu and for the items that contain a drop down menu, it displays an arrow in a new <td>, the problem is the spacing is horrible. How do i tap into that <TD> or lessen the spacing between the menu text and Arrow?
Screenshot of menu issue:
HTML Output:
<td style="white-space:nowrap;">
<a class="ctl00_itemMenu_1 StaticMenuItemStyle ctl00_itemMenu_3" style="border-style:none;font-size:1em;" href="Default.aspx"> Home </a>
</td>
<td style="width:0;">
<img style="border-style:none;vertical-align:middle;" alt="Expand Home" src="Images/menu_arrow.gif">
</td>
Menu Control:
<asp:Menu ID="itemMenu" SkinID="MenuSkin" runat="server" Orientation="Horizontal"
CssClass="menu" DynamicItemFormatString=" {0} " StaticItemFormatString=" {0} "
StaticEnableDefaultPopOutImage="true" StaticPopOutImageUrl="~/Images/menu_arrow.gif"
DynamicPopOutImageUrl="~/Images/menu_arrow_dynamic.gif" DynamicEnableDefaultPopOutImage="true"
MaximumDynamicDisplayLevels="5">
<StaticMenuStyle CssClass="StaticMenuStyle" />
<StaticMenuItemStyle Width="100%" CssClass="StaticMenuItemStyle" />
<StaticHoverStyle CssClass="StaticHoverStyle" />
<DynamicMenuStyle CssClass="DynamicMenuStyle" />
<DynamicMenuItemStyle CssClass="DynamicMenuItemStyle" Width="100%" />
<DynamicHoverStyle CssClass="DynamicHoverStyle" />
</asp:Menu>
CSS:
.menu
{
padding: 0px 0px 0px 7px;
margin:0px;
}
.StaticMenuStyle a, .StaticMenuStyle a:visited, .StaticMenuStyle a:active, .StaticMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 3px 9px 3px 9px;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.DynamicMenuStyle a, .DynamicMenuStyle a:visited, .DynamicMenuStyle a:active, .DynamicMenuStyle a:hover
{
color: #ffffff;
text-decoration: none;
padding: 7px 9px 7px 9px;
width: 100%;
height: 100%;
display: table;
font-weight: bold;
font-family: Tahoma, Arial;
}
.StaticMenuStyle td
{
font-weight: normal;
height: 100%;
font-size: 11px;
border-collapse: collapse;
/*cursor: pointer;*/
}
.DynamicMenuStyle table
{
border-collapse: collapse;
border-spacing: 0px;
}
.DynamicMenuStyle td
{
border: solid 1px #ffffff;
font-weight: normal;
width: 100%;
height: 100%;
/*cursor: pointer;*/
background-color: #333333;
border-collapse: collapse;
border-spacing: 0px;
font-size: 11px;
}
.DynamicMenuStyle td table tr td
{
border: solid 0px #ffffff;
padding: 7px 4px;
}
.StaticMenuItemStyle td
{
padding: 7px 0px 7px 0px;
border: 0px solid #ffffff;
font-weight: normal;
text-align: left;
}
.StaticHoverStyle td, .DynamicHoverStyle td
{
background-color: #5c5c5c;
font-weight: bold;
}
.StaticSelectedStyle, .DynamicSelectedStyle
{
font-weight: normal;
cursor: pointer;
}