I'm very new to ASP.NET and have to confess I'm having great difficulty achieving even the most basic of results.
I am currently having trouble getting CSS formatting to work in my content pages.
My master page is as follows -
<%# Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="Master_Main" %>
<!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>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
<link href="../CSS/Main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="Container">
<div id="Header">Header Goes Here</div>
<div id="LeftBar">Left Bar Goes Here</div>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<div id="RightBar">Right Bar Goes Here</div>
<div id="Footer">Footer Goes Here</div>
</div>
</div>
</form>
</body>
</html>
The CSS stylesheet is referenced in the < head > tag and when in Design view on the master page I can see the formatting is in place.
However, when I create a Content Page based on this master page, none of the CSS formatting follows through.
<%# Page Title="" Language="C#" MasterPageFile="~/Master/Main.master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Pages_Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<p>Content Goes Here</p>
</div>
</asp:Content>
The source for the Content page references the Master Page correctly I believe, but the formatting is simply not working. My content page is entirely black and white text down the left hands side of the browser.
I'm sure this will be a simple matter to those who are good at ASP, but like I said, I'm struggling with it at the moment, so any help is much appreciated.
For completeness the CSS file is as follows -
*
{
font-family: Calibri;
}
#Header
{
width: 100%;
background-color: Gray;
}
#LeftBar
{
width: 15%;
float: left;
background-color: Lime;
}
#Content
{
width: 70%;
float: left;
background-color: White;
}
#RightBar
{
width: 15%;
float: left;
background-color: Yellow;
}
#Footer
{
width: 100%;
float: none;
background-color: Red;
}
The CSS formatting does appear on the Master Page when in Design view in VWD, but never in the Content Page.
Known issue (if this is what is happening in this case) with Visual Studio. The way to be sure of applying the correct path is to drag the CSS file from Solution Explorer into the head section of the master page (in design view).
Related
I am using this jQuery splitter library because on a non-master aspx web form I am able to duplicate this example and insert gridviews, ajax tabs, etc and all the other content I need no problem. But, I am unable to do the same thing using a content page from the VS2012 ASP.NET Web Forms Site template. If anyone is aware of a better splitter option that can create a layout that can incorporate asp controls with ajax, please let me know. I have tried w2ui but I can't insert asp controls. I have also been able to insert asp controls using jeasyui and dhtml-suite. But can't get any working in the content page. Thanks for any input...
link to jquery-dev demo page
and a rough idea of what I am going for is something like this:
link to complex layout using splitters
I have been reading a lot of the other answers based on applying javascript to a content page and it seems the most straightforward method is to link to the css in the content page header and reference the javascript in the content page content section. So my master page is unchanged from the template default .
Here is the code for my content page:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="nested_sidebars_master.aspx.cs" Inherits="layout_master_demos_nested_sidebars_master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
<link type="text/css" rel="stylesheet" href="css/layout-default-latest.css" />
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 100%;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
<script type="text/javascript" src="js/jquery-latest.js"></script>
<script type="text/javascript" src="js/jquery-ui-latest.js"></script>
<script type="text/javascript" src="js/jquery.layout-latest.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#container").layout();
});
</script>
<div id="container">
<div class="ui-layout-center">
Center
<p><B>Go to the Demos page</B></p>
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>
</asp:Content>
When I run without without
$(document).ready(function () {
$("#container").layout();
I can at least see my divs:
But when I include the that javascript, I get nothing:
When I run a simple alert javascript like:
> $(document).ready(function () {;
> alert('hey!');
I get a result, so I know the javascript is running:
So, it seems something is wrong with the .layout method. If anyone can tip me off as to a good way to trouble shoot javascript (I am a newbie) that would be helpful, like writing to a label in asp.net or using a message box in C#.net.
Found out what I was going wrong:
I needed to reference the css from the same content place holder. The was referenced at:
http://forums.asp.net/t/1581173.aspx?Jquery+UI+layout+and+Asp+net+master+page
For some reason, it didn't accept 100% as the height in the css applied to the content container and was considering it 0. Once I changed the height to pixels, it worked.
The updated working code:
<%# Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="nested_sidebars_master.aspx.cs" Inherits="layout_master_demos_nested_sidebars_master" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" Runat="Server">
<link type="text/css" rel="stylesheet" href="css/layout-default-latest.css"/>
<style type="text/css">
html, body {
background: #666;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: auto; /* when page gets too small */
}
#container {
background: #999;
height: 250px;
margin: 0 auto;
width: 100%;
max-width: 900px;
min-width: 700px;
_width: 700px; /* min-width for IE6 */
}
.pane {
display: none; /* will appear when layout inits */
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
<script type="text/javascript" src="../source/stable/jquery.layout.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#container').layout();
//alert('hey!');
});
</script>
<div id="container">
<div class="ui-layout-center">Center</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>
</asp:Content>
and the result:
I have this markup:
<%# Page Language="vb" AutoEventWireup="false" CodeBehind="WebForm1.aspx.vb" Inherits="TestCSSTemplates.WebForm1" %>
<!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">
ul { list-style: none }
span { display:inline-block; text-align: right; width: 100px; }
.DespliegaEnLinea { display: inline-block; }
</style>
</head>
<body>
<form id="form1" runat="server">
<ul >
<li>
<span >Are you sure?: </span>
<asp:RadioButtonList ID="RadioButtonList1" runat="server"
RepeatDirection="Horizontal" CssClass="DespliegaEnLinea">
<asp:ListItem>yes</asp:ListItem>
<asp:ListItem>no</asp:ListItem>
</asp:RadioButtonList>
</li>
</ul>
</form>
</body>
</html>
When the page is displayed in Chrome or Internet Explorer (9 or less with comptaibility mode activated), the page renders as I intended: all the content inside the li tag is in just one line.
However when the above page is displayed in Internet Explorer 11 (or 9, 8 without compatibility mode activated), it's rendered with a line break between the span tag and the radiobuttonlist control.
How can i make this page always render the content of the li tag in one line, regardless of the browers it's being used to see it?
I'm somewhat new to html and css and I am having a really strange issue with this ASP.NET page. The following code draws the div (should be 50x50) as 50x100 in IE9. It may be drawing twice. In Compatibility mode it works just fine. As you can see it's a super-simple piece of code.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="DivAlignmentTest.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">
html, body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
#Div1
{
width: 50px;
height: 50px;
background-color: Red;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="Div1" />
</form>
</body>
</html>
Any help would be appreciated,
Jason
Change
<div id="Div1" />
to
<div id="Div1"></div>
should make it work properly.
You cant self close a div tag
Try:
<div id="Div1"></div>
I am having problems to display a image in a div element.
In the div is a custom web control (a login control).
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Login.aspx.cs" Inherits="Login" Theme="Styles" %>
<%# Register src="wucLogin.ascx" tagname="wucLogin" tagprefix="log" %>
<!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>Login</title>
<link rel="Stylesheet" type="text/css" href="App_Themes/Styles/LoginStyleSheet.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="divLogin">
<log:wucLogin id="WebUserControlLogin" runat="server" />
</div>
</form>
</body>
</html>
Everything gets displayed as it should. A basic login control with some basic layout and a blue background.
But when i try to put a picture in the div i cannot get it to display. I tried every possible path for the image so i do not think i have made a error there.
Basicly i want the login control to display, with behind it a picture (centered).
Css for the div element (the map images is directly a map in the root:
#divLogin
{
background-image: url('../Images/test2.png');
background-repeat: no-repeat;
background-position:center;
position: absolute;
text-align: center;
top: 40%;
left: 52.8%;
width: 401px;
height: 123px;
margin-top: -61,5px;
margin-left: -250px;
}
Best regards.
I dont see an ID of "divLog" on your page .. just "divLogin" .. could that be the issue?
change position to relative, and put the login stuff inside the image div. also update the top and left for the relative positioning.
just a thought.
I have created a simple page in HTML which works fine. But when I import that to ASP.NET, the page design clutters up.
Here is my Site.Master
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="Elite.WUI.Site" %>
<!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.css" />
</head>
<body>
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="headerCPH" runat="server">
<div id="header">
<h1>WUI</h1>
</div>
<hr />
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="navigationCPH" runat="server">
<div id="navigation">
<ul>
<li>Home</li>
<li>Users</li>
<li>Campaigns</li>
<li>Settings</li>
</ul>
</div>
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="contentCPH" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
my stylesheet styles.css
#navigation
{
float: left;
border: 1pt solid;
}
#navigation ul
{
list-style-type: none;
padding: 5 5 5 5;
margin: 0;
}
#content
{
margin-left: 9%;
border: 1pt solid;
padding-left: 5;
}
and the actual page derived from master page
<%# Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="ABC.aspx.cs" Inherits="Elite.WUI.ABC" %>
<asp:Content ID="Content3" ContentPlaceHolderID="contentCPH" runat="server">
<div id="content">
<p>Test content</p>
</div>
</asp:Content>
Here is how it is displayed in Firefox (ver 3.6)
As you can see that the border, list-style-type properties are working but margin isn't working. Can anyone tell me what am I doing wrong? I have tested it in Google Chrome but same issue. While the HTML and CSS works fine when there is no ASP.NET i.e. simple .html file.
Change
padding-left: 5;
to
padding-left: 5px;
and
padding: 5 5 5 5;
to
padding: 5px 5px 5px 5px;
Note: last one can also be written: padding:5px;
EDIT: As suggested in the comments I inspected the source of the static HTML file and that generated by ASP.NET and I saw few differences
The CSS for <ul> in the ASP.NET source is
div#navigation ul {
list-style-type: none;
margin: 0px;
}
and that in the static file is
#navigation ul {
list-style-type: none;
margin: 0px;
padding: 5px;
}
Note the difference of padding (missing in the ASP.NET source)
Likewise, in the content div there is the padding-left missing in the ASP.NET source. But AFAIK, this shouldn't matter. The problem is that not even the margin property is applied to the div.
P.S: I couldn't edit the question because, I don't have enough rep and someone has added a image in the post (it won't allow me to post images.)