I am reading css file from aspx
Login.aspx
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
and directory structure is,
MyProject
- folder1
- folder2
- stylesheets
- layout.css
- LoginWebForm.css
- Login.aspx
So, here Login.aspx and folder stylepsheets are on same level, it means i can by specifying path as, "stylesheets/layout.css"
but. this does't work. If I run same application on **Windows 2012 server then it works**. but when I run it on Windows 7 then it it doesn't work.
Can you please let me know whether this is OS related problem OR some settings required/ configuration required to be run the application on Windows 7.
Thanks You
Your html structure is not good:
<HTML>
<HEAD>
<title>LoginWebForm</title>
<meta name="vs_showGrid" content="True">
<link href="stylesheets/layout.css" rel="Stylesheet" type="text/css">
<link href="stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
</HTML>
</HEAD>
This would be a "normal" html structure:
<HTML>
<HEAD>
(head content)
</HEAD>
<BODY>
(body content)
</BODY>
</HTML>
Try to fix the html structure and maybe works after that ;-)
Another thing you could try is start your CSS paths with "/", for example:
<link href="/stylesheets/LoginWebFrom.css" rel="Stylesheet" type="text/css" />
And... Why one of your "link href..." lines ends with "/>" and the other one ends with ">" ??
I think both are correct ways (not sure now), but... Why you do it in a different way in any case??
good luck
Related
I have written my html and css code, but both the files are not linking. I am unable to find any error in the codes.
This is my html file
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>basicapp</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="static/css/basicapp.css"/>
</head>
<body>
<ul>
</ul>
</body>
</html>
The file structure is:
/desktop/templates/index.html
/desktop/static/css/basicapp.css
The answer has been provided to you, but here is some more information:
/ is an absolute path, e.g. /index.html will be at the root of your server, or on your PC most likely C://
or ./ the folder in which the current file resides, this is actually what is happening in your case. static/css/basicapp.css will take you to /desktop/templates/static/css/basicapp.css
../ is the parent relative to the current folder (hence the answers supplied).
Example
Let's say you have the following structure:
/folderA/folderB/index.html
/folderA/folderB/fileA.html
/folderA/folderC/fileB.html
Say you're in the index.html :
To get to file A: ./fileA.html or fileA.html
To get to file B: ../folderC/fileB.html
I left out the absolute paths since they tend not to be recommended since you might not know the true root of your website.
Your code
<link rel="stylesheet" type="text/css" href="../static/css/basicapp.css"/>
By Rashed Rahat
Read more
Edit: Applied Heretic Monkey's comment.
As Poney says in their comment: The path of your css file is related to the path of your html file. Try with href="../static/css/basicapp.css"
As you mentioned:
- desktop
- templates
- index.html
- static
- css
- basicapp.css
As your CSS is on another folder so you have to link any following way:
Try relative path:
<link rel="stylesheet" type="text/css" href="../static/css/basicapp.css"/>
Or,
Try absolute path:
<link rel="stylesheet" type="text/css" href="/desktop/static/css/basicapp.css"/>
For some odd reason I am not able to see the background change to black in testIndex.html. What I have is shown below:
body {
background: #000000;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<h3>Test test</h3>
</body>
</html>
I am using atom and these is no errors found in the styles.css... is there something I am doing wrong? I've read upon linking the CSS to HTML and by the looks of it I am doing it correctly. Just unable to see the changes made and both files have been saved too. I do have the styles.css in a different folder from the testIndex.html file.
Try this ../ is missing in you code.
<link rel="stylesheet" href="../css/styles.css">
You have missing relative file.
<link rel="stylesheet" href="../css/styles.css">
Here is all you need to know about relative file paths:
Starting with "/" returns to the root directory and starts there
Starting with "../" moves one directory backwards and starts there
Starting with "../../" moves two directories backwards and starts
there (and so on...)
To move forward, just start with the first subdirectory and keep
moving forward
You need one more detail in your link tag <>:
link type = "text/css" rel="stylesheet" href="../css/styles.css"
add this to your html file:
<link rel="stylesheet" type="text/css" href="../css/styles.css">
TRY THIS
move the css folder to the pizza web folder and try
I have created an intranet website(i am new to website creation) and the HTML view was perfect without any errors in all browsers. i have made it has local host with IIS on the same system i am working with.
But when i tried to load it on any browser it loaded the page with just the content on it without any style that i made in the css definition it shows an error "MainMenu.css 404 (Object Not Found)"
Q1. Should i also define my css location in the IIS.
Q2. should i have to declare any line on the html
below is my code:
<!doctype html>
<html>
<head>
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
<meta charset="ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="content-Type" content="text/html, charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DOCUMENTATION</title>
</head>
<body>...</body></html>
Your call to the CSS:
<link href="../css/MainMenu.css" rel="stylesheet" type="text/css">
Is saying look in the directory above this one, look for a directory called 'css' and find 'MainMenu.css'.
This infers a directory structure like this:
/top/
/wwwroot/
... index.html etc ...
/css/
MainMenu.css
It's more likely that the directory structure looks like this:
/wwwroot/
index.html etc.
/css/
MainMenu.css
With the css directory within the site root (wwwroot in my example).
Therefore, your link should look like this:
<link href="css/MainMenu.css" rel="stylesheet" type="text/css">
For a relative path, or this:
<link href="/css/MainMenu.css" rel="stylesheet" type="text/css">
For an absolute path (better)
Hope this helps ?
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've got the following folder hierarchy in my web application.
I'm using the following relative path to access my CSS files but the layout doesn't detect the CSS. There are two layouts but I'm calling the CSS from the layout file which resides inside the views folder.
This is the path I used to access the CSS file.
<link rel="stylesheet" type="text/css" href="../style/style.css">
I used this path too but no luck.
<link rel="stylesheet" type="text/css" href="../../style/style.css">
Please help!
Check whether you are not using multiple CSS files. And if you are using Chrome/FF you can check whether your CSS is called or not with tools like firebug.
You can see the full path with these tools.
if your layout file loading in another file try that files path or simply use path like this
<head>
<link href="/style/style.css" rel="stylesheet" type="text/css" />
</head>
your real layout can be work like this too
<head>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
You can use this:
<link type="text/css" href="style/style.css" rel="stylesheet" />
The second Path should be correct.
I also tried it in Visual Studio 2010 with the same folders as you and VS gives me the same Path (Second one) as you said.
Another Question, do you put the link into the header of the HTML page ?
<head>
<link href="../../style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
</body>