i cant connect stylesheet to my html file, i cant inport image from my pc by realtive path. I have seen lot of questions here and i tried all the suggestions but i didnt found a solution, im 100% sure my syntax is right. Its wierd because i can inport images from url. It seems like my pc have some problem with relative paths, or it may be some wierd setting in my VS code. Can i get some advise to solve this, what should i try.
Here is some example...
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="templates/style.css">
</head>
<body>
</body>
</html>
i have tried all variations like href="style.css", href="./style.css"
Your code is valid, but you might be mistaken in the location of the files your linking to. That would result in an invalid url.
Have a look at a folder structure as below. You've got a project folder name project-example this folder contains the index.html and the folders templates and images.
If you want to link in your index.html to the files in those folders the src or href would have to be something like templates/style.css or images/image.png.
Related
First off, sorry to be asking this as I know it's a common question/problem brought up on here - but after researching and looking at the other threads and trying to apply those solutions I'm still at a loss. Hoping that by posting my code I can get the help I need. Thank you in advance.
As it says in the subject line I cannot get the .css file to link to the .html file. I'm a few days into learning via modules on LinkedIn and this code actually comes from one of those modules, making it more confusing that it's not working. Both the html and css file are in the same folder on my desktop, and I've quadruple checked that the .css file is the correct name. Here's the top part of the code with the problem area:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Mat Alano-Martin Test Page</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>
i tested it locally and it's worked but when i upload it to my web host, some of the css code is not fully loaded, only some of the code inside of it are loaded. what happen pls i need help. i already checked the path.
thank you :)
this is from the host
this is from the local file
<html lang="id">
<head>
<title>Weebs Desu! official discord website</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />```
You need to provide more data to give us some clue, but here is a thing.
Maybe because the version of your css is not updated in the hosting yet. You already change your css code but the result still same as before. The solution for this is you can add some v?=1.10 behind style.css.
So the result will be style.css?v=1.10, so the browser wont load the older version of css.
The number ?v=1.01 can be anynumber as long as greater than before (It works like patch).
If it's working locally but not on your web host, your style.css filename casing might not be matching what you have in your <link> tag.
For example <link rel="stylesheet" href="style.css" /> should mean that your filename casing should also be style.css. Not Style.css.
Also hard to debug without a live example provided btw!
I am trying to put an icon next to my page title. I have read quite a few articles and similar questions on the internet but i still can't see my little icon up there next to the page title. I literally don't know what is wrong with my code.
I have the following directories among other: data/public, data/files, public (which includes all my css files), views (which includes all my ejs files). Inside the /views folder i have a few folders and a few files that are responsible for my viewing experience while using the web app i am building. Now in the /views/includes directory i have a file named head.ejs which contains all my head code i will use in pretty much every other ejs file. so i just have the head.ejs file and i can include it in every ejs file i want. The head.ejs file looks like that:
<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link rel="shortcut icon" href="/data/public/boxTitle.jpg" type="image/jpg" /> -->
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= pageTitle %></title>
<link rel="stylesheet" href="/css/main.css">
I expected to see the icon up there but still haven't seen it. I have tried to move my favicon.ico image around in different directories and play a bit around with the paths. the best for me is for the image to be in the /data/public/ directory. while the head.ejs is in the /views/includes/ directory. The image is 16x16, black and white. Tried with a jpg image, too. I am probably failing really hard cause it's seems pretty easy and straight forward but... Any help is appreciated! I will delete the post if the answer is totally obvious and the post is worthless.
Assuming your icon is in your public folder inside an images folder.
If you have defined your public folder as you mentioned, with something like this:
app.use(express.static(path.join(__dirname, 'public')));
then you can easily display your icon this way:
<link rel="icon" href="/images/your-icon" type="image/x-icon" />
I am having an issue with getting my css file to link up to my html code when I put my css file in a different folder than the one my html file is in. I have tried to research how to enter the correct file path for my css file but it still doesnt seem to work. It does work though when the css file is in the same folder as my html file. Here is how I am have gotten the code to work correctly:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connor Rice</title>
<link rel="stylesheet" type="text/css" href="Together-1.css"/>
</head>
<body>
The code goes on for longer but I dont think it has anything to do with the stuff after. This is where my HTML File is:
/Users/connorrice/Desktop/CodingStuff/HTML Class Stuff/ConnorRice.html
My CSS file is here:
/Users/connorrice/Desktop/CodingStuff/HTML Class Stuff/Together-1.css
I'm trying to change the html code to this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Connor Rice</title>
<link rel="stylesheet" type="text/css" href="CSS-Files/Together-1.css"/>
</head>
<body>
Here's where I moved the file css file to (HTML one is in the same place)
/Users/connorrice/Desktop/CodingStuff/CSS-Files/Together-1.css
Think I typed the correct syntax in but its not working. I'm using mac 0s sierra version 10.12.6 on a macbook pro that came out in 2011 (I know my computer is really old). Any suggestions as to what I'm doing wrong? Also please forgive me if I typed this out horribly because this is the first question I've posted and I'm very new to coding.
To access the folder you placed your CSS in, your stylesheet href should be:
href="../CSS-Files/Together-1.css"
The way you wrote it, you are trying to look for the CSS-Files folder in your HTML Class Stuff folder. However, you must first exit the HTML folder.
That is what you use ../ for, at the start of your path.
My css file just isn't being updated on my local server but I know that its connected because it still has the background colors i assigned before but even if i change the background colors they stay the same! I have restarted everything and tried everything I don't know whats going on.
Heres my header links
<meta charset="utf-8">
<title>PHP Test Stuff</title>
<meta name="description" content="PHP test stuff">
<meta name="author" content="Cosmichero">
<link href="css/styles.css" rel="stylesheet">
</head>
Also my html and php updates fine its just this file its like its saved and I can't edit it. I feel like I'm just missing something stupid though.