The more I work with CSS, the more depression I get
I want to set a background picture stored on the same folder where my aspx and cs files
are located, still it wont put a background picture:
/* DEFAULTS
----------------------------------------------------------*/
body
{
background-image:url(banner.gif);
display:block; // have tried without it as well, no change :(
}
Default.aspx:
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site.master.cs" Inherits="WebApplication1.SiteMaster" %>
<!DOCTYPE html 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>
<body>
<form runat="server">
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</form>
</body>
</html>
Please help how to set the background picture ?
You said that your CSS and image are in same folder where you've your aspx file and CSS so
First try setting a background color for body say
body {
background: #f00; /*This should give you red*/
}
If this works than fine, something is wrong with the image path, if you fail to see the color too, that means your stylesheet is at the wrong path, so instead of
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
Should be
<link href="Site.css" rel="stylesheet" type="text/css" />
here is the image, I dont thin there is any problem with paths:
Related
This is my master page code...........
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Home.master.cs" Inherits="AP5.MasterPage.Home" %>
<!DOCTYPE html>
<html lang="en">
<head runat="server">
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1.0, user-scalable=no">
<link href="../css/fonticon-styles.css" rel="stylesheet" type="text/css">
<link href="../css/vendors/nanoscroller/nanoscroller.css" rel="stylesheet" type="text/css">
<link href="../css/style.css" rel="stylesheet" type="text/css">
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div class="body-inner nano">
<div class="nano-content">
<!--Main Nav container -->
<aside id="sidebar">
<asp:PlaceHolder ID="phMenu" runat="server" EnableViewState="true"></asp:PlaceHolder>
</aside>
<div id="page">
<header id="header" class="hidden-md hidden-small">
<div class="container">
</div>
</header>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>
</div>
</div>
</div>
</form>
<script src="../Js/jquery/jquery.min.js"></script>
<script src="../Js/nanoscroller/jquery.nanoscroller.min.js"></script>
</body>
</html>
This is my css which is creating problem ....
.nano {
position : relative;
width : 100%;
height : 100%;
overflow : hidden;
}
.nano > .nano-content {
position : absolute;
overflow : scroll;
overflow-x : hidden;
top : 0;
right : 0;
bottom : 0;
left : 0;
}
When I am making a aspx page including this master page, the master page in not showing the page content. But when I remove relative property from nano class the content is showing but nano scroller is creating a horizontal scroll bar in the page and I want to remove this scroll bar with showing all page content. I use all css and js files properly. Even a text is also not showing in aspx page. But it is working nice in a normal html page. Through master page it is not working properly. Either content is not showing or scroll bar is showing horizontally or nano scroll bar is not working.
Anybody know how to fix this problem?
the css technique you using on your absolute positioned "nano-content" doesn't work if you don't add margin:auto. that may be your problem
I'm using HTML_EXTRA_STYLESHEET option to override default css rules. I can easily override some rules like span.mlabel or .SelectItem but .SREntry can't be overriden for some reason. In Firebug it's like my new rule never existed.
Css rules that I'm using:
.SREntry {
font-size: 10pt;
}
span.mlabel {
font-size: 11pt;
}
.SelectItem {
font-size: 10pt;
}
.SREntry is responsible for formatting search box results. It's defined in search.css and it seems that no rule from this file can be overriden.
Why is that I can override rules defined in doxygen.css but not in search.css?
[EDIT] Link to generated documentation. It uses a custom css file Custom.css with described above rules.
If you look closer to html that generated by search.js at runtime you will find out that
<iframe id="MSearchResults"> block contains another section of html document with
its own <head> section.
That is why you can't override this style.
<!--
HTML header for doxygen 1.8.7
-->
<!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" style="cursor: auto ! important;">
<head>
... removed some html here ...
<script src="search/search.js" type="text/javascript"></script>
<link type="text/css" rel="stylesheet" href="search/search.css"></link>
<link type="text/css" rel="stylesheet" href="custom.css"></link>
</head>
<body>
<div id="top"></div>
<div id="MSearchSelectWindow" onkeydown="return searchBox.OnSearchSelectKey(event)" onmouseout="return searchBox.OnSearchSelectHide()" onmouseover="return searchBox.OnSearchSelectShow()"></div>
<!--
iframe showing the search results (closed by defa…
-->
<div id="MSearchResultsWindow" style="display: block; top: 182px; left: 236px;">
<iframe id="MSearchResults" frameborder="0" name="MSearchResults" src="javascript:void(0)">
#document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta content="text/xhtml;charset=UTF-8" http-equiv="Content-Type"></meta>
<meta content="Doxygen 1.8.7" name="generator"></meta>
<link href="search.css" type="text/css" rel="stylesheet"></link>
<script src="all_1.js" type="text/javascript"></script>
<script src="search.js" type="text/javascript"></script>
</head>
<body class="SRPage">
... and so on...
You can fix this with either modifying search.css somehow or using
this kind of code in custom js file with MutationObserver or setInterval based solution. Notice the ../ in path, you need to go one level up to find correct css.
var cssLink = "../custom.css"
var searchDocument = document.getElementById("MSearchResults")
.contentWindow.document;
var head = searchDocument.getElementsByTagName("head")[0];
var customStyle = searchDocument.createElement("link");
customStyle.setAttribute("href", cssLink);
customStyle.setAttribute("type", "text/css");
customStyle.setAttribute("rel", "stylesheet");
head.appendChild(customStyle);
I have a problem creating a Shield UI ASP.NET Chart on my web page. What I need is to have the control with not data, but yet visible on the page.
I have the reference to the control at the beginning:
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
And here is the complete code actually:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="WebApplication1.WebForm2" %>
<%# Register Assembly="Shield.Web.UI" Namespace="Shield.Web.UI" TagPrefix="shield" %>
<!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 id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div id="chart" style="width: 390px; height: 290px; left: 5px; top:5px; margin: auto; position:inherit;">
<shield:ShieldChart ID="ShieldChart1" runat="server" Width="320px" Height="330px"
OnTakeDataSource="ShieldChart1_TakeDataSource">
<DataSeries>
</DataSeries>
</shield:ShieldChart>
</div>
</form>
</body>
Dragging and dropping the control in the VS doesn’t do all the work needed to show the control when page is launched. What you need is to add some more lines of code, and namely:
<link rel="stylesheet" type="text/css" href="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/css/shield-chart.min.css" />
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/jquery-1.9.1.min.js" type="text/javascript"> //</script>
<script src="shield-chart.1.2.2-Trial/shield-chart.1.2.2-Trial/js/shield-chart.all.min.js" type="text/javascript"> //</script>
These are the actual references to the runtime components you need to use the control in your web application.
I have a html table and I am trying to have it span the entire page height. For some reason I am not able to get this to work. I have set the html, body and table height to be 100%, but the table still does not occupy the entire 100%.
Heres the code. It is very basic because I am just trying to have the table occupy the entire height.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.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">
body,html {
margin:0;
padding:0;
height:100%;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<table border="2" cellpadding="0" cellspacing="0" style="height:100%; width:100%" >
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
I tried for couple of hours and I could not get it to work. Any help is really appreciated.
This should work:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.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>
<link rel="Stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css">
<style>
body, html, form, table { height:100%; }
table { border:2px solid gray; }
</style>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>ABCD</td>
</tr>
</table>
</form>
</body>
</html>
Is the table in a form ? make its height 100% too by using style
Try setting the html height attribute to 100%.
<table height="100%">
It appears that the height is relative to the current container, which may not be at 100%. See this article:
http://apptools.com/examples/tableheight.php
In a webform iam have placed one textbox, i want to choose a background image for that particular textbox during runtime. need coding in C#, ASP .NET
You could use css to set the background image and javascript to change it. Here's an example:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="ToDDDD._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">
input
{
background-image: url(/initialImage.png)
}
</style>
<script type="text/javascript">
function changeImage() {
document.getElementById('txt').style.backgroundImage = 'url(/newImage.png)';
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txt" runat="server" />
Change background image
</div>
</form>
</body>
</html>
If you have a limited number of images that you want to use for the background then it would probably be cleanest to define each of them as a separate class in you css and then programatically either with javascript or C# change the class on the input.
<style>
.image1 { background-image: url(/image1.png);}
.image2 { background-image: url(/image2.png);}
.image3 { background-image: url(/image3.png);}
</style>
In you Page_Load of you page you can then write this:
txtBox1.CssClass = "image1";
Or using javascript:
document.getElementById('<%=txtBox1.ClientID%>').setAttribute("class", "image2");