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">
?
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'm trying to learn to use stylesheets. I have build several websites, but never used stylesheets.
My first try is to repeat an image at the top of the page to create some kind of header.
So I have created a stylesheet that looks like:
body {
width: 100%;
background-image: url('../images/MasterPageHead.png');
background-repeat: repeat-x;
background-color: #FFFFFF;
}
Now on my master page, I have added the line:
<link href="CSS/MasterPage.css" rel="stylesheet" />
The body of my master page looks like this:
<body>
<form id="form1" runat="server" >
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
</form>
</body>
Now how can I show this image at the top of the page?
rg,
Eric
Make sure there is something inside the page to give it a height, or specify a min-height inside your current body CSS rule.
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>
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>
Im getting a really weird problem which im pretty sure is due to 'positioning'.
Basically i've got a master page, which contains a container div, and has its position set to absolute, and using this it fills in margins along the side of the page. I'm then trying to use jQuery AutoComplete on a page, which itself has the position set to absolute, but when I select an item from the list, it reduces the margins, and its as though the absolute position on the page is removed/overriden, until typing something in the input box.
Using Firefox and Chrome there is no issue, and they work as expected.
I've managed to replicate my problem a bit simpler:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="CssProblem.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">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='http://code.jquery.com/jquery-1.4.2.js'></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/jquery-ui.js"></script>
<script>
$(function () {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp"
];
$("#tags").autocomplete({
source: availableTags
});
});
</script>
</head>
<body>
<div id="container-content" style="width: 98%; position: absolute; min-height: 100%; border-left: solid 1px #ccc; border-right: solid 1px #ccc;">
<div class="ui-widget">
<label for="tags">Tags: </label>
<input id="tags" />
</div>
<br />
Some Text
</div>
</body>
</html>
Any help/tips/suggestions would be greatly appreciated
Edit:
Found this issue does not apply to IE8, but does apply against IE7 & IE8 Compat mode, still having no joy
For
position:absolute
probably you can change it to
position:absolute !important
which will not allow any external CSS to override the position attribute try this which may help you out