Using runat="server" in stylesheet link not resolving - html

I'm trying to include a stylesheet in one of my aspx pages. The stylesheet is in the directory /Dir1/style.css (relative to the project root). I'm trying to get it to resolve in a page that's at the path: /Dir1/MyPage.aspx. I'm aware that I could just include the stylesheet in the header, since it's in the same directory, but I'm trying to use the runat="server" tag so that it would be easier to move the page later if needed.
This is the line I'm using:
<link runat="server" rel="stylesheet" href="~/Dir1/style.css" type="text/css" media="all"/>
Everything I read indicate this is supposed to work, but no matter what I do, I get a 404 in the browser for that stylesheet. The runat attribute doesn't seem to be doing anything - the path the browser is trying to fetch ends up being: http://localhost:7205/Dir1/~/Dir1/style.css. What am I doing wrong?

try this:
<link runat="server" rel="stylesheet" href="<%= Page.ResolveUrl("~/Dir1/style.css") %>" type="text/css" media="all"/>
And you should not need the runat=server

Related

<%= foo %> not pulling value through on css src

I'm trying to force a value into the linked .js and .css files. It works fine on my js files but not on my css. Example code:
<script src="/Scripts/ExampleJSFile.js?v=<%= version %>"></script>
<link href="/Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet" >
Which is giving the following result:
<script src="/Scripts/ExampleJSFile.js?v=5.0.0.1"></script>
<link href="Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet">
I am using asp.net c# (WebForms) as my code behind framework.
Thanks
Event binding and dynamic codes run only on server side controls and code snippet that can be accessed by .net.
By default asp.net process script src tag and replace value for you, But when it come to somethings like css link or favicons, the compiler dose not process your code and just send it to client.
You must place things like these into server container elements like placeholder.
I always use code like this to solve it:
<asp:PlaceHolder runat="server" ID="StylesPlaceHolder">
<link href="/Styles/ExampleCSSFile.css?v=<%= version %>" rel="stylesheet" >
</asp:PlaceHolder>
It will result in something like this:
<link href="/Styles/ExampleCSSFile.css?v=5.0.0.1" rel="stylesheet" >

I’m having trouble linking my CSS file to my html

I created the CSS folder and named it. I added this to my header in HTML but the changes aren’t happening.
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css" />
You mentioned you've created a CSS folder. Then include that folder name in the href
<link rel="stylesheet" type="text/css" href="CSS_FOLDER_NAME/haiku-styles-shaun.css" />
Probably your CSS file isn't in the same directory as your HTML file, you provided the wrong name of your CSS file (also check that your CSS file's extension is .css). Solve these and try again.
You have to include each file you need separately.
e.g.:
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myButton.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myPhoto.css" />
<link rel="stylesheet" type="text/css" href="haiku-styles-shaun.css/myFooter.css" />
Most user don't need all their style definition at the same time. To save bandwidth you have to choose.
You said that you created a folder but you didn't write it on the path. Try adding the css folder before the file name like this:
<link ref="stylesheet" type="text/css" href="folder/file.css" />
Furthermore I suggest you to include versioning in your css to avoid browser caching when you refresh. To do that every time you update your css change the number at the end in the link:
<link ref="stylesheet" type="text/css" href="folder/file.css?v=1" />
The <link> tag is used to link to external style sheets. You have to use something like this :
<link rel="stylesheet" type="text/css" href="Folder-Name/Stylesheet-Name.css">
Make sure that your href address is setup properly otherwise it won't load in your HTML page .
Note: The element is an empty element, it contains attributes only.
Note: This element goes only in the head section, but it can appear any number of times.
In HTML the <link> tag has no end tag. In XHTML the tag
must be properly closed.

Read a CSS file outside a main folder

I have html file in main(X-folder) which has CSS also, and I convert HTML to asp and i need to put inside a ASP[Y] folder..
My question since my CSS file is in main folder[X] how can i access on to it. suppose i am in X folder
my problem is that my File in Y folder which is converted to .asp file when i access its url i lost majority of its image and styles
how can i re-write my css
i tried few; still its not read the CSS
this is an image which describe my problems
<link href="X/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="X/css/responsiveslides.css">
<link href="X/css/iframeCSS.css" rel="stylesheet" type="text/css">
Have you tried using a leading slash (/ at the start)? It indicates to load the resource from the root of the web server. For example, with <link href="/X/css/style.css" ... /> it will load from example.com/X/css/style.css.
You could also use ../, which indicates to load a resource from a directory below (up a level). So if you were in directoy Y/, you could do <link href="../X/css/style.css" ... /> which loads the resource, again, at example.com/X/css/style.css.
The stylesheets included in your page are using relative paths.
Specify your stylesheet links with
runat=server
and prefix them with the virtual web root path
(~)
For example :
<link href="~/X/css/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

Spring add CSS to different pages

I have 2 pages:
http://local.host:8080/test/login
http://local.host:8080/test/admin/manage
Added css in login.jsp using c:url:
<c:url value="css/style.css"/>
When I open 1st link - everything works well. I tried to add the same style.css file to manage.jsp (2nd URL), but when I open 2nd link - css is not included. In Page Source I have:
<link rel="stylesheet" type="text/css" href="css/style.css"/>
How to define to take style.css from the root of URL (http://local.host:8080/test) ?
I think it is, because the specified path is relative to the current page (login is at an other level of path-nesting* than admin/manage).
A trivial but bad solution would be adding ../ for the css of admin/manage. But this soultion has the drawback, that you always need to adjust the ../ when you change the level of path-nesting* for an page.
To overcome this problem, make the path in the c:url-tag start with an /! (this make the tag aware that the url is context relative (relative to http://local.host:8080/test/), and the tag will automatically addhttp://local.host:8080/test` in front.
<c:url value="/css/style.css"/>
will be rendered to : http://local.host:8080/test/css/style.css
For the link use this way
<c:url value="/css/style.css" var="cssUrl"/>
<link rel="stylesheet" type="text/css" href="${cssUrl}"/>
*I do not know the correct term for "path nesting" at the moment - fell free to change it
Order of attribute might be the problem. Correct the order
<link href="css/style.css" rel="stylesheet" type="text/css" />

css not found (404) - it's adding another css to my path

I have a normal HTML page on my IIS8 development machine. Very basic and doesn't contain any code yet.
To the HEAD I've added a css file deceleration I've created:
<link href="css/catalog.css" rel="stylesheet" />
When inspecting with either chrome or fiddler it reports a 404 - but not because the file isn't there - but because it's adding another css folder:
GET http://localhost/mywebsite/message/css/css/catalog.css 404 (Not Found)
which should actually be:
http://localhost/mywebsite/message/css/catalog.css
strange thing is that if I change the name of the folder to anything but CSS it works.
any ideas to why this is happening?
Thanks
Just use this and you'll be good to go:
<link href="catalog.css" rel="stylesheet" />
EDIT:
<link href="/catalog.css" rel="stylesheet" />