CSS is now working fine for the webpages in bin folder but Top header not appearing. The header file named inner_header_new.html is called on every page using a script like this:
# script should come here
This is working fine with the pages on root but not for webpages in bin folder. This header is located at the root of FTP:
<body>
<header>
<!-- header_main start -->
<div class="inner_header_main">
<!-- header_inner_main start -->
<!-- <div class="header_inner_main"> -->
<!-- header_top start -->
<div id="inner_headerinclude"></div>
<script>$('#inner_headerinclude').load('inner_header_new.html');</script>
Since you dodn't post any code, we'll have to guess.
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="/style.css" />
Compare the two lines and check your own code.
Maybe you need this slash.
If you request a nonexistent page Apache pulls up the 404 error page. However, apache does not redirect you to the 404 error page. Instead it pulls it up as though that was the page you were requesting. Since your stylesheet works at the root but not anywhere else, I can only presume that you used relative reference to your stylesheet instead of absolute.
Absolute referencing:
<link rel="stylesheet" ref="http://www.website.com/style.css" />
<link rel="stylesheet" href="/style.css" />
Or better yet:
<style type="text/css">
#import url("/stylesheet.css");
</style>
Try it out.
--
FYI - It is recommended to always use absolute referencing for your stylesheets. If you ever need to move the file to a different directory it won't break.
Related
The file structure in my GitHub repo is
--root
index.html
resume.css
--folder assets
resume.css
(yes I made two identical css file just in case one of them works but none of them works...)
I tried to reference css file as
<link rel="stylesheet" type="text/css" href="resume.css" media="all" />
or
<link rel="stylesheet" type="text/css" href="assets/resume.css" media="all" />
But again none of them works..
When I download the entire GitHub repo as a .zip file on my computer and unzippit, the website can display normally.
Is it something else I could do?
The webpage shows on my local file
and webpage on github
Can you check where you placed the <link> tag?
It should be inside the <head> tag
EDIT:
You can move highlighted section in here to parent <head> tag and remove <head> tag inside <div> tag
I have a ASP.NET MVC project which uses JQuery Datatables to show a table.
The problem: the css stylesheet isn't applied when links to local css file. I've tried the following:
<link rel="stylesheet" type="text/css" href="~/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="../Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="/Content/datatables.min.css" />
<link rel="stylesheet" type="text/css" href="Content/datatables.min.css" />
But this one (at the same place of my HTML) is working:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css" />
Even current sorting column highlight from this css doesn't work!
Of course, the CSS file exists in my project's Content folder, and its contents is totally the same, because I even try to copy the file from https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css and put it in project's Content folder.
So, the question is why doesn't the first HTML link snippet work?
Maybe, a bug in the MVC (it's up to date)?
jQuery DataTables distribution includes CSS, JS and image files (in the images folder).
Use Download builder, select Download tab and download all required files.
Also you should not use ~ in your URL. Most likely that is the reason why CSS is not applied. Use absolute URL /Content/datatables.min.css or relative URL Content/datatables.min.css instead.
i tried to do this and i got an error.
this is the header:
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--#include file="functions.asp"-->
</head>
<body>
<div>etc...
this is default.asp:
<html>
<head>
<title>jh</title>
<link href="JHstyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--#include file="/header.asp"-->
<!--#include file="header-jh.asp"-->
<table... etc
Although I am not used to classic ASP (this is different to the newer ASP.NET) it looks like you are creating a document structure error - the combined document would look like:
<html>
<head>
<title>jh</title>
<link href="JHstyles.css" rel="stylesheet" type="text/css">
</head>
<body>
<head>
<link href="styles.css" rel="stylesheet" type="text/css">
<!--#include file="functions.asp"-->
</head>
<body>
<!-- div content etc. -->
<!--#include file="header-jh.asp"-->
<!-- Table and other content -->
</body>
</html>
Note that the head and document elements appear twice, which is invalid - in any document the head and body elements should appear exactly once, with the head as the first child of the html element. See https://developer.mozilla.org/en-US/docs/HTML/Element/head and https://developer.mozilla.org/en-US/docs/HTML/Element/body
There is a new header element in HTML5 which is meant to represent the page header content within the body, as a new semantic element, but the head element should never appear as a child of body, or body as a child of head.
In PHP, the closest construct I have used to classic ASP, I would normally create a header.php file that would include the doctype, opening HTML tag, and entire head element - using variables to pass in the page title and any custom scripts/stylesheets. I don't know if this approach would work in classic ASP but conceptually there is no reason it shouldn't, you'll just need someone with more experience of classic ASP to advise you.
As it stands you'll either need to remove everything but the stylesheet(s) and functions.asp include reference from your header.asp file, and move the include up inside the head on the default.asp file, or start the head element in default.asp (to allow for the title) and finish it in header.asp (removing the closing head and opening body tags from default.asp).
With reference to the HTTP 500 error, this is a server error, and I would expect it to be a result of the server failing to locate one or more of your included files. Make sure that there are files functions.asp, header.asp and header-jh.asp in the same directory as default.asp - I'd also remove the leading / from header.asp - in other languages references to files are made relative to the directory containing the file, for example ../header.asp if the header.asp file is contained in the parent directory of default.asp, and not using HTML relative paths to the root of the website domain.
I hope this helps.
I'm building a basic site and thought of using the flatpages app for a couple of pages. Problem is, I'm not sure how to serve static files in my flatpages.
The link in my flatpage template is this:
<link type="text/css" rel="stylesheet" href="static/base.css" />
However, firebug shows that file is being looked at:
localhost:8000/example_flatpage/static/base.css
instead of
localhost:8000/static/base.css
Infact, every link in the template works this way.
Instead of
localhost:8000/home/
localhost:8000/example_flatpage/home/
Here's my default flatpage template:
<html><head>
<title>title</title>
<link type="image/x-icon" rel="icon" href="static/favicon.ico" />
<link type="text/css" rel="stylesheet" href="static/base.css" />
</head>
<body>
mainly plain text
</body>
</html>
Any ideas??
Use "/static/base.css" instead of "static/base.css". The first one is a path relative to root '/', while the second form is a path relative to the current page.
What is syntax to add external CSS file to jsf?
Tried both ways.Didn't help.
1.
<head>
<style type="text/css">
#import url("/styles/decoration.css");
</style>
</head>
2.
<head>
<link rel="stylesheet" type="text/css" href="/styles/decoration.css" />
</head>
I guess that BalusC may have your answer.
However, I would like to add some additional points:
Suppose that you are running the in the sub directories of the web application.
As my experience, you may want to try this:
<link href="${facesContext.externalContext.requestContextPath}/css/style.css" rel="stylesheet" type="text/css"/>
The '${facesContext.externalContext.requestContextPath}/' link will help you to return immediately to the root of the context.
EDIT: Removed starting / from 'href="/${facesContext.ex...'. If the application is running in the root context, the CSS url starts with // and the browsers could not find the CSS since it is interpreted as http://css/style.css.
I have never used the first, but the second is syntactically valid and should technically work. If it doesn't work, then the relative URL in the href attribute is simply wrong.
In relative URL's, the leading slash / points to the domain root. So if the JSF page is for example requested by http://example.com/context/page.jsf, the CSS URL will absolutely point to http://example.com/styles/decoration.css. To know the valid relative URL, you need to know the absolute URL of both the JSF page and the CSS file and extract the one from the other.
Let guess that your CSS file is actually located at http://example.com/context/styles/decoration.css, then you need to remove the leading slash so that it is relative to the current context (the one of the page.jsp):
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
The updated JSF 2.0 method is a bit tidier. Instead of:
<link rel="stylesheet" type="text/css" href="#{request.contextPath}/css/compass.css"/>
you now do this:
<h:outputStylesheet library="css" name="compass.css"/>
and the stylesheet resource should be placed in resources\css. Where resources is at the same level as the WEB-INF.
I think the Sergionni problem is two-fold.
First, it is true that the so-called root relative is, like BalusC said, in fact domain relative, so, in the example is relative to http://example.com/ and not to http://example.com/context/.
So you must specify
<link rel="stylesheet" type="text/css" href="${request.contextPath}/styles/decoration.css" />
BTW BalusC, congratulations, this is the first time I see this correctly explained! I struggled quite a lot to discover this.
But, if you want to simplify and suggest:
<link rel="stylesheet" type="text/css" href="styles/decoration.css" />
assuming that the style dir is a sibbling of your current page, then you can have the second problem:
You are then into the relative URL method and, I you came at this page by a forward and not a redirect, your browser may be fooled and not able to follow the relative path.
To solve this second issue, you must add this:
<head>
<base href="http://${request.serverName}:${request.serverPort}${request.contextPath}${request.servletPath}" />
The base element must precede any link.
By the base command, you tell your browser where you are really.
Hope it helps.
And BTW another bizarre thing in this wondeful jsf world:
to link from a page to its facelet template, the root relative link IS, this time, including the context so:
<ui:composition template="/layouts/layout.xhtml">
this links really to http://example.com/context/layouts/layout.xhtml
and not to http://example.com/layouts/layout.xhtml like for <a> or <link>.
Jean-Marie Galliot
Try the code below to import the css in your jsf page.It will work for sure.
<style media="screen" type="text/css">
#import "#{facesContext.externalContext.request.contextPath}/css/Ebreez.css"
</style>