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.
Related
I have a problem with the navigation bar,
I have a navigation bar for my project. As you can see my code below if I use the link and get it from an external source it is working well. But there is a problem for me when the net is a bit slow I can see the navigation's loading on my screen. it is a very small duration but it disturbs me very much. So I decided to use CSS source from my project folder but could not do that. I tried many code samples but could not do it correctly. If somebody helps me, I will appreciate it. Thanks.
I am also still trying to solve it but I wanted to get some help.
function MyNavBar(params) {
//console.log(params["conpanyID"]);
return (
<div>
<head>
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>
</head>
1-When I use link/external source
[1]: https://i.stack.imgur.com/SO5qB.png
2-When I use CSS file from my project folder.
[2]: https://i.stack.imgur.com/MqHqo.png
you might have linked your stylesheet inside the body instead of the header section , because of which your page will load first, then your CSS
here is an example
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>file</title>
<link rel="stylesheet" href="css/s.css">
<link rel="icon" href="css/si.ico">
</head>
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>
Here is my root HTML file. As you can see, it has no problem getting styles from Bootstrap (this functionality is working just fine). When I open up index.html in the browser at localhost:8080 (running a server through a webpack command), It cannot find the stylesheet! This is something I don't understand. Please help. Thank you.
BTW.. stylesheet.css is at the same directory level as index.html AND index.js. How come the bootstrap stylesheet is getting picked up but not my stylesheet?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="stylesheet.css" />
</head>
<body>
<div id="root">
</div>
</body>
</html>
Meteor automatically loads all style sheets. I've seen it recommended to put them in the /client/stylesheets, or /imports/ui/css folder.
You don't have need to put <link rel="stylesheet" href="stylesheet.css" /> . Try removing that line and see if you can see your styles applied to your page.
The reason <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> is working for you is because it is loading from an external address. It is hard-coded on your html and not being managed by meteor. I don't recommend it, but if you wanted to do the same thing with your style sheet, you would put it in the /public folder, and use <link rel="stylesheet" href="/stylesheet.css" />. But Meteor is designed to manage all the style sheets for you, so best not to do this.
Lastly, if you want to control the order style sheets are imported, you can specify import '/client/stylesheet.css'; // import CSS from absolute path - see here for clarity: https://guide.meteor.com/structure.html#intro-to-import-export
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 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'