I'm working on an activity and came across with this problem. The css won't work in my jsp.
Here is the structure of my project:
I tried applying css on my index.jsp
Here:
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/wpstyles.css" rel="stylesheet" type="text/css"/>
<title>Welcome!</title>
</head>
<body>
Login Here
</body>
</html>
and in my wpstyles.css is just this:
body{
background: #6699ff;
color: #ff3366;
}
But for some reason it won't work.
I also tried using the solution provided here:
JSP doesn't see css
I also tried using the :
<link href="${pageContext.request.contextPath}/../css/wpstyles.css" rel="stylesheet" type="text/css"/>
or
<link href="${pageContext.request.contextPath}/css/wpstyles.css" rel="stylesheet" type="text/css"/>
but still doesn't work.
Please help. Thank you.
Here is the rendered index.jsp using the <link href="${pageContext.request.contextPath}/css/wpstyles.css" rel="stylesheet" type="text/css"/>:
and here is the rendered index.jsp using the <link href="../css/wpstyles.css" rel="stylesheet" type="text/css"/>:
Quick note: your code isn't valid HTML 4.01. See https://validator.w3.org/. The <link> tag does not get closed in HTML 4.01 (though it would in XHTML). Note, also, that this appears to be different between your first and second screenshots.
Check out the error at the bottom of your first screenshot: your CSS is being served up with an HTML MIME type. See Resource interpreted as Stylesheet but transferred with MIME type text/html error in console for someone else hitting this error. But this sounds like it might be your problem. (It's also possible that your 404 page is HTML - I'd make sure your getting an HTTP 200.)
Basically, to debug, I'd grab the URL in the <link> tag, and try navigating to it. If it starts with "/", then go to http://localhost:8080/[link]. If it doesn't, try http://localhost:8080/Spring_App/[link].
Related
Its my first introduction into using aspx pages from originally creating html pages.
I am trying to link an external CSS page to the index.aspx page and it is not pulling through anything.
Maybe im not referencing it correctly or it needs to be in a specific directory, Im not too sure.
See below
<%# Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<meta name="viewport" content="width=device-width" />
<title>TestTitle</title>
<link href="Styles/Main.css" type="text/css" rel="stylesheet" />
</head>
<body>
<p class="testp">HI MY NAME IS HARRY</p>
</body>
</html>
And this is the CSS code
body {
font-size: 36px;
}
.testp {
font-family:'Bradley Hand ITC';
}
Nothing hectic, im just testing the waters.
See directory below
If i could please get som help , or maybe a better way of doing it correctly.
Thanks
It has been working... But I don't know why it is not working anymore. I am using Django to set up a local server (?) and I use MySQL for something else. The .css file is into a folder where the .html file is located, and like I said before it has been working.
My code inside the head:
<!DOCTYPE html>
<html lang="en">
{% load static %}
<head>
<meta charset="utf-8" />
<title>JFP</title>
<link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-content/courses/ltp/css/bootstrap.css">
<link rel="stylesheet" href="main.css" >
</head>
<body>
<div class="header">
...
My .css is not worth mentioning, is it?
Solved
The problem was: indeed a wrong reference to my .css file. I was scrolling in my Terminal to some MySQL command from the moment there was not yet an 404 fault. It had to be:
/static/main.css
Thanks a lot
If the CSS file is in External server the code is
<html>
<head>
<style>
#import url(stile.css);
</style>
</head>
<body>[...]
</html>
Likely an error in the CSS file. Run it through a validation checker. Also ensure you are referencing the correct elements within that css file.
And as others has said, check the browser console for errors loading either resources.
I'm having an issue with linking html and Css and have no idea why. I'm doing everything like the book and tutorials says. However, I'm not getting to do the external configuration of css.
This is the code(just a test):
<!DOCTYPE html>
<html lang = "eng">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheets" type="text/css" href="/styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
and CSS:
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
Maybe I miss something, because when I do internal css (within my html code with ) it goes ok and the web browser is able to read that. It seems like the html is not linked with css, but it's even on the same folder so the path shouldn't be the problem.
I'm using Linux and Aptana Studio.
I've searched a lot the last 2 hours and cannot find where the mistake is.
I invite you to read this article Absolute and Relative Paths
Then we pass to your code:
<link rel="stylesheets" type="text/css" href="/styles.css">
Should be :
<link rel="stylesheet" type="text/css" href="styles.css">
Your styles.css should be in the same folder as your html file.
To verify that you have an error , check Console of your browser,you will be noticed that your file doesn't exist(404 error).
An other way to make your css working is to integrate it inside your page without separation:
Example:
<style type='text/css'>
body {
background-color:#CCCCCC;
}
h1 {
color:#0000EE;
}
</style>
If the other suggestions don't work, you can try re-saving the HTML and CSS sheets with "UTF-8" encoding and declare UTF-8 encoding in the HTML under the <head> with <meta charset="utf-8>"
The rel attribute should just have stylesheet in it, singular not plural as well
I had the same problem correct the correct directory structure solved my problem. This is a good visualiton on how to organize your directory structure.
http://rosebusch.net/jeff/miscellaneous/tree.html
That is, the index.html folder is on the same level as the CSS folder. If you want to put index.html in a HTML folder, to link to the CSS folder you would have to backout first by linking href="../css/stylesheet.css". The ".." will take you up a level.
Make sure style.css is in your root web directory since that is where you are calling it from
Don't put the / in front of styles.css and make sure they are in the same folder.
Try this instead:
<!DOCTYPE html>
<!-- Language was wrong? -->
<html lang = "en">
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<title>title</title>
<meta name="description" content="">
<meta name="keywords" content="">
<!-- Check the path to the file - I made it relative to where the HTML is -->
<!-- Correct the rel attribute's value too -->
<link rel="stylesheet" type="text/css" href="./styles.css">
</head>
<body>
<h1>test</h1>
</body>
</html>
If all the above not working:
1- Make sure you have no inline/internal CSS > Delete all style code from the Html page (it ll prevent external css link)
If your CSS file are in another folder then use
<link rel="stylesheet" type="text/css" href="folder-name/styles.css">
I found out while Using Visual Studio Code and adding quotes that it was quoting automatically. So when I put in quotes and looked in the index.html of the index it was quoting the quotes (Bad News). Try link
<href=FILENAME.css rel=stylesheet type=text/css />
Hope this works! Also, if you want Multiple CSS files, organize them in a folder, if you do so in FILENAME put /FOLDERNAME/FILENAME.css
BUT make SURE it is under the main folder where your Index is!
just try tasking off the / in front of the style.css
Place your link in the head tag or body tag, it is best to put it in the head tag.
I'm trying to teach myself html/css. I can't get Aptana to recognize my css stylesheet.
Here's what I have for my html file (index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Josh's Worthwhile Practice</title>
<meta name="author" content="Joshua Soileau" />
<link rel="stylesheet" href="style.css" type="text/css"/>
<!-- Date: 2012-07-11 -->
</head>
<body>
<div id="nav">
<ul>
<li><h4>Solutions</h4><p>what we do</p></li>
<li><h4>Work</h4><p>what we've done</p></li>
<li><h4>Team</h4><p>who we are</p></li>
<li id="nav_logo">LOGO</li>
<li><h4>Blog</h4><p>stuff we say</p></li>
<li><h4>Contact</h4><p>talk to us</p></li>
<li><h4>Client</h4><p>login</p></li>
</ul>
</div>
</body>
</html>
And here's my .css file (style.css, in the same directory as index.html)
* {
clear: both;
padding: 0;
margin: 0;
}
body {
background-color: #eee;
font-family: Arial, Helvetica, sans-serif;
}
#nav {
color: #121415;
width: 100%;
height: 30px;
}
I have the link tag in my html code:
<link rel="stylesheet" href="style.css" type="text/css"/>
But when I open index.html in a browser or the Aptana preview pane, it just shows the plain html with none of my css pulled in.
Am I missing something obvious?
I found my answer. I had left an empty css tag in the file and Aptana didn't like it. This is my fault, I left it out of this post because I didn't think it was relevant.
I had:
#nav li {}
Sorry for not given you guys all the info, you were all very helpful and I helped me learn some new things. Thanks!
Try removing the type="text/css" attribute. Most modern browsers will complain if a type is specified and doesn't exactly match the Content-Type header the file returns, and when loading files locally there is no Content-Type header.
Your style.css file must be in the same location as index.html for it to work.
What do you see in the address bar of the browser when previewing?
What happens if you replace index.html with style.css? Are you able to see the CSS file?
Does it work without Aptana's preview, if you open the index.html file directly?
Also open up firebug or developer tools and hit the network tab to check if the browser is making a request for the CSS file and what if any errors are being reported. Also check the response headers.
You may also want to verify what Aptana is doing to your source after it generates the preview. Does doing a view source in the preview browser show the exact same link / path to the stylesheet?
Do you have a similar issue as this user with absolute path's in Aptana's preview: Aptana Studio 3 preview problems with absolute path
I'm pretty sure aptana has autocomplete on files and other html/css tags so try
<link rel="stylesheet" href="
I believe that when you have typed this if should start to give you all the files within your folder hysterical set up. If it doesn't try a / or the likes?
try putting it in a folder for example CSS
<link href="CSS/aki.css" rel="stylesheet"
type="text/css" />
I'm completely new at HTML/CSS.
I'm currently using a Mac and I don't know how to link HTML/CSS files in Komodo. Oddly enough, I cannot find anything online that explains how. Is there any one who can explain in DETAIL how to go about doing so?
You link a CSS file with a <link> tag in the <head> of your HTML file:
<!DOCTYPE html>
<html>
<head>
<title>My Webpage</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
You can find more information from the HTML Dog: Applying CSS article.