Basic Center Aligning with CSS in ASP.NET - css

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;
}

Related

ASP .NET Master Pages with Bootstrap and fixed footer, page content clashes with footer

Following is my ASP .NET Master page. Bootstrap.min.cs is present in my theme and the theme is defined in my webconfig file.
<%# Master Language="C#" CodeFile="HomePage.master.cs" Inherits="HomePage" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>e-Recruitment</title>
</head>
<body style="padding-left: 5px; padding-right: 5px">
<style type="text/css">
html, body {
height: 100%;
}
.center {
overflow: auto;
}
footer {
position: fixed;
height: 50px;
bottom: 0;
width: 100%;
}
.borderless td, .borderless th {
border: none;
}
.checkboxlist-inline li, .radiobuttonlist-inline li {
display: inline-block;
}
.checkboxlist-inline, .radiobuttonlist-inline {
margin-left: 8px;
}
.checkboxlist-inline label, .radiobuttonlist-inline label {
padding-left: 0;
padding-right: 8px;
}
</style>
<script src="../Scripts/jquery-3.2.1.slim.min.js"></script>
<script src="../Scripts/popper.min.js"></script>
<script src="../Scripts/bootstrap.min.js"></script>
<script src="../Scripts/jquery-1.10.0.min.js" type="text/javascript"></script>
<script src="../Scripts/jquery-ui.min.js" type="text/javascript"></script>
<link href="../Scripts/jquery-ui.css" rel="stylesheet" />
<form id="MainForm" runat="server" enctype="multipart/form-data">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Scripts>
<asp:ScriptReference Assembly="Company" Name="Company.JavaScript.CompanyScript.js" />
</Scripts>
</asp:ScriptManager>
<asp:UpdatePanel ID="MainUpdPanel" runat="server">
<ContentTemplate>
<div id="ParentDiv" class="container-fluid center">
<div class="row">
<div class="col-md-1">
<img src="../Content/Images/logonew.png" class="img-responsive" />
</div>
<div class="col-md-11">
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="row">
<div class="col-md-12">
<asp:ContentPlaceHolder ID="PageContent" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
<footer class="footer fixed-bottom">
<table class="table table-hover">
<tr>
<td style="width: 10%">
<asp:Label ID="lblTheme" runat="server" Text="Site Theme"></asp:Label>
</td>
<td style="width: 20%; text-align: left">
<asp:DropDownList ID="ddlTheme" AutoPostBack="true" runat="server" OnSelectedIndexChanged="ddlTheme_SelectedIndexChanged">
</asp:DropDownList>
</td>
<td style="width: 70%; text-align: right">
<small><i>©<asp:Label ID="lblComp" runat="server" Text=" Company 2018"></asp:Label>
®<asp:Label ID="lblRights" runat="server" Text=" Some message"></asp:Label></i></small>
</td>
</tr>
</table>
</footer>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>
Everything works fine, Footer stays at the bottom and pages work perfectly, but only problem is when the page content increases it is clashing with the footer, I have a save button in one of my child pages at the extreme bottom of the page, it is getting hiiden by my footer, User is able to view the button but unable to click because it is behing my footer, how to avoid this page content clashing into the footer.

ASP.NET Web Form - TreeView Nodes are dislocated

The last node in the TreeView (ASP) control is being displayed at a different location, though the hierarchical logic remains and I can collapse the node.
The TreeView is nested within a Panel, which is inside a <div>. I have made enough place for it to expand, and even maximized the TreeView size, but same issue. Now after some days of searching for help here, and because I'm new in Web designing. Also, there is no Scrollbar Property for the TreeView.
I'm coding using .NET 3.5
CODE:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="Genographic._Default" %>
<!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>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
width: 50%;
height: 600px;
background-color: white;
}
.labelDiv
{
width: 39%;
height: 600px;
background-color: control;
}
div > div
{
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv">
<asp:Panel ID="Panel_Menu" runat="server" BackColor="#336699" Width="100%" Height="155px">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
</asp:Panel>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" Height="600px" Width="600px" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Panel ID="Panel1" runat="server" Height="582px" Width="640px" Style="display: inline-block;">
<br>
<asp:Label ID="Label2" runat="server" Text="Level: "></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Height="300px" Width="251px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text=""></asp:Label>
<br>
<asp:TreeView ID="TreeView_2" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</asp:Panel>
</div>
</div>
</form>
</body>
</html>
I got it working using absolute positioning.
<!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>
<style type="text/css">
#form1
{
height: 100%;
}
.bigDiv
{
width: 100%;
height: 155px;
background-color: red;
}
.imageDiv
{
position: absolute;
top: 180px;
left: 510px;
width: 600px;
height: 100%;
background-color: green;
}
.labelDiv
{
position:absolute;
top: 180px;
left: 5px;
width: 500px;
height: 100%;
background-color: yellow;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="bigDiv" style="background-color: #3366CC">
<center>
<asp:Label ID="Label1" runat="server" Text="..."
Font-Size="X-Large" ForeColor="White"></asp:Label>
</center>
<br>
<div class="imageDiv">
<asp:Image ID="Image_Map" runat="server" ForeColor="#CCCCFF" />
</div>
<div class="labelDiv">
<asp:Label ID="Label2" runat="server" Text="Level:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_Level" runat="server" PopulateNodesFromClient="False"
ShowLines="True" Width="416px">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
<br>
<br>
<asp:Label ID="Label3" runat="server" Text="...:"></asp:Label>
<br>
<asp:TreeView ID="TreeView_H" runat="server" ShowLines="True">
<SelectedNodeStyle ForeColor="#FF6600" />
</asp:TreeView>
</div>
</div>
</form>
</body>
</html>

Can't Set Background on MasterPage

I need to set a background for my website so that each web form child of the master page would show the background image.
I've googled it and found a few answers but they didn't do anything.
I am attaching my Master Page html code and an image showing the background I want:
<%# Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="Pages_MasterPage" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>Qwik ProjecTrace</title>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
.style1
{
width: 100%;
}
.style2
{
text-align: center;
font-size: 40pt;
color: #0066CC;
}
.style3
{
font-size: x-large;
}
body
{
background:url('/style/images/IMS-Backgroung.jpg') no-repeat left top;
}
</style>
<link href="../Style/site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<table class="style1">
<tr>
<td runat="server" style="direction: ltr">
<asp:Image ID="mes1" runat="server" style="text-align: left" />
</td>
<td class="style2">
<strong style="font-size: 40">Qwik ProjecTrace<br />
<span class="style3">you see what we do 24/7</span></strong></td>
<td runat="server" style="direction: rtl">
<asp:Image ID="mes2" runat="server" style="text-align: right" />
</td>
</tr>
</table>
<div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
<p></p>
</asp:ContentPlaceHolder>
</div>
</form>
</body>
</html>
Does anyone know what is wrong with my code ? And how to set that background?
Thanks ahead
Change body style like this:
body
{
background-image: url('/style/images/IMS-Backgroung.jpg');
background-repeat:no-repeat;
}
Make sure that page from where your are accesing is "sitting" in parent folder of "/style/images/".
I would advice you to use asp.net themes where you can point to image like this: background-image: url('IMS-Backgroung.jpg') and will work for entire web app structure.
More about Themes can be found on ASP.NET Themes and Skins
Here's the code solution (It seems that in my case, I had some kind of a problem with the containing folders):
body
{
background-image: url('../style/images/Background.jpg');
background-repeat:no-repeat;
}

How do you put you align a treeview control in a nav div to prevent it from pushing a content page down?

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;}

asp.net add background image to a few pages using single masterpage

I am trying to add background images to only a few pages where as the other pages will not have one. Do I need a separate masterpage for the pages with background images or can I do this by overriding the existing styles?
My last attempt has a nested div with the image...
page with background:
<%# Page Title="" Language="C#" MasterPageFile="~/MasterPage.Master" AutoEventWireup="true" CodeBehind="Burgundy.aspx.cs" Inherits="WineCellar.UI.Pages.Burgundy.Burgundy" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ApplicationContent" runat="server">
<div style="background-image: url(~/Images/burgundy.png); height: 430px; width: 940px;">
</div>
</asp:Content>
masterpage:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="MasterPage.master.cs" Inherits="WineCellar.UI.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></title>
<link rel="Stylesheet" type="text/css" href="/Styles/Site.css" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server"></asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div id="PageWrapper">
<div id="Header"><a id="A1" href="~/" runat="server">need a header</a></div>
<div id="MenuWrapper">
<asp:Menu ID="Menu1" runat="server" CssClass="MainMenu" DataSourceID="SiteMapDataSource1"
Orientation="Horizontal" StaticEnableDefaultPopOutImage="False">
<StaticMenuItemStyle HorizontalPadding="6px" VerticalPadding="2px"/>
<DynamicHoverStyle BackColor="#CC3300" ForeColor="#310062" />
<DynamicMenuStyle BackColor="#310062" />
<StaticSelectedStyle BackColor="#CC3300" />
<DynamicSelectedStyle BackColor="#310062" />
<DynamicMenuItemStyle HorizontalPadding="6px" VerticalPadding="4px"/>
<StaticHoverStyle ForeColor="White" BackColor="#310062" />
</asp:Menu>
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" ShowStartingNode="False" />
</div>
<div id="MainContent">
<asp:SiteMapPath ID="SiteMapPath1" runat="server" CssClass="breadCrumbTrail">
<RootNodeTemplate></RootNodeTemplate>
</asp:SiteMapPath>
<br />
<h1>Title</h1>
<br />
<br />
<asp:ContentPlaceHolder ID="ApplicationContent" runat="server"></asp:ContentPlaceHolder>
</div>
<div id="Footer"><%=DateTime.Now.Year.ToString() %></div>
</div>
</form>
</body>
</html>
maincontent style:
#MainContent
{
background-color: #310062;
width: 940px;
height: 480px;
color: #ffffff;
min-height: 480px;
padding: 10px;
font-size: 0.8em;
float: left;
}
Thanks for any help!
put a contentplaceholder in the head, and in each page put a style tag with the extra div styling in it. probably not the best way to do it, but would work for a few pages only.
<style>#MainContent{background-image:url(~/Images/burgundy.png);height:430px;width:940px;</style>
this should override the style you set in your external css file.
(although ideally all css should be placed in external css files, and not style tags)
Create a style sheet just for the child page. Use the body tag to apply the CSS style.
body {
background-image: url('images/background-image.png');
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
vertical-align: top;
background-position: 0% 20%;
}
Tested and working solution.

Resources