ASP Net - How To Link A StyleSheet To A Master/Content Page

06-22-2006, 12:39 AM

I have started a web site using ASP.NET 2.0. I would like to centralize all
of my classes in a StyleSheet but I cannot figure out how to link the
StyleSheet to a Content Page since there is no header. I tried to put the
link tag in the Master page, but the classes are not recognized in the
Content Page.

How do I use a StyleSheet with the Content Page?

TIA

SR

SR

06-22-2006, 02:00 AM

Is your Master Page and content page in the same directory? If the
answer is no then your problem may be caused by the path to the css
filw being relative to the master page and not the content page. read
the below article on how to resolve this problem

The following is taken from http://www.odetocode.com/Articles/450.aspx

Break Some URLs
Once again, let's think back to the beginning of the article. At
runtime, the master page and the content page are in the same control
hierarchy - the master page is essentially a user control inside the
content page. At design time, however, the master page and content page
are two different entities. In fact, the master page and content page
may live in different directories. During design time, it's easy to put
URLs and relative paths into our master pages, but we have to be
careful when using relative paths. Take the following master page
excerpt as an example:.

<div>
<img src="logo.gif" alt="Company Logo" />

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>

As long as the master page and the web form live in the same directory,
the company logo will display in the browser. When the master page and
web form live in different directories, the image will not appear. The
browser requests knows nothing about master pages. The browser will
interpret any relative paths it finds in the HTML as being relative to
the webform. If our logo and master page files are in the root
directory, but the web form is in a subdirectory, the browser will ask
for logo.gif from the same subdirectory. The server will respond with a
404 (file not found) error.

The good news is, the ASP.NET runtime does provide a feature called
"URL rebasing". The runtime will try to "rebase" relative URLs
it finds on server-side controls inside a master page. This means the
following relative path will work, no matter where the master page and
web form live.

<img src="logo.gif" alt="Company Logo" runat="server" />
We've added a runat="server" attribute to the image tag, making
the <img> a server-side control. When the master page file and logo are
in the root directory, but the web form is in a subdirectory, the
ASP.NET runtime will rebase the relative path it finds in the src
attribute to point to the root of the website.

The following code will also work, because we are using a server-side
Image object.

<asp:Image ImageUrl="logo.gif" runat="server" />
The ASP.NET runtime will also rebase paths it finds inside of the head
tag. Take the following excerpt from a master page:

<head runat="server">
<title>Untitled Page</title>

<link href="styles/styles.css" type="text/css" rel="stylesheet"/>

</head>

If we request a webform from a subdirectory, the runtime will catch the
href inside the link tag and rebase the URL to "../styles/styles.css".
However, the runtime doesn't catch everything. If we included our
style sheet with the following code, the runtime won't rebase the
relative href.

<head runat="server">

<style type="text/css" media="all">
@import "styles/styles.css";
</style>

</head>
Also, the runtime doesn't rebase URLs inside of embedded styles, and
not all attributes are covered (the background attribute, for
instance).

<body background="logo.gif" runat="server">

<form id="form1" runat="server">

<div id="Div1" style="background-image: url('logo.gif');"
runat="server">

</div>

If you need to use a relative path in an area where the runtime does
not provide the rebasing feature, you can compute a client side URL
using ResolveClientUrl and passing a relative path. ResolveClientUrl,
when called from inside a master page, will take into account the
location of the master page, the location specified in the HTTP
request, and the location specified by the relative path parameter to
formulate the correct relative path to return.

<body background=<%= ResolveClientUrl("logo.gif") %> >
When working with image paths in embedded styles, it's often a good
idea to move the style definition into a .css file. The ASP.NET runtime
will rebase the path it finds inside a link tag, so we won't have any
problems locating the stylesheet from any webform. Take the following
style definition in a .css file:

body
{
background-image:url('images\logo.gif');
}
Relative paths are safe inside a .css file because the browser will
always request logo.gif relative to the location of the stylesheet.

06-27-2006, 05:01 PM

In article <>, SR
<> writes
>I have started a web site using ASP.NET 2.0. I would like to centralize all
>of my classes in a StyleSheet but I cannot figure out how to link the
>StyleSheet to a Content Page since there is no header. I tried to put the
>link tag in the Master page, but the classes are not recognized in the
>Content Page.
>
>How do I use a StyleSheet with the Content Page?

If you use themes, then the framework will do all the work for you. You
just need to drop the CSS file in the theme folder and the emitted HTML
will contain a link for you.

The header is in the master page by the way.

--
Alan Silver
(anything added below this line is nothing to do with me)

06-22-2006, 02:00 AM	#2
Nogusta123@hotmail.com Posts: n/a	Re: How To Link A StyleSheet To A Master/Content Page Is your Master Page and content page in the same directory? If the answer is no then your problem may be caused by the path to the css filw being relative to the master page and not the content page. read the below article on how to resolve this problem The following is taken from http://www.odetocode.com/Articles/450.aspx Break Some URLs Once again, let's think back to the beginning of the article. At runtime, the master page and the content page are in the same control hierarchy - the master page is essentially a user control inside the content page. At design time, however, the master page and content page are two different entities. In fact, the master page and content page may live in different directories. During design time, it's easy to put URLs and relative paths into our master pages, but we have to be careful when using relative paths. Take the following master page excerpt as an example:. <div> <img src="logo.gif" alt="Company Logo" /> <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> As long as the master page and the web form live in the same directory, the company logo will display in the browser. When the master page and web form live in different directories, the image will not appear. The browser requests knows nothing about master pages. The browser will interpret any relative paths it finds in the HTML as being relative to the webform. If our logo and master page files are in the root directory, but the web form is in a subdirectory, the browser will ask for logo.gif from the same subdirectory. The server will respond with a 404 (file not found) error. The good news is, the ASP.NET runtime does provide a feature called "URL rebasing". The runtime will try to "rebase" relative URLs it finds on server-side controls inside a master page. This means the following relative path will work, no matter where the master page and web form live. <img src="logo.gif" alt="Company Logo" runat="server" /> We've added a runat="server" attribute to the image tag, making the <img> a server-side control. When the master page file and logo are in the root directory, but the web form is in a subdirectory, the ASP.NET runtime will rebase the relative path it finds in the src attribute to point to the root of the website. The following code will also work, because we are using a server-side Image object. <asp:Image ImageUrl="logo.gif" runat="server" /> The ASP.NET runtime will also rebase paths it finds inside of the head tag. Take the following excerpt from a master page: <head runat="server"> <title>Untitled Page</title> <link href="styles/styles.css" type="text/css" rel="stylesheet"/> </head> If we request a webform from a subdirectory, the runtime will catch the href inside the link tag and rebase the URL to "../styles/styles.css". However, the runtime doesn't catch everything. If we included our style sheet with the following code, the runtime won't rebase the relative href. <head runat="server"> <style type="text/css" media="all"> @import "styles/styles.css"; </style> </head> Also, the runtime doesn't rebase URLs inside of embedded styles, and not all attributes are covered (the background attribute, for instance). <body background="logo.gif" runat="server"> <!-- the background for the body tag will break --> <form id="form1" runat="server"> <div id="Div1" style="background-image: url('logo.gif');" runat="server"> <!-- My background is also broken. --> </div> If you need to use a relative path in an area where the runtime does not provide the rebasing feature, you can compute a client side URL using ResolveClientUrl and passing a relative path. ResolveClientUrl, when called from inside a master page, will take into account the location of the master page, the location specified in the HTTP request, and the location specified by the relative path parameter to formulate the correct relative path to return. <body background=<%= ResolveClientUrl("logo.gif") %> > When working with image paths in embedded styles, it's often a good idea to move the style definition into a .css file. The ASP.NET runtime will rebase the path it finds inside a link tag, so we won't have any problems locating the stylesheet from any webform. Take the following style definition in a .css file: body { background-image:url('images\logo.gif'); } Relative paths are safe inside a .css file because the browser will always request logo.gif relative to the location of the stylesheet.

06-27-2006, 05:01 PM	#3
Alan Silver Posts: n/a	Re: How To Link A StyleSheet To A Master/Content Page In article <>, SR <> writes >I have started a web site using ASP.NET 2.0. I would like to centralize all >of my classes in a StyleSheet but I cannot figure out how to link the >StyleSheet to a Content Page since there is no header. I tried to put the >link tag in the Master page, but the classes are not recognized in the >Content Page. > >How do I use a StyleSheet with the Content Page? If you use themes, then the framework will do all the work for you. You just need to drop the CSS file in the theme folder and the emitted HTML will contain a link for you. The header is in the master page by the way. -- Alan Silver (anything added below this line is nothing to do with me)

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search

06-22-2006, 12:39 AM	#1
	How To Link A StyleSheet To A Master/Content Page I have started a web site using ASP.NET 2.0. I would like to centralize all of my classes in a StyleSheet but I cannot figure out how to link the StyleSheet to a Content Page since there is no header. I tried to put the link tag in the Master page, but the classes are not recognized in the Content Page. How do I use a StyleSheet with the Content Page? TIA SR SR