I can't achieve working linking between my index.html and main.css/img.pgn files.
File tree: HTML file(not working): /home/user/Desktop/vswd/index.html
CSS file: /home/user/Desktop/vswd/en/css/main.css
IMG file: /home/user/Desktop/vswd/en/img/img.png
<link rel="stylesheet" type="text/css" href="../en/css/main.css"/> doesn't work
<img class="img" src="../en/img/img.png"> doesn't work
BUT
if I move the file one folder below linking work fine.
File tree: HTML file(not working): /home.user/Desktop/vswd/en/index.html
<link rel="stylesheet" type="text/css" href="../css/main.css"/> work fine
<img class="img" src="../img/img.png"> work fine
I tried everything but didn't find a solution.
Your index.html and en/ are in the vswd directory, so you don't need to go up a directory using ../. Instead, use ./:
<link rel="stylesheet" type="text/css" href="./en/css/main.css"/>
<img class="img" src="./en/img/img.png">
Related
i spent the last hour figuring out why my style sheet is working.
enter image description here
I tried every possible way, but none of it works.
It just shows error 404 when i check it in the developer mode of my browser.
I tried
<link href="style.css" type="text/css" rel="stylesheet" />
<link href="./style.css" type="text/css" rel="stylesheet" />
<link href="../style.css" type="text/css" rel="stylesheet" />
<link href=".../style.css" type="text/css" rel="stylesheet" />
I also placed the the css file in the same file as my header.php.
The path to the css file is a relative path from the file that's called from the browser, and that's most likely not header.php.
If you start the path with a / it's considered relative to the webroot, so you probably want /css/style.css. Note that you cannot go up (using ../) from the webroot.
../ is meant to go back a folder so if my folder layout is
Root
css
style.css
includes
header.php
I have ho down a folder and enter the css folder like:
<link rel="stylesheet" href="../css/style.css">
You are using many link tag to integrate the css file in you html file. You should use one tag and it would be a relative path like the following <link rel="stylesheet" href="/css/style.css">
I have this in my index.html
<img src="img/splash.png" class="center"/>
<link rel="stylesheet" type="text/css" href="styles/styles.css">
The styles and img folders are both in the 'web' folder.
The splash.png file is found, but for the css file I get this:
The stylesheet https://myapp-24b9f.web.app/forms/styles/styles.css was not loaded....
The url I'm loading is: https://myapp-24b9f.web.app/forms/somepage
Why is the image searched relatively to the 'web' folder, and the css file relatively to 'forms'?
I moved this to be the first line in the and it solved it:
<base href="/">
Here's my html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<div class="nav-container">
Hi
</div>
</body>
</html>
Here's my css code:
.nav-container {
height: 197px;
background: #24292d;
}
I've got a folder called 'main.css' which holds the 'style.css' file. The 'main.css folder is in the same directory as the html file but for some reason the css wont load onto the web page.
just make things simple.
have your folder set up like this
home/index.html
home/css/styles.css
then :
<link href="css/styles.css" rel="stylesheet" type="text/css" />
You wrote: "The 'main.css' folder is in the same directory as the html file". So the code to reference the CSS file from the html file should be:
<link rel="stylesheet" href="main.css/style.css">
But I wouldn't name a folder 'main.css' - this would typically be a name for a CSS file (including it's file extension .css), not a folder
If your HTML file is in the same directory as your /main.css/ folder, then change your file path to:
<link rel="stylesheet" href="./main.css/style.css" />
Good morning guys,
I am playing around building a small website. In the html I have my link to my CSS file but for some reason the CSS is not being shown on the page.
The link tag looks as follows:
<link rel="stylesheet" href="./styles/style.css" type="text/css">
The site does not contain any styles that I have built. Am I doing something wrong here?
Folder Structure 1
index.html
styles (folder)
style.css
If this the folder structure then your link tag should be
<link rel="stylesheet" href="styles/style.css" type="text/css" />
Folder Structure 2
index.html
style.css
If your folder structure is like the above then the link tag should be
<link rel="stylesheet" href="style.css" type="text/css" />
Folder Structure 3
HTML (folder)
index.html
styles (folder)
style.css
If your folder structure is like above then the link tag should be
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
This might help you. For any error check the browser console.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try to include the code to head as I show above for mystyle.css rewrite your own css file make sure to have the same name as your css file is check if a letter is capital .
I saw also you write text/css instead of test.css which is correct .
I have linked the w3.css stylesheet in my html (as suggested at w3schools) to utilize their responsive template but it doesn't appear to be working. I have linked it as such within the head tag of my html:
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
Am I missing something?
Make sure your CSS code is in your .css file, and your HTML and CSS files are in the same directory if you are using <link href="File.css" rel="stylesheet"> and not writing the directory.
Also, don't forget to put your link tags between opening and closing head tags.
It should look like the example I posted below.
If it's still not loading then it would to do with the location of your stylesheets(css).
Example - href="path/to/stylesheet"
The path would start from the current directory your HTML is in... so if you had index.html in the root directory and your css files a sub-directory then the example would look like this.
Example - href="css/w3.css"
Example - href="css/w3-theme-brown.css"
//HTML
<head>
<link rel="stylesheet" href="w3.css">
<link rel="stylesheet" href="w3-theme-brown.css">
</head>