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!
Related
I have a view page (View.cshtml) and a stylesheet (Style.css).
The stylesheet is located in a folder called "Stylesheet", and the view page is located in Views/Home/View.cshtml. I am trying to link the stylesheet to the view page by this code:
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css">
When I run the project, it showed the contents of the view page but the styling was not implemented. May I know what I am doing wrong?
UPDATE:
View.cshtml
<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="~/Stylesheet/Style.css" />
<title>Test Page</title>
</head>
<body>
<div id="topHeader">
<br />
<div id="credentialsBox">
<div id="texts">
<div id="word1">Username:</div>
<div id="word2">Password:</div>
</div>
</div>
</div>
</body>
Style.css
#font-face {
font-family: 'proximanova';
src: url('../fonts/proximanova-light-webfont (2)_0.ttf') format('truetype');
}
/*CSS Styling Properties*/
body {
font-family: proximanova;
margin: 0;
background-color: #007381;
}
#topHeader{
margin-top: 15%;
height: 450px;
background-color: #d6d6d6;
}
#credentialsBox {
border-radius: 3%;
width: 20%;
margin: auto;
margin-top: -5%;
background-color: #ffffff;
}
#texts {
padding: 14%;
text-align: center;
}
_Layout.cshtml
<!DOCTYPE html>
<html>
<head>
#RenderSection("css", false)
</head>
<body>
#RenderBody()
</body>
</html>
Sorry if the CSS styling is a bit messy, I am trying my best to learn here :D
You can also use #Url.Content instead for absolute path of css file.
<link href="~/Stylesheet/Style.css" rel="stylesheet" type="text/css" />
or
<link href="#Url.Content("~/Stylesheet/Style.css")" rel="stylesheet" type="text/css" />
If you that is your own custom CSS file then make sure that you add that file to BundleConfig.cs file in App_Start folder. Which will look something like this..
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/Style.css));
And in your head section try to replace
<head>
#RenderSection("css", false)
</head>
with
<head>
#Styles.Render("~/Content/css")
</head>
and see it will make any difference, and we will go from there.
I have solved the error. I placed my stylesheet inside "wwwroot/css" and it worked.
i have been doing this website but i got stuck at the point where the blusih grey blank space at the bottom of the screen refused to go.
i have moved the of the page. Any ideas on how to fix that blank area ?
#import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700);
body {
background: #08121A;
background-image: url('../img3.jpg');
background-size: 100% 100%;
background-repeat: no-repeat;
margin: 0;
padding: 0;
font-family: 'Source Sans Pro', 'sans-serif';
font-size: 1.1em;
color: #545B64;
font-weight: 300;
}
.stretch {
width: 100%;
height: 100%;
}
* {
margin: 0;
padding: 0;
}
/** element defaults **/
table {
width: 100%;
text-align: left;
}
th,
td {
padding: 10px 10px;
}
th {
color: #666;
background: #141517 none repeat-x scroll left top;
}
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
</html>
Body css is wrong. Try this:
background-size:cover;
try to put img {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
and move the img as last element in body tag
in your case body will take height from all the elements in it. so if u put img - background always will take the height of body( this is calculate form all the elements in the body) ,so if you put as a tag <img src='myimg'/> will take space and don't forget to put img tag low z-index
Please correct your html code.
You must end your tag before start before tag. not end of tag. so your html code will be like this:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>site titl</title>
<link rel="stylesheet" href="css/reset.css" type="text/css" />
<link rel="stylesheet" href="css/styles.css" type="text/css" />
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/superfish.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
</head>
<body>
Put here your body content
</body>
</html>
Then follow the css.
.yourcssClass {position: fix; left:0px; top:0px; right:0px; bottom:0px;}
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..
I have a textbox. When i hover upon it, using chrome, it works fine. However, none of the IE versions are seems to recognize the hozer effect. Here is my css file.
.myOnlyTextbox
{
background-color:White;
}
.myOnlyTextbox:focus
{
background-color: #FFDFBF;
font-weight: bold;
}
.myOnlyTextbox:disabled
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover:enabled
{
background-color: #FFB66C;
}
and here is my master file
<!DOCTYPE xhtml 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" />
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
and in the child pages, I am using this header:
asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
<link href="../Styles/myTextbox.css" rel="stylesheet" type="text/css" />
</asp:Content>
and in the body tag, i define textbox like this.
<asp:TextBox ID="txtSearchByBowzerNo" runat="server" ValidationGroup="ByNo"
CssClass="myOnlyTextbox"></asp:TextBox>
How can I use this css in almost all browsers? any idea?
:enabled and :disabled aren't supported in IE < 9; so a fall-back might be required... Try to use selectivizr.js.... CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest. http://selectivizr.com/
maybe try without multiple pseudo-elements :
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}
Try changing your rules to the following
[disabled].myOnlyTextbox, [readonly].myOnlyTextbox
{
border-width: 0px;
background-color: transparent;
font-size: 14px;
}
.myOnlyTextbox:hover
{
background-color: #FFB66C;
}
I am just learning less.I have my html file like this
<!DOCTYPE HTML>
<html lang="en-IN">
<head>
<meta charset="UTF-8">
<title>.::LESS::.</title>
<link rel="stylesheet" type=text/css"" href="style.less" />
<script type="text/javascript" src="less.js"></script>
</head>
<body>
<div class="box1">This is box1</div>
<div class="box2">This is box2</div>
<div class="box3">This is box3</div>
</body>
</html>
and my style.less file is like this
#blue : #00c;
#light-blue: #blue + #333;
#deep-blue: #blue - #333;
.box1 {
background-color: #blue;
}
.box2 {
background-color: #light-blue;
}
.box3 {
background-color: #deep-blue;
}
But after all this when I am going to check the html page from the browser it is not showing anything.If I am changing the values of background-color to any color values then the background color can be seen over there.Can some one tell me where is the wrong part?Any help and suggestions will be welcome.Thanks in advance.
You are missing an # for light blue. Is this how it is supposed to look like?
Your code compiles correctly to
.box1 {
background-color: #00c;
}
.box2 {
background-color: #3333ff;
}
.box3 {
background-color: #000099;
}
However, the following line you wrote:
<link rel="stylesheet" type=text/css"" href="style.less" />
should be:
<link rel="stylesheet/less" type="text/css" href="style.less" />
Try this and check again if it works.