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.)
Related
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 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).
I am starting to study ASP.NET with the book "Beginning ASP.NET 4 : in C# and VB" (Imar Spaanjaars - Wrox). Right now I am stuck on "Try It Out" section on page 79: every thing went right except there is no background color for the side bar where it's expected to be gray.
My page:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_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">
.style1
{
color: #663300;
}
.style2
{
color: #FF0066;
}
</style>
<link href="Styles/Styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<div id="PageWrapper">
<div id="Header">
Header Goes Here
</div>
<div id="MenuWrapper">
Menu Goes Here
</div>
<div id="MainContent">
<h1>
Hi there visitor and welcome to Planet Wrox</h1>
<p>
We're glad you're <span class="style2">paying a visit</span><span class="style1">
</span>to www.PlanetWrox.com, the coolest
music community site on the Internet.</p>
<p>
Feel free to have a look around; there are lots of interesting <strong>reviews and concert
pictures </strong>to be found here.</p>
</div>
<div id="SideBar">
Sidebar Goes Here</div>
<div id="Footer">
Footer Goes Here
</div>
</div>
</form>
</body>
</html>
CSS file:
#Header
{
background-color: #C0C0C0;
width: 844px;
height: 86px;
}
*
{
font-family: Arial;
}
h1
{
font-size: 20px;
}
#PageWrapper
{
width: 844px;
}
#MenuWrapper
{
width: 844px;
}
#MainContent
{
width: 664px;
float: left;
}
#Sidebar
{
background-color: Gray;
width: 180px;
float: left;
}
#Footer
{
background-color: #C0C0C0;
width: 844px;
clear: both;
}
Result (the sidebar background is expected to be gray):
Did I make any mistake, can any one tell me where it is?
"Sidebar" != "SideBar"
It is case sensitive
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 trying to create rounded corners on my divs. I am using the standard template in an ASP.NET MVC 3 application.
I have followed this guide:
http://viralpatel.net/blogs/2009/08/rounded-corner-css-without-images.html
basicly you put this in your css file:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
and
<div id="selector">
Why does my site not show rounded corners on my divs? I have tried with Firefox and Chrome.
You forgot to specify a border!
You need to change your CSS to this in order to display the border:
#selector {
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid black;
}
in asp.net its easy to implement rounded corner to panels using ajax, try the following:
<%# Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</ajaxToolkit:ToolkitScriptManager>
</div>
<asp:Panel ID="Panel1" runat="server" BackColor="AppWorkspace" Height="188px" Width="271px">
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="Panel1_RoundedCornersExtender"
runat="server" Enabled="True" TargetControlID="Panel1" Radius="15">
</ajaxToolkit:RoundedCornersExtender>
</form>
</body>
</html>