I was hoping someone may be able to help out with an issue.
I have a site that is accessed through a root domain (originalDomain.com) and the CSS is linked as below.
<link href="../../Styles/Css/style.css" rel="stylesheet" type="text/css" />
This all works fine
However I can also access this site on a different domain. Rather than the absolute root of the domain this one is accessed at newDomain.com/login. This still points to the files at the location of the original domain but because of the /login is unable to locate the CSS file. I assume the ../../ takes it to newdomain.com rather than newdomain.com/login.
Is there an easy way to have a single CSS reference without any back end code changes that will allow the CSS to be successfully referenced at both of the above scenarios.
I hope this makes sense.
Any help is greatly appreicated.
Give absolute paths and not relative ones
<link href="/path/to/css/style.css" rel="stylesheet" type="text/css" />
Note the first character is a / (slash)
If your <head></head> tag contains runat="server" you can simply specify it as:
<link rel="stylesheet" type="text/css" href="~/CSS/Style.css" media="screen" />
Taken from here
Related
I'm aware this is similar to numerous existing posts but after looking at a number of others I wasn't able to solve my problem. I'm attempting to load a folder full of html files I've been supplied with. I didn't write them but I have been modifying them to integrate them into an existing system.
I've tried three ways of opening them, with varying success:
1) Simply right click on 'index.html' and go 'open with' and select a browser. This works perfectly!
2) Place the whole folder contents, unchanged, onto my server under 'public_html/cat/html' and navigating to the url 'localhost/cat/html/index.html'. This returns a '404 page not found error'.
3) The strange one. Place the html files in the 'application/view' folder, separate the included css and javascript files and place them in existing folders 'public_html/css' and 'public_html/js' and update the links to them in the html files appropriately. These now look something like:
<link type="text/css" href="css/cat/style.css" rel="stylesheet" />
If I load this page by running a function that uses CodeIgniter's $this->load->view(...) function it finds the index file but loads it with no css and with broken links to the other pages. I've explored the page source and seen that the link is exactly as above but clicking gives an error that reads "404 Not Found...The requested URL /css/cat/style.css was not found on this server".
I've attempted to use the base_url() function (and site_url()) like this:
<link type="text/css" href="<? base_url('css/cat/style.css') ?>" rel="stylesheet" />
and it yields the same result on the surface but examining the page source reveals the link line has become:
<link type="text/css" href="" rel="stylesheet" />
which seems to be even worse!
Any hints?
Thanks for reading
Try the following:
<link type="text/css" href="<?php echo base_url('css/cat/style.css') ?>" rel="stylesheet" />
base_url() functon simply return value, you should take a care for displaying returned value to output! :-)
Have you correctly configure you config file in codeIgniter ?
Or shorthand
<link type="text/css" href="<?=base_url('css/cat/style.css') ?>" rel="stylesheet" />
Then view your page source and copy the link from there to your browser, see if you can access it.
Can try this code <link type="text/css" href="<?=base_url('css/cat/style.css');?>" rel="stylesheet" />
if it doesn't work, you could try <link type="text/css" href="<?=base_url('css/cat');?>/style.css" rel="stylesheet" />
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
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
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" />
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