Is it possible to get the site root relative translation in the CSS file of an MVC3 app?
In the .cshtml, I can use:
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
However, in the CSS I need to access content such as:
background-image: url('/Content/images/banner.png');
I would like to be able to get the root like i can with the #Url.Content so i can do something like this (which obviously doesn't work):
background-image: url(#Url.Content("~/Content/images/banner.png"));
Urls in css files are relative to the css file - it is not possible to specify the url relative?
If not then you will need to have ASP.NET process the file. You can either add a mapping to make all css files processed by the ASP.NET engine or to rename the css file into a file with with an extension that already is processed by ASP.NET - such as .aspx. You will probably also need a page directive to make it work...
Related
I have trouble to make my Css and Javascript working. Here is a capture of my current work. I have created a folder with my different html pages and same for Css and js (i only have one css for everything and several js).
It worked when all my htmls, Css and Js are into the main folder but when it comes to organize into severel foldes, nothing is working except my Htmls.
enter image description here
Thank you very much.
Try this out
<link rel="stylesheet" href="/css/style.css">
Try this for the CSS
<link rel="stylesheet" href="../css/style.css">
All your files are in different directories and if you have to link your HTMLs with the CSS and JS files, you have to get out of the HTMLs directory to the parent directory. And, then specify the path to the CSS, JS, and Images.
Use this to reach the parent directory of the current directory.
../
I see you are using Visual Studio Code, there is a trick for call CSS and Javascript
#Styles.Render("~/css/style.css")
#Styles.Render("~/css/yourstyle.css")
and is a good practice to separate css from javascript folder
#Scripts.Render("~/Scripts/yourscript.js")
I'm currently learning about html and css. I've learnt about this code,
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
It was said that external stylesheets can be loaded with 3 ways, and that's one of the ways.
So my question is, does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet my html document?
ps. sorry for bad english
edit: the link comes from w3schools, i'm learning the basics from there. if i shouldn't have done that please tell me so i can remove it.
The following
<link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
Will download the styles.css file from www.w3schools.com/html/. In that case, you only have to upload your html file. The downside is that if the w3schools.com admin deletes the file you don't have control over his decision , your page will not find it anymore.
The best thing to do is to put a local my_styles.css file in the same folder as your html file and then
<link rel="stylesheet" href="my_styles.css">
This means you will have to upload your html file and my_styles.css. In this case the style will be always available for the webbrowsers to download.
does that mean I have to upload my stylesheet to a specific website so I can access the stylesheet
No. The stylesheet needs a URL so the browser can access it. It doesn't have to be a URL hosted by a particular website.
It doesn't matter where that URL resolves to (unless it is one that isn't accessible to the browser — e.g. if the URL is on a private LAN and the browser isn't on that LAN).
No it doesn't have to be uploaded anywhere. The href attribute simply expresses where the file is. The value of the href can be relative or absolute.
Relative
Relative paths are relative to the folder your HTML file is in. So imagine you have an HTML page webpage.html and a CSS file styles.css in the following folder structure:
My Website
|-- css
| `-- style.css
|-- images
`-- webpage.html
Your link element could use a relative path like this:
<link rel="stylesheet" href="../css/styles.css">
../ to go up a folder, then css/ to go into the css foler.
Absolute
An absolute path points to the same place no matter where you're pointing from. In the folder structure above, if My Website was the root directory of our website, we could use absolute paths a couple different ways:
<link rel="stylesheet" href="/css/styles.css">
/ to start at the root directory, then css/ to go into the css folder
OR
<link rel="stylesheet" href="http://www.mywebsite.com/css/styles.css">
This would directly load your CSS from the URL like the w3schools example.
https://www.w3schools.com/tags/tag_link.asp
<link rel="stylesheet" type="text/css" href="my_style.css" />
https://www.w3schools.com/tags/att_style_type.asp
<style type="text/css">
...
</style>
https://developer.mozilla.org/tr/docs/Web/CSS/#import
#import 'custom.css';
My bootstrap css file is located at
C:\Users\SCEA\Downloads\bootstrap-3.3.7\css
and for linking this to my php file I have given absolute path as:
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7\css" rel="stylesheet">
but the effect of css is not visible.Is my css file not getting linked?
You might have a typo before css. The backslash before it might need to be a period.
<link href="C:\Users\SCEA\Downloads\bootstrap-3.3.7.css" rel="stylesheet">
If are running server in your local computer I suggest moving this file within the server document root.
Your comment:
css is a folder inside bootstrap-3.3.7
Probably in the CSS folder are the actual css files.
You need to refer to the actual CSS files and not to the folder itself.
Here is a quickfix using CDN:
Put these links in and it works guaranteed
I am trying to make my first Sinatra + Mustache site but I am having issues including css files for my mustache templates to use. Including them like a normal css file won't work and neither will putting them in a /public/css/mystyle.css format.
Does anyone know how to do this properly?
thanks
I'm not sure that I'm understanding your question properly, but if your css file is in public/css/mystyle.css you should include it with
<link rel="stylesheet" type="text/css" href="/css/mystyle.css">
There are several reasons I can think of, for it not to happen. You have:
omitted leading /
reconfigured public_folder like this: set :public_folder, "path to other folder"
changed root folder, so now your public folder is new_root/public
set up some paths in your configure.ru file
I have made a webpage in Servlet and now i want to add a stylesheet.css to it
Where should i exactly put the .css file ? like in ROOT of tomcat or some where else and what exact path i have to use??
link href='style.css' rel='stylesheet' type='text/css'
Thanks
Sundhas
Put the file somewhere in WebContent. There where your JSP files also are. Or did you abuse the Servlet to generate the HTML output? Well, at least, the public files needs to be placed in the WebContent folder. The folder name might differ from environment to environment, but it is at least the very same root folder where the WEB-INF folder resides. You normally place public content there.
Thanks EveryOne!
I figured this out
Well actually you don't have to paste the FILE.CSS in Root of tomcat
you actually have to paste the .css file where your netbeans Projects reside
for example C://Documents and settings/NetbeansProject/ProjectName/Web
Paste the .Css over there
and so this remains same : link href='style.css' rel='stylesheet' type='text/css'
~Sundhas~
Put your css into the webcontent folder. In the href provide an absolute link to the css and for html formatting use out.prinln statement.
Since you are using a relative path, it should be in the same location as your jsp. If you write your HTML in the Servlet, it should be placed in the root of the webapp.