In the head portion of my Master page i have a link to an external CSS file
<link href="style.css" rel="stylesheet" type="text/css" />
Although i am able to apply the style in child pages in design time...
<asp:Label ID="Label" runat="server" CssClass="BodyText" Text="This is a link"></asp:Label>
...in run time child pages have no style.
So, What am i missing here?
If your child pages are in a subdirectory, they'll expect the style sheet in that directory as well. changing the reference to the style sheet to ../style.css or /style.css should help.
The path to the CSS file (and any other file - images, javascript, etc) is relative to the page (the page address in the browser). If the master page is in a different folder than the page, then the css file may not be found.
Try using either an absolute path, a path relative to the root, or a path to the CSS file like this:
<link href="~/style.css" rel="stylesheet" type="text/css" />
Try using the root operator "~" for stylesheets in your master page:
<link type="text/css" href="~/css/style.css" rel="stylesheet" />
ASP.NET resolves the ~ operator to the root of the current application. You can use the ~ operator in conjunction with folders to specify a path that is based on the current root.
Related
I have a folder in my web application where aspx page and content page both are there and master page is in root location. I am using the css path which is loading fine in firefox console for aspx page but the same path is not loading for content pages checked in firefox console. Due to that some of the boostrap functionality not working.
Below is the css path for aspx page
<link href="MySheet.css" rel="stylesheet" type="text/css" />
and same path is used for content page
<link href="MySheet.css" rel="stylesheet" type="text/css" />
Need help in this.
The browser resolves the href url in a relative manner. If it's located in the root, you can place "/" in the beginning of the path, like this:
<link href="/MySheet.css" rel="stylesheet" type="text/css" />
this will instruct the browser look for the stylesheet in the root, regardless of the current page's relative path. But if you use a server-side technology, like ASP.NET, there's another way of specifying the application's root - "~/", in this case, though in this case you'd have to add runat="server" to the tag, so it would look like this:
<link href="~/MySheet.css" rel="stylesheet" type="text/css" runat="server" />
I am new to the domain. I want to include a CSS file in my master pages,but it is not working can anyone try to help me out of this problem..
I give the link to the CSS externally as
<link href="Stylesheet1.css" rel="Stylesheet1" type="text/css" />
Is there any necessity to include CSS classes in master page if so how and where I have to include?
Try:
<link href="~/Stylesheet1.css" rel="Stylesheet1" type="text/css" />
Tilde (~) represent root directory.
If this doesn't work, if you can show us your directory structure, and look at the rendered source we can help more.
You can of course not use the Tilde (~) on tags that are not run server-side, what you have to do is something like this:
<link href="<%= ResolveClientUrl("~/Stylesheet1.css")%>" rel="stylesheet" type="text/css" />
Or just do a method that gives you back a full link-tag.
There's nothing wrong with the syntax of your <link> tag. The problem is likely to be caused by the fact that your CSS file isn't located at the URL you're attempting to get it from.
The href attribute in your markup specifies a file called Stylesheet1.css in the same folder as your master page. If its not you should specify the location of the stylesheet using standard, virtual path or move the stylesheet to the same folder as your masterpage.
More info.
http://w3schools.com/css/css_howto.asp
In the root of my domain i have the CSS file style.css and the masterpage file site.master.
The link to the CSS file within the site.master is
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
The problem is that webpages contained within subdirectories do not inherit the CSS file.
What am i doing wrong here?
If i copy the style.css file to the subdirectories everything works like a charm...
UPDATE: If i change the path to /style.css or to ~/style.css the style is Not applied also to the webpages within the root folder.
MasterPages use the containing page for the path.
change your css tag to be a server control and use the "~" root symbol.
<link id="lnkStyle" runat="server" href="~/style.css"
rel="stylesheet" type="text/css" />
You need to specify the path as /style.css.
Well the obvious question is, does the other pages inherit the correct masterpage, namely the one with your css link?
ie.
<%# Page Language="C#" MasterPageFile="~/MasterPage.master"...
also perhaps '/' before file name would help
If you're including that link tag in your master page, the HTML being output by the content pages in subdirectories contains a link to "style.css", which the browser looks for in that directory.
If you're developing in ASP.NET, you should be placing your CSS files in themes, which will take care of this problem. If you really don't want to do that for some reason, make the URL to the stylesheet an application-relative path ("~/style.css") and make the link tag executed on the server; I believe that that will resolve the application path and generate an absolute URL.
Try this:
<link href="<%: Url.Content("~/style.css") %> rel="stylesheet" type="text/css" media="screen" />
It will make the path relative to your hostname, giving the correct path to your pages in the subdirectories. Right now, just linking style.css gives it the folder relative path, so its looking inside of the same folder your page is in, instead of where you intended. Hope that helps. You could also re-write your link with a preceding forward slash, like "/style.css" and that should also do the trick.
In my application I have next problem. I created master page and some content pages, some of which are located in the nested folders. In the master page I added the link to .css file
<link href="default.css" rel="stylesheet" type="text/css" />
But pages are located in the nested folders can't use this .css file. How can I fix this? I want to have one .css file for all pages (:
Thanks!
<link href="~/default.css" rel="stylesheet" type="text/css" />
This problem can be resolved by adding next code in master page
<style type="text/css" runat="server">
#import '<%= ResolveUrl("~/default.css")%>';
</style>
But designer of VS can't process this and you couldn't view your styles in it.
The css shouldnt be relative to the master page but rather it should be relative to the location of the Page instance using the master page. In most cases this will be the same thing but I would always try to use either a fully qualified path or a site relative path
Fully qualified path
<link href="http://some.site.com/mysite/styles/default.css" rel="stylesheet" type="text/css" />
or a relative path (note this might not work if you have a version which can only host one site but many apps such as WinXP)
<link href="/default.css" rel="stylesheet" type="text/css" />
Win xp relative path
<link href="/path/to/application/default.css" rel="stylesheet" type="text/css" />
If you using website under website, change in subfolder masterpage CSS link
<link href="Styles/Site.css" rel="stylesheet" type="text/css" />
change with below
<link href="../Styles/Site.css" rel="stylesheet" type="text/css" />
The way you defined you style sheet means: the style sheet is in the same folder as the page which uses it.
If you want to have one style sheet for all pages you should put in in one place (I prefer /assets/css folder in the application root) and define the path using this folder:
<link href="/assets/css/default.css" rel="stylesheet" type="text/css" />
The other way to archieve this is to use Themes, in this case styles will be added automatically.
I have this quite popular problem, but have failed to find a solution that works.
Basicly, I am using a Master Page (/Masterpages/Default.master), that includes
<link href="../css/style.css" rel="stylesheet" type="text/css />
And it also includes some images with the same relative linking.
But when I apply the Master Page to content pages (in diffrent folderlevels) the css formating and images is lost.
Is there anyway to dynamicaly solve the folderlevel links to css and images to all content pages using the masterpage?
Thanks in advance
UPDATE:
There is an additional problem. It's tricky to get the output to render correctly in both the browser and in design view in Visual Studio.
I got it to work by using the asp:image solution for the images in the masterpage and by double linking the css in the masterpage, one to make it render in VS and one to make it render correctly browsing the site.
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href="<%=ResolveUrl("~/css/style.css")%>" rel="stylesheet" type="text/css" />
best to use:
<link href="<%=ResolveUrl("~/css/style.css") %>" rel="stylesheet" type="text/css />
since this will cope with iis application roots unlike:
<link href="/css/style.css" rel="stylesheet" type="text/css />
You can make your link runat="server" and use tilde mapping to make the CSS path relative to the site root.
<link runat="server" id="siteStyle"
href="~/css/style.css"
rel="stylesheet"
type="text/css" />
The images referenced in the CSS should be relative to the location of the CSS file and should resolve normally once the CSS file itself is included properly. For images in tags on the page, you would need to use the ASP:Image control and, again, use the tilde mapping for a path relative to the root.
Fairly sure this will work
<link href="/css/style.css" rel="stylesheet" type="text/css />
/ takes you to the root of your site
You can use the tilde to get the link to work from anywhere. This will work in Images as well.
<link runat="server" href="~/css/style.css" rel="stylesheet" type="text/css />
Images in CSS are relative to the file they are referenced from.
(An exception from this is the "filter" rule in Internet Explorer which is used for PNG fixes. The images in this case are relative to the HTML document.)
Yes, the problem is that the materpage is using a relative url to load the CSS:
"../css/style.css"
you need to change this to the site root (depending on the location of your css files) something like:
"/css/style.css"
than all the various folder levels can use the same url.
Actually, master pages will rebase css files for you automatically, without you having to add runat="server". Be sure that your css file is located one directory down in the folder you specified.
You can use an absolute path to the css file, but visual studio doesn't seem to render the styles in design view when you do this. Also, sometime you won't know if you're going to be running in a virtual directory, so it's not always ideal to use the absolute path.
Also, use relative links to your image assests from the css file itself - which will work irrespective of how you link to your stylesheet.
You might also be interested in looking into themes and skins.
ASP.NET Themes and Skins Overview