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}
Related
My apologies for how basic this question is but I'm in the early stages of trying to learn ASP.NET, having had a largely WinForms background.
I am creating a Master Page with a Menu Bar on it and am failing to even get the Menu to center on the page.
My mark up is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Page Title</title>
<link href="CSS/Master.css" rel="stylesheet" />
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="HomeForm" runat="server">
<div id="MainDiv">
<asp:Panel ID="HeaderPanel" HorizontalAlign="Center" runat="server">
<header>
<img src="/Artwork/Webhead.jpg" />
</header>
</asp:Panel>
<div id="MenuDiv">
<asp:Menu ID="MainMenu" runat="server" DataSourceID="SiteMapDataSource1" Orientation="Horizontal" StaticEnableDefaultPopOutImage="False"></asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
And my CSS is as follows -
*
{
font-family: Calibri
}
#MainDiv
{
margin: auto;
background-color: cyan;
}
#HeaderPanel
{
}
#MenuDiv
{
margin: auto;
}
#MainMenu
{
margin: auto;
background-color: yellow;
align-self: center;
}
The logo in the section centers ok, but the Menu doesn't.
Any help would be much appreciated.
try this
#MainMenu{
display: table;
margin: 0 auto;
}
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.
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.
I am trying to add a stylesheet to a master page in an asp.net web form. Basically trying to create an inline nav menu for the top of the page. I'm having issues with it. I've created the stylesheet (the same way I would create if this were an html site) and I've put it in the directory you see below. I don't see how the code below shows any relation to the stylesheet though.
Like in html, I would have
Home
About
Contact
And then my stylesheet would look like this...
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
display:inline;
padding:20px;
}
And the CSS would let it display inline (across the top). But I'm not sure where to go here.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>AR Toolbox</title>
<asp:ContentPlaceHolder id="Stylesheets" runat="server">
<link rel="Stylesheet" href="/css/master.css" type="text/css" />
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
height: 459px;
}
.style3
{
width: 100%;
height: 100%;
}
.style6
{
height: 79px;
}
.style7
{
width: 345px;
height: 73px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;"
class="style6">
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="About" Value="About"></asp:MenuItem>
<asp:MenuItem Text="Compliance" Value="Compliance">
<asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem>
<asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
</Items>
</asp:Menu>
</td>
</tr>
<tr>
<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;"
class="style6">
<img alt="South University'" class="style7"
src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td>
</tr>
<tr>
<td class="style2">
<table class="style3">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color: #FFFFFF; background-color: #A3A3A3">
This is the footer.</td>
</tr>
</table>
</form>
</body>
</html>
Several things here.
First off, you're defining your CSS in 3 places!
In line, in the head and externally. I suggest you only choose one. I'm going to suggest externally.
I suggest you update your code in your ASP form from
<td style="background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;"
class="style6">
to this:
<td class="style6">
And then update your css too
.style6
{
height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
}
This removes the inline.
Now, to move it from the head of the webForm.
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>
<!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>AR Toolbox</title>
<link rel="Stylesheet" href="css/master.css" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<table class="style1">
<tr>
<td class="style6">
<asp:Menu ID="Menu1" runat="server">
<Items>
<asp:MenuItem Text="Home" Value="Home"></asp:MenuItem>
<asp:MenuItem Text="About" Value="About"></asp:MenuItem>
<asp:MenuItem Text="Compliance" Value="Compliance">
<asp:MenuItem Text="Item 1" Value="Item 1"></asp:MenuItem>
<asp:MenuItem Text="Item 2" Value="Item 2"></asp:MenuItem>
</asp:MenuItem>
<asp:MenuItem Text="Tools" Value="Tools"></asp:MenuItem>
<asp:MenuItem Text="Contact" Value="Contact"></asp:MenuItem>
</Items>
</asp:Menu>
</td>
</tr>
<tr>
<td class="style6">
<img alt="South University'" class="style7"
src="file:///C:/Users/jnewnam/Documents/Visual%20Studio%202010/WebSites/WebSite1/img/suo_n_seal_hor_pantone.png" /></td>
</tr>
<tr>
<td class="style2">
<table class="style3">
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="color: #FFFFFF; background-color: #A3A3A3">
This is the footer.</td>
</tr>
</table>
</form>
</body>
</html>
Now, in a new file called master.css (in your css folder) add
ul {
list-style-type:none;
margin:0;
padding:0;
}
li {
display:inline;
padding:20px;
}
.style1
{
width: 100%;
}
.style2
{
height: 459px;
}
.style3
{
width: 100%;
height: 100%;
}
.style6
{
height: 79px; background-color: #A3A3A3; color: #FFFFFF; font-family: 'Arial Black'; font-size: large; font-weight: bold;
}
.style7
{
width: 345px;
height: 73px;
}
Add your style here:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="BSC.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="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<link href="~/Styles/NewStyle.css" rel="stylesheet" type="text/css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
Then in the page:
<asp:Table CssClass=NewStyleExampleClass runat="server" >
The only thing you have to do is to add in the cshtml file, in the head, the following line:
#Styles.Render("~/Content/Main.css")
The entire head will look somethink like that:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML Page</title>
#Styles.Render("~/Content/main.css")
</head>
Hope it helps!!
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;}