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.
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" />
In my .net application i have Styleshet.css in CSS folder.
Now i want to link this css in Sample.aspx.
What would be the best approach
1.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
OR
2.
<link href="<%=ConfigurationManager.AppSettings["ApplicationUrl"].ToString()%>/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
In Web.Config
<appSettings>
<add key="ApplicationUrl" value="http://localhost/myapp/" />
</appSettings>
The best way in asp.net is option 3:
<link href="~/CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
The ~/ resolves to the site path root. The difference between this and just "css/... is that it will work no matter what subfolder you're in. For example if your code was in
/subsection/default.aspx
and your styles were in folder /css
using a link to "css/stylesheet.css" would resolve (incorrectly) to "/subsection/css/stylesheet.css" whereas using "~/css/stylesheet.css" would resolve (correctly) to "/css/stylesheet.css"
This also differs from a hard path root "/css/stylesheet.css" in that it will work correctly regardless of the virtual directory configuration of the site.
<link href="CSS/StyleSheet.css" rel="Stylesheet" type="text/css" />
Dont go for second approach as when you deploy your site to a server the /localhost/ reference wont work.
Well, always use relative paths so that you don't have to change your files after the deployment.
You can also use resolved app relative path such as
<link href="<%= ResolveUrl("~/CSS/StyleSheet.css") %> rel="Stylesheet" type="text/css" />
Reletive path approch is much better (your first approch), Absolute paths are not portable between applications. If you move the application that the absolute path points to, the links will break.
You can find more information on below mentioned link
Specifying Paths for Resources
Is there a better way to aggregate several css files ( based on what a give page requires ) than including them in a jsp file with c:if tags?
The top of the file (sitting outside of web-inf dir, alongside images files and such)
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
... followed by <%#include file="some.css" %> as needed. It works, it's simple, I'm just wondering if it could be done better.
If you were kind, your CSS request would follow some kind of aggregation pattern.
<link rel="stylesheet" type="text/css" href="core.css?part1&part2&part3">
And then, your result would be kind enough to set the caching headers properly, the ETag, and honor the "If-Modified-Since" header (perhaps based on the latest change date of the files you decide to include).
Is there any reason why you can't just include the CSS pages with normal HTML links, so that they can be cached?
<link rel="stylesheet" href="some.css" type="text/css" media="screen" />
<link rel="stylesheet" href="some2.css" type="text/css" media="screen" />
That way the browser can cache the file, and requests will only be made once for all the pages that use it. Then you could just have each page specify the links that it needs.
How about
<link rel="stylesheet" type="text/css" href="${pageSpecificCssFileName}.css">
wherein you define ${pageSpecificCssFileName} in page controller?
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.
So, I thought I'd try my luck on ASP.NET. I didn't get very far before I found my first problem.
I have a folder layout like so:
\
->Admin
-->Admin.Aspx
->CSS
-->Style.css
->Images
-->bg.gif
Default.aspx
Default.master
Both admin.aspx and default.aspx use the default.master page, which contains the line:
<link rel="stylesheet" type="text/css" href="CSS/Style.css" media="screen" />
This works for the default.aspx page, because the path is valid, but for the admin page it's not.
Is there any special character, like ~ for home in Linux, to indicate the root path?
I can't use just a slash, because the website maybe under a sub folder when hosted.
Hopefully I've explained myself so you can understand what I need to do :)
I guess it's more an HTML issue than an ASP issue.
If your <head></head> tag contains runat="server" (which IIRC it does by default) you can simply specify it as:
<link rel="stylesheet" type="text/css" href="~/CSS/Style.css" media="screen" />