I am trying to link a css i created in eclipse to the jsp and when i run the project i get no results in my browser. I've tried it in multiple ways, by putting
<link rel="stylesheet" href="css/first.css" type="text/css">
<link rel="stylesheet" href="boe/WebContent/first.css" type="text/css">
<link rel="stylesheet" href="(my full path to the file)" type="text/css">
I've tried so much that i don't remember how i got it to not error out. i am getting this
Tag (link) should be an empty-element tag.
as the caution error.
i can not find any step by steps on creating the css and making it link to the jsp, so it can show up in my browser.
here is my code for both the jsp and the css.
jsp:
<?xml version="1.0" encoding="UTF-8" ?>
<%# page import="java.util.*" language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="css/first.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TestPage - Test1</title>
</head>
<body>
<div id="page-container">Hello World</div>
<%Date d = new Date(session.getLastAccessedTime());%>
this page was last viewed <%= d.toString() %>
</body>
</html>
css:
#CHARSET "UTF-8";
html, body {
margin:0;
padding:0;
}
#page-container {
width: 760px;
margin: auto;
background: red;
}
any help on finding a step by step or if you have a good explanation, it would be much appreciated. Thank you
Tag (link) should be an empty-element tag.
This error message is telling you that your link tag needs a closing slash:
<link rel="stylesheet" href="css/first.css" type="text/css" /> <-- see the closing '/'
If that doesn't fix it, my guess is that your path is not quite right.
I changed in the
<head>
<link rel="stylesheet" href="css/first.css" type="text/css">
to
<head>
<style type="text/css">
<%#include file="css/first.css" %></style>
</head>
and in my eclipse project explorer under the "WebContent" file i added a folder named "CSS" and moved first.css to that folder.
Although from what i read, this is a very inefficient way of linking it because it imports the entire css.
In the above code replace 'css' with the full path of the css file
u can get the full path by right click on .css file -> properties->location
copy that and paste in above code in place of 'css'
Related
I'm out of solutions here. Have been trying to solve this for half a day now!!! My jsp can not read my CSS file. I've tried the very simplest file structure here. I put both jsp and CSS under "Web Pages".
So
MyProject
-Web Pages
-WEB-INF
-login.jsp
-logincss.css
-etc...
jsp code:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="logincss.css">
<title>JSP Page</title>
</head>
<body>
<p>why you CSS wont WORK!!!</p>
</body>
</html>
css code:
body
{
background-color: red;
}
So I write href="logincss.css" because both jsp and the css are on the same level. But still this does not work! I have the simplest html and simplest css but it does not work! I think the problem is on the Project itself. I just created a new web project, create jsp and css, try it out and it worked!
Please help me I don't know how to solve this problem. Thanks.
I've to source a css file on my html5 file but out of the millions of ways I've seen on the internet none seem to work.
(Btw my css file is in the same folder as the html file.)
To load a css ressource in an HTML5 document, use the link element inside the head element.
In the following example, the ressource style.css is located in the same folder than the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
</body>
</html>
My Grails project structure:
my-app/
grails-app/
<mostly typical grails-app structure>
views/
web/
index.gsp
app/
admin/
layouts/
main.gsp
<rest of project structure is like any other Grails app>
So you can see whereas, normally, the index page is located at grails-app/views/index.gsp, I have it at grails-app/views/web/index.gsp.
My application.properties:
app.grails.version=2.4.2
app.name=my-app
app.context=/
app.version=0.1
One section of my UrlMappings.groovy:
"/"(view:"/web/index")
My main.gsp layout:
<!DOCTYPE html>
<html lang="en">
<head>
<title><g:layoutTitle default="MyApp"/></title>
<g:resource dir="css" file="myapp.css" />
<g:layoutHead/>
</head>
<body>
<g:layoutBody/>
<g:resource dir="js" file="myapp.js" />
</body>
</html>
My index.gsp:
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
</body>
</html>
When the app starts up and I view it in a browser, it is obvious that myapp.css is not being found because the page styling is all wrong. When I view page source I see:
<!DOCTYPE html>
<html lang="en">
<head>
<title>MyApp</title>
/css/myapp.css
<meta name="layout" content="main"/>
</head>
<body>
<h1>Hello!</h1>
/js/myapp.js
</body>
</html>
So it sounds like Grails takes your app.context and uses that as the prefix for all resources. And because I haven't wired something correctly, Grails is just translating my <g:resource> tags into plaintext and printing them out in the HTML.
I guess my question is: What do I need to do so that Grails can find my CSS/JS resources?
I don't sure that tag into tag will be work correctly, so write like this:
<link rel="stylesheet" href="${resource(dir:'css', file:'myapp.css')}" charset="utf-8"/>
According to the Documentation, The resources tag generates a link (URI) string. Can be used in an href, JavaScript, Ajax call, etc.
Use the resources tag inside script or link tags to get your css/js loaded in your page like,
<link rel="stylesheet" href="<g:resource dir="css" file="myapp.css" />" charset="utf-8"/>
You can also use resources plugin, which I would recommend as it solves the purpose and has good documentation
I am starting out at writing my own website and following a few tutorials on HTML5 and CSS. I am using netbeans to create and edit my project.
Here is my index.html file
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="newcss" href="newcss.css" type="text/css">
</head>
<body>
<p>This is css</p>
</body>
</html>
Here is my css file, called newcss.css
p {
color: #FFF;
}
I have my css file in the root folder of the webpage, same as the index file. All I am trying to do is change the colour of the text so I can see my style sheet is working. I am sure it is something really simple but can't seem to see it at the moment.
Thanks in advance for any help,
Mash
From the validator (assuming you add an HTML 5 Doctype):
Error Line 7, Column 57: Bad value newcss for attribute rel on element
link: The string newcss is not a registered keyword.
<link rel="newcss" href="newcss.css" type="text/css">
To load a stylesheet you have to use the stylesheet relationship, not the newcss relationship (which doesn't exist).
Fix your rel attribute.
Try the below one
<link rel="stylesheet" href="newcss.css">
Change your rel="stylesheet"
Change link rel:
<link rel="newcss" href="newcss.css" type="text/css">
to:
<link rel="stylesheet" href="newcss.css" type="text/css">
I just converted a site to Blueprint CSS today, and suddenly all my hyperlinks are showing their URL's in brackets, e.g.
This hyperlink
Read more
Renders like this
Read More (Products/List.aspx)
I wonder if this might be related to one of the bundled plug-ins in Blueprint?
ADDED: The link renders normally, i.e. the unwanted url part is being generated client-side. Folks have asked for source code, so here it is (irrelevant text removed):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="Styles/Blueprint/screen.css" rel="stylesheet" type="text/css" />
<link href="Styles/Blueprint/print.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 8]><link rel="stylesheet" href="Styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
</head>
<body>
Read more
</body>
</html>
SOLVED: By removing the 'print.css' sheet that all tutorials suggest including, I was able to solve the problem in this example and my whole site. I'm still very curious as to why the venerable 'print.css' is acting up like this.
It's likely you have something like this in your CSS:
a:link:after { content:" (" attr(href) ") "; }
That will produce the behavior you describe.
Typically, you would only use this kind of style for the print version of your stylesheet.