My question is pretty simple. I have some style classes that I need to use on individual aspx pages. e.g.
.txtbx
{
margin-bottom: 20px;
border-style:solid;
border-width:thin;
border-color:Gray;
height:30px;
width:250px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Now, can I add such styles to the site.css file (that comes as a default when you choose to create a new web application). If yes how do I apply it to the individual .aspx pages since I don't have a head tag there. I read a solution that asks me to include a content place holder in the content (.aspx) page and put the link in it. However I already have two content place holders on each of my content pages. Do I need to add a third one?
Also, would it be better to have another (external) css file to define & use my personal styles such as the one above..? Thnx..!
On your master page :
<%#
Master Language="C#"
AutoEventWireup="false"
CodeBehind="BaseMaster.Master.cs"
Inherits="BaseMaster"
EnableViewState="false"
%>
<html runat="server" id="htmlTag" xmlns="http://www.w3.org/1999/xhtml" clientidmode="Static">
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="cphHead" runat="server"></asp:ContentPlaceHolder>
</head>
<body runat="server" id="bodyTag" clientidmode="Static">
<form id="form1" runat="server">
<asp:ContentPlaceHolder ID="cphBody" runat="server"></asp:ContentPlaceHolder>
</form>
</body>
</html>
On your page where you need the style:
<%#
Page Title=""
Language="C#"
MasterPageFile="~/BaseMaster.Master"
AutoEventWireup="false"
CodeBehind="..."
Inherits="..."
EnableViewState="false"
%>
<asp:Content ID="Content2" ContentPlaceHolderID="cphHead" runat="server">
<link runat="server" href="Styles/YOURSTYLE.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="cphBody" runat="server">
<input type="hidden" id="Field1" runat="server" clientidmode="Static" />
</asp:Content>
Not sure what you want, but I can assume following.
you have a global .css file, which you want to be applied to all the .aspx pages.
then simply , add a Link to the css file in the head section of your .Master page
you have a local css file, i.e. a css you want to be applied only to a given page, but not to the other pages, in that case, you should do this.
a. expose the head section of your Master page, by creating a ContentPlaceHolder inside the head of the Master Page. i.e (head of Master Page below)
<head runat="server">
<title></title>
<asp:ContentPlaceHolder ID="headerContent" runat="server">
</asp:ContentPlaceHolder>
</head>
b. and use this contentPlaceHolder on your local Page to add link to that local css file.
<asp:Content ID="HeadContent" ContentPlaceHolderID="headerContent"
runat="server">
<link runat="server" href="styleSheet.css" rel="stylesheet"
type="text/css" />
</asp:Content>
Related
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 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.
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:
I am trying to put inline css into an mvc page which inherits from a master page. I want to do this because this css is page specific and I feel it shouldn't go into a site wide file. What is the best way of doing this. My failed attempt is below. Nothing on the site will recognize testTwo styling. Thank you
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
.test
{
}
.testTwo *
{
float: left;
padding: 5px;
border: 2px solid gray;
margin: 3px;
}
</style>
</asp:Content>
missing the opening <style> tag? bad copy-paste, not the issue
Where is this ContentPlaceHolder at in your MasterPage?
Often times the TitleContent ContentPlaceHolder is inside the <head> tag within the <title> element like so:
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
Is this the case? If so, those styles will not be interpreted since browsers won't recognize the styles within <title><style>..</style></title>
I would suggest updating your MasterPage like this:
<head>
<title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<link.... />
<link.... />
<asp:ContentPlaceHolder ID="StylesheetContent" runat="server" />
<script.... />
<script.... />
<asp:ContentPlaceHolder ID="ScriptContent" runat="server" />
</head>
Where is your opening
<style type="text/css">
?
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");