Here is my Code for the asp.net page and my CSS, hoping someone can find out what I am doing wrong. I'm new to css, and asp.net. I used most of the knowledge I know with Div tags, etc.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="MHConstruction.SiteMaster" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title></title>
<link href="~/NewStyles/Site.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form runat="server">
<div class="page">
<div class="header">
<asp:Image ID="Image1" runat="server" ImageUrl="~/Images/Homes.jpg" ImageAlign="Middle" Width="960px"/>
<div class="title">
</div>
<div class="loginDisplay" dir="ltr">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ Log In ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<center>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal" >
<Items>
<asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
<asp:MenuItem NavigateUrl="~/Basic.aspx" Text="Basic"/>
<asp:MenuItem NavigateUrl="~/Standard.aspx" Text="Standard"/>
<asp:MenuItem NavigateUrl="~/Luxury.aspx" Text="Luxury"/>
<asp:MenuItem NavigateUrl="~/CustomerHome.aspx" Text="Customers"/>
<asp:MenuItem NavigateUrl="~/AdminHome.aspx" Text="Admin"/>
<asp:MenuItem NavigateUrl="~/Logout.aspx" Text="Logout"/>
</Items>
</asp:Menu>
</div>
</center>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Also Here is the CSS that I am currently using. I posted just the css that is applied to the nav menu.
div.hideSkiplink
{
background-color:#3a4f63;
width:100%;
height: 51px;
}
div.menu
{
float:right;
position:relative;
text-align:left;
}
div.menu ul
{
list-style:none;
position:relative;
left:35%;
}
div.menu ul li a, div.menu ul li a:visited
{
background-color: #465c71;
border: 1px #4e667d solid;
color: #dde4ec;
display: block;
line-height: 1.35em;
padding: 4px 20px;
text-decoration: none;
white-space: nowrap;
}
div.menu ul li a:hover
{
background-color: #bfcbd6;
color: #465c71;
text-decoration: none;
}
div.menu ul li a:active
{
background-color: #465c71;
color: #cfdbe6;
text-decoration: none;
}
Two things: you should set up your style the same way as the style block for the menu
<style type="text/css">
/* <![CDATA[ */
#NavigationMenu img.icon { border-style:none;vertical-align:middle; }
#NavigationMenu img.separator { border-style:none;display:block; }
#NavigationMenu img.horizontal-separator { border-style:none;vertical-align:middle; }
#NavigationMenu ul { list-style:none;margin:0;padding:0;width:auto; }
#NavigationMenu ul.dynamic { z-index:1; }
#NavigationMenu a { text-decoration:none;white-space:nowrap;display:block; }
#NavigationMenu a.static { padding-left:0.15em;padding-right:0.15em; }
#NavigationMenu a.popout { background-image:url("/WebResource.axd?d=EMSWJvMqJTxHa4d4S135BwGFA2dQw5pII3m5syZ8p1nYnD3jAotY_XzYmVV_PYohvnNLCZwIu1hO3tdfjxDCY21kymwZShHj9fcW_mi5QQ41&t=634933845276428750");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
/* ]]> */
</style>
Then you should make the wrapping div for the menu 50 percent:
<div style="border:1px solid red; width:50%">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="true" Orientation="Horizontal" >
<Items>
<asp:MenuItem NavigateUrl="~/HomePage.aspx" Text="Home" />
</Items>
</asp:Menu>
</div>
Then use the white-space: nowrap; setting in the menu class itself (not the ul/li/a class) to make sure the items don't wrap.
Related
I have the following controls:
<span class="unCBox">
<asp:CheckBox ID="CheckBox1" runat="server" OnCheckedChanged="cbNacional" CssClass="cbSecciones" />
<asp:Label ID="Label1" runat="server" Text="Label" AssociatedControlID="CheckBox1"></asp:Label>
</span>
and my style is
.unCBox label{
margin: 10px;
padding: 5px;
border: 1px solid gray;
}
.unCBox input[type=checkbox]:checked + label{
border-color:blue;
background-color:black;
}
But it doesn't change when I check it, what am I missing?
Below is a solution using very little jQuery.Hope it helps you:
<head runat="server">
<title></title>
<style type="text/css">
.checked {
background-color: #ff6a00;
color: #fff;
}
.unchecked {
background-color: #fff;
color: #000000;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("#CheckBox1").change(function () {
var css = this.checked ? "checked" : "unchecked";
$("#Label1").removeClass();
$("#Label1").addClass(css);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<span class="unCBox">
<asp:CheckBox ID="CheckBox1" runat="server" OnCheckedChanged="cbNacional" CssClass="cbSecciones" />
<asp:Label ID="Label1" runat="server" Text="Label" AssociatedControlID="CheckBox1"></asp:Label>
</span>
</form>
</body>
I know this is easy. But the StaticSelectedStyle does not change the color of the menu button.
This is my Site.css file:
.panelMenu
{
width: 155px;
padding-top: 5px;
padding-left: 10px;
}
.StaticSelectedMenuStyle
{
font-family:Times New Roman;
color: White;
background-color: #66a598;
border: thin outset #A9A9A9 !important;
font-weight: bold;
font-size: medium;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 20px;
}
.StaticMenuStyle
{
font-family:Times New Roman;
color: White;
background-color: #006a54;
border: thin outset #A9A9A9 !important;
font-weight: bold;
font-size: medium;
padding-top:5px;
padding-bottom:5px;
padding-left: 10px;
padding-right: 20px;
}
.DMenuStyle
{
font-family:Times New Roman;
color: White;
background-color: #008C71;
border: thin outset #A9A9A9;
font-weight: bold;
font-size: medium;
z-index: 110;
}
This is my asp:Menu in my Master.Page file:
<body>
<form runat="server">
<div class="page">
<div class="header">
<img alt="Heritage Valley Health System" src="Images/HVHS_Banner.jpg" style="width: 960px" />
</div>
<table class="style1" cellpadding="0px" align="left">
<tr valign="top">
<td id="cell_menu" valign="top">
<asp:Panel ID="pnlMenu" runat="server" CssClass="panelMenu" ScrollBars="None" >
<asp:Menu ID="MainMenu" runat="server">
<StaticMenuItemStyle CssClass="StaticMenuStyle"/>
<StaticSelectedStyle CssClass="StaticSelectedMenuStyle" />
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Create Message"/>
<asp:MenuItem NavigateUrl="~/EditProfile.aspx" Text="Edit Profile"/>
<asp:MenuItem NavigateUrl="~/EditGroup.aspx" Text="Edit Group"/>
<asp:MenuItem NavigateUrl="~/MessageReport.aspx" Text="Message Report"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="Admin"/>
</Items>
</asp:Menu>
</asp:Panel>
</td>
<td id="cell_content" valign="top">
<asp:Panel ID="pnlMain" runat="server" CssClass="panelContent" ScrollBars="None">
<asp:ContentPlaceHolder ID="MainContent" runat="server" />
</asp:Panel>
</td>
</tr>
</table>
</div>
</form>
</body>
Is there something else I need to set?
I just want the button in the Menu to be a lighter background color when selected.
Try this, I've given you CSS for both table and list based options.
Basically you need to make the a tag fill the parent and use a:active to change color etc. I've used a bit of a quick solution to vertically center the text.
.nav td, .nav li
{
width:130px;
height:30px;
position:relative;
padding:0;
vertical-align:center;
}
.nav a {
display:block;
background-color:#DDD;
height:100%;
line-height:30px;
vertical-align:center;
padding:0 3px;
}
.nav a:active
{
background-color:#DDF;
}
ul.nav {list-style:none; padding-left:0; }
ul.nav li {display:inline-block}
<table class="nav" border="0" cellpadding="0" cellspacing="4">
<tr>
<td>Link 1</td>
<td>Link 2</td>
<td>Link 3</td>
<td>Link 4</td>
</tr>
</table>
<ul class="nav" >
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
it looks like there were some breaking changes since 4.0. if i understand it, you have to specify the 'selected' styles more directly in the markup, and not with css, such as:
<staticselectedstyle backcolor="LightBlue"
borderstyle="Solid"
bordercolor="Black"
borderwidth="1"/>
more detail here.
Does the css display correctly if the asp:Menu is outside of the table?
<table class="style1" cellpadding="0px" align="left">
I want to set transparent background of menu for Asp.Net project. I use next code for it:
<%# Master Language="C#" CodeBehind="Site.master.cs" Inherits="Solution.Site" %>
<!DOCTYPE html>
<html lang="ru" style="height: 100%; margin: 0; padding: 0; position:relative">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>My title</title>
<link href="~/Site.css" rel="stylesheet" type="text/css" />
<link href="Styles/ByClasses.css" rel="stylesheet" type="text/css" />
<link href="Styles/ByElements.css" rel="stylesheet" type="text/css" />
</head>
<body class="template">
<form id="form1" runat="server">
<div class="logoDiv">
<asp:Image runat="server"
AlternateText="MyCompanyLogo"
ImageAlign="Top"
Height ="100%"
ImageUrl="DynamicData/Content/Images/MyCompanyLogo.png"/>
</div>
<div class="menuDiv">
<asp:Menu runat="server" StaticDisplayLevels="3" CssClass="menu">
<Items>
<asp:MenuItem Text="File" Value="File">
<asp:MenuItem Text="New" Value="New"></asp:MenuItem>
<asp:MenuItem Text="Open" Value="Open"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Edit" Value="Edit">
<asp:MenuItem Text="Copy" Value="Copy"></asp:MenuItem>
<asp:MenuItem Text="Paste" Value="Paste"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="View" Value="View">
<asp:MenuItem Text="Normal" Value="Normal"></asp:MenuItem>
<asp:MenuItem Text="Preview" Value="Preview"></asp:MenuItem>
</asp:MenuItem>
</Items>
</asp:Menu>
</div>
<div class="mainContentDiv">
<asp:ContentPlaceHolder id="master_contentPlaceHolder" runat="server"/>
</div>
<div class="footerDiv">Copyright MyCompany</div>
</form>
</body>
</html>
next "ByClasses.Css:"
.logoDiv {
background:White;
width:100%;
height:10%;
}
.menuDiv {
background:Yellow;
float:left;
width:15%;
height:88%;
}
.mainContentDiv {
background:Green;
float:left;
width:85%;
height:88%;
}
.footerDiv {
background:White;
clear:both;
width:100%;
height:2%;
}
.menu{
background-color:transparent;
width:100%;
float: left;
clear: both;
font-family: Arial, Helvetica, sans-serif;
}
and "ByElements.Css":
body {
height:100%;
width:100%;
margin:0;
padding:0;
position:relative;
}
form {
width:100%;
height:100%
}
But my menu have white background and I cann't understand why. Can anybody tell me, what's wrong and how I can set transparent background for menu?
I don't understand what exactly you need
if you need to remove the menu background color first you need remove .menuDiv background
.menuDiv{background:none}
I'm using html and CSS to create a master page for ASP.NET. However my top banner is not working, unlike the rest of the pictures. It does however show on the design tab of Visual studio. I have place the necessary code only below, can someone help please?
HTML:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div runat="server" id="top">
</div>
</div>
</form>
</body>
</html>
CSS:
body
{
background-image: url(../Images/background_5.jpg);
/*font-family: Arial;
color: rgb(0, 0, 0);
background-color: rgb(225, 201, 201);
line-height: normal;
font-size: 12px;
background-position: 0% 0%;
background-repeat: repeat;
background-attachment: scroll;
padding: 0px;
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;*/
}
#form1
{
width: 1200px;
}
#container
{
background-color: White;
padding-left: 20px;
padding-right: 20px;
float:left;
left: 50%;
position:relative;
margin-left: -450px;
width: 910px;
height: 1800px;
}
#top
{
background: url(../Images/Banner.jpg);
/*padding-left: 10px;*/
height: 250px;
width: 900px;
}
#loginDiv
{
float: right;
padding-right: 20px;
text-align: right;
height: 142px;
font-family:Century Gothic;
}
#middle
{
padding-left: 10px;
width: 900px;
}
If you would like to see the entire HTML code, it's attached below:
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<link href="css/StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="container">
<div runat="server" id="top">
<asp:Label ID="WelcomeLabel" runat="server" Text="Label" Font-Italic="False"
Font-Names="Century Gothic" Font-Overline="False" Font-Size="Medium"></asp:Label>
<br />
<asp:Button ID="Button1" runat="server" Text="Sign out" BackColor="Black"
BorderColor="Black" BorderStyle="Outset" Font-Names="Century Gothic"
ForeColor="White" Width="75px" />
<br />
<div id="loginDiv" runat="server">
<asp:Label ID="Label1" runat="server" Text="Username"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<br />
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" TextMode="Password"></asp:TextBox>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Login"
BackColor="Black" BorderStyle="Outset" Font-Names="Century Gothic"
ForeColor="White"/>
<br />
<asp:Label ID="Label3" runat="server"></asp:Label>
</div>
</div>
<div runat="server" id="middle">
<div id="left" runat="server" style="float: left; width: 33%; margin: 0; ">
Categories
<ul>
<li>option 1</li>
<li>option 2</li>
<li>option 3</li>
<li>option 4</li>
</ul>
<div>
<asp:Label ID="lblItemsShoppingCart" runat="server" Text=""></asp:Label>
</div>
</div>
<div id="Right" runat="server" style="float: left; width: 67%; margin: 0; " class="sf_colsOut">
<asp:contentplaceholder id="contentplace" runat="server" />
</div>
</div>
</div>
</form>
</body>
</html>
can you try this path "~/Images/Banner.jpg" . To me sometimes some paths do not work, others are not. sometimes solve so.
Link to css file:
<link href="~/css/StyleSheet.css" rel="stylesheet" type="text/css" />
Also, to the images
does it actually look like this in your code?: background: url(../Images/Banner.jpg);
The ../ isn't the proper way to write a path, take that bit off and you should be golden, like so:
(images/banner.jpg);
edit: I also recommend putting the banner in a <div>, giving it an ID and using position: fixed; top: 0px; to attach it to the top of the page. Remember to give it a width and height as well or it won't display.
I have an annoying problem with tree-view control in asp.net VB, it pushes the content page area down when branching out the menu.
I have created the proper divs to separate the various sections
Master page is very basic:-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="header">
<h1>This is header</h1>
</div>
<div id="nav">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"
ImageSet="BulletedList2" ShowExpandCollapse="False">
<HoverNodeStyle Font-Underline="True" ForeColor="#5555DD" />
<NodeStyle Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="0px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="False" />
<SelectedNodeStyle Font-Underline="True" ForeColor="#5555DD"
HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</div>
<div id="content">
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer">
<p>This is footer</p>
</div>
</div>
</form>
</body>
</html>
the CSS is:-
body {
}
#wrapper{
margin:0 auto;
width:780px;
}
#nav{
width:100px;
border:1px solid black;
padding:5px;
}
#header{
height:100px;
background:blue;
color:white;
float:left;
width:100%;
}
#content{
margin-left:110px;
border:1px solid black;
background:yellow;
float:left;
width:600px;
}
#footer{
height:200px;
background:pink;
clear:both;
}
The Treeview just pushes the content page down, I feel like I've tried everything except resorting to using tables.
I guess you have to use float and z-index attribute properly e.g.
nav{width: 100px; height: 100px; float: left; z-index: 1;}