I added a css to a webform. The css worked fine with a html file and also in design view in visual studio. But when it is run in the IIS, the css is not displayed. Please help me out.
CSS
body{
background: #efefef;
}
.head
{
margin-top:0px;
min-height:40px;
min-width: 102%;
background-color:green;
color:blue;
text-align:center;
margin-left:-10px;
margin-right:0px;
padding-top:10px;
}
#content
{
margin-top:10px;
margin-bottom:10px;
margin-left:0px;
min-height:100%;
}
#wrapper
{
width:83%;
min-height:inherit;
background-color:red;
float:left;
}
#sidebar
{
width:15%;
float:right;
}
#sidebar1
{
background-color:green;
min-height:20%;
margin-bottom:2px;
}
#sidebar2
{
min-height:40%;
background-color:blue;
margin-bottom:2px;
}
#sidebar3
{
background-color:violet;
min-height:40%;
}
HTML
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<link type="text/css" rel="stylesheet" href="E:\Demo\main.css" />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div class="head">Thiagarajar College of Engineering</div>
<div id="content">
<div id="wrapper">
srini
</div>
<div id="sidebar">
<div id="sidebar1">ji</div>
<div id="sidebar2">sr</div>
<div id="sidebar3">ni</div>
</div>
</div>
</form>
</body>
</html>
Your CSS file is in wrong place.
1) Typically, CSS file should be inside head tag. (although you can place it in anywhere inside body tag, I do not recommend it).
2) In addition, the link should be relative path instead of E:\Demo\main.css
<head runat="server">
<title></title>
<link href="/main.css" rel="stylesheet" type="text/css" />
</head>
paste this code inside the <head></head> like this..
<head>
<link type="text/css" rel="stylesheet" href="E:\Demo\main.css" />
</head>
If not put your css file inside your project and just drag and drop it in your page..
Related
I would like to change the background color in 2n element. I've tested it but the bg-color is still blue:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>nothing here</title>
</head>
<body>
<style type="text/css">
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
.btn:nth-child(2n){
background:yellow;
}
</style>
<div>
<div class="btn"></div>
</div>
<div>
<div class="btn"></div>
</div>
</body>
</html>
it should be more like :
.btn{
height:50px;
width:100%;
background:blue;
margin-bottom:20px;
}
div:nth-child(2n) .btn{
background:yellow;
}
Because, in each div , there's only one .btn
nth-child works with adjacent element, not nested unfortunately :)
.btn is inside a div.
.btn:nth-child(2n) will work if your HTML structure is as follows:
<div>
<div class="btn"></div>
<div class="btn"></div>
</div>
For your HTML structure, it should be
div:nth-child(2n) .btn {
background:yellow;
}
DEMO here.
guys i have a css file "menu.css" i called it in the head of my master page but it does not seem to work.
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
i tried many alternatives such as
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
But all to no avail. However when i paste the content of the css in the master page head there by eliminating the css file, it then works. I really don't understand what the error is. All seem ok but it is not doing as expecteed. Below is my Master page. Any help would be appreciated.
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Debt.master.cs" Inherits="Debt.Debt" %>
<!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">
<link id="Link2" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<title>Members Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
* { margin:0;
padding:0;
}
body { background:#555 url(images/back.jpg); }
#menu { top:30px; }
#copyright {
margin:100px auto;
width:80%;
font:12px 'Trebuchet MS';
color:#bbb;
text-indent:20px;
padding:40px 0 0 0;
}
#copyright a { color:#bbb; }
#copyright a:hover { color:#fff; }
.style1
{
}
.ModalBackground
{
background-color:Gray;
filter: alpha(opacity=60);
opacity: 0.6;
z-index: 10000;
}
.ModalPopup
{
background-color:White;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:5px;
width: 350px;
height:210px;
}
</style>
<link id="Link1" href='<%= ResolveUrl("~/CSS/menu.css") %>' rel="stylesheet" media="screen" type="text/css"/>
<link href="CSS/menu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" src="scripts/menu.js"></script>
</head>
<body runat="server">
Thanks guys for all the help. I figured what the error was. It was the images path form the CSS. i called the images as follows
background:url(images/columns.png) no-repeat;
background:url(images/subitem.png) no-repeat;
For some reason, it does not recognizes the above images path. However when i changed to
background:url(/images/columns.png) no-repeat;
background:url(/images/subitem.png) no-repeat;
That is adding a slash before the folder name. It works fine now. Thanks for your time.
If you are using Visual Studio 2012 you can simply drag any CSS or JS file from the solution browser into your HTML document, and the editor creates the link statement for you. I personally prefer this approach as it eliminates the chance of path errors.
Hope that helps!
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 know this question gets asked a lot because I have looked at many "solutions" trying to get this to work for me. I can get it to work if I hack up the html but I want to use all CSS. All I want is a header with two columns below it, and I want these three items to fill the entire page/screen, and I want to do it with CSS and without frames or tables. The XAMPP user interface looks exactly how I want my page to look, but again, I do not want to use frames. I cannot get the two orangeish colored columns to extend to the bottom of the screen. I do have it so it looks like the right column extends to the bottom of the screen just by changing the body background color to the same color as the background color of the right column, but I would like both columns to extend to the bottom so I didn't have to do that. Here is what I have so far:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report</div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>
CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
Something like this should work
<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">
</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>
Well, this is your code altered to fit what you want:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<style type="text/css">
html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
#hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
#col{float:left;width:230px;height:100%;background-color:red;}
#bd{width:100%;height:100%;background:pink;}
.content{padding:100px 0 0 230px;}
</style>
</head>
<body>
<div id="hd">MY SITE</div>
<div id="col">
Employee Management<br />
Add New Employee<br />
Edit Existing Employee<br />
<br/>
Load Management<br />
Log New Load<br />
Edit Existing Load<br />
<br/>
Report Management<br />
Employee Report<br />
Load Report
</div>
<div id="bd">
<div class="content">
Lots of words
</div>
</div>
</body>
</html>
Please not that inside containers like the one on the body div may be required to allow proper format of your html elements!
Hope this helps... :)