to submit an assignment, I must put my css and html file in a separate folder "assignment", when I did that the CSS and bootstrap is not showing up in my webpage. I know i need to update the css link, so that's what I did below, but it didn't work so how do I correctly do that? directory
from:
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
to:
<link href="assignment/styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html (which you want to put the codes) is out of the assignment folder and the css files are in the assignment, use
<link href="./assignment/styles.css" type="text/css" rel="stylesheet">
<link href="./assignment/bootstrap.min.css" type="text/css" rel="stylesheet">
or if all of them are in the same assignment folder, you don't need to change the path.
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css haven't separate folder, then bellow code apply
<link href="styles.css" type="text/css" rel="stylesheet">
<link href="bootstrap.min.css" type="text/css" rel="stylesheet">
If your index.html , style.css and bootstrap.min.css File in assignment folder and for both css have separate folder which name is css, then bellow code apply
<link href="css/styles.css" type="text/css" rel="stylesheet">
<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet">
Related
<link rel="stylesheet" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" >
<link rel="stylesheet" type="text/css" href="index.css" media="screen" >
tried all of them but it's not working
try using a different name for the stylesheet rather than 'index.css' go for 'style.css' as everybody does.
Make Sure the CSS File is located in the same directory as the index.html and change the reference link to
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
or
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
Check the path to your file you can try,
<link href="./style.css" rel="stylesheet" type="text/css" media="all" />
This should work if your file is in the same directory.
The path mentioned in the above example does not have a full URL or relative path that begins with "/".
This makes the browser think that the css file is at the same level as that of the html file. Therefore, it may fail to fetch the file correctly.
Updating the path of the css file to either a full URL or to a relative path will solve the problem.
Example:
Suppose that the website is organized into the following folder structure:
/index.html
/css/index.css
/css/main.css
/js/header.js
/js/footer.js
...
/images/hero.jpg
/images/logo.png
...
The call to the css file will work if the link is defined like this, in index.html:
<link rel="stylesheet" href="/css/index.css" >
This is my structure
I'm trying to load the main.css file from the header.ejs file, can't find it.
This code is in my header file:
<!DOCTYPE html> <html>
<head>
<title>Hello and wellcome to my album</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
</head>
<body>
Try to go 2 directories back, not 1.
Like this:
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
Link should be like below cause you have 2 sub folder back then you will get public folder and stylesheets
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
Try
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
.. selects the parent directory from the current.
(..) 2 times because first, you need to go 2 directories back and then go to public and then stylesheet and then main.css
in app.js i added:
app.use(express.static("public"));
in the header.ejs i changed:
<link type="text/css" rel="stylesheet" href="stylesheets/main.css">
i am using NodeJS
The problem is that your stylesheet path is set wrong.
<!DOCTYPE html> <html>
<head>
<title>Hello and wellcome to my album</title>
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="../../public/stylesheets/main.css">
</head>
<body>
You are pointing just a folder up from partials to views. You need anothe folder up to your site root dir just like I pointed. Generally you could just use /public/stylesheets/main.css which is directly pointing to project root folder
This is a nodejs app, path should be like following.
<link rel="stylesheet" type="text/css" href="/stylesheets/main.css" />
If your path static:
<link rel="stylesheet" type="text/css" href="stylesheets/main.css" />
I initially was loading a page
somePage
And the index.html would render with styling
<head>
..
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="app/themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="app/themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
The above code works fine in production. However someone made some changes and deleted the app folder and refactored the code to this:
somePage
And the index.html to
<head>
..
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/base_theme/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="themes/defaults/generated.css">
<link rel="stylesheet" type="text/css" href="themes/basic_themes/blabla/generated.css">
<link rel="stylesheet" type="text/css" href="themes/brands/blabla/generated.css">
<script src="/js/libs/jquery.min.js"></script>
</head>
Now index.html cannot find the css styling. I tried different relative and absolute paths but nothing seems to work.
Any help?
EDIT: My folder structure is:
When I load my page localy http://localhost:56071/blabla/en/ and then click to navigate to "somePage" I end up on http://localhost:56071/tos/blabla/en/ a page with text and no styling. However, if I try to navigate to http://localhost:56071/themes/basic_themes/blabla/base_theme/bootstrap.min.css it returns a 404. BUT I can access my .css file through this link http://localhost:56071/blabla/en/themes/basic_themes/blabla/base_theme/bootstrap.min.css Can someone explain whats happening here?
My index.html file is in the public_html directory. All css files/ image files are in a css directory, and images directory respectively.
I have been over and over my code but the index is not linking with anything in hosting.
`
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/flexslider.css">
<link rel="stylesheet" href="css/jquery.fancybox.css">
<link rel="stylesheet" href="main.css"> // ***
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/font-icon.css">`
*** I moved the main.css file directly into public_html to see if it would work and it does. I can only assume that I have made a mistake in my path.
BTW I have added a / to the css path in href. I don't want to move everything into the public_html folder, which I am taking to be the root
Many thanks
This might be redundant but one possible workaround is to use ./ everywhere. Eg.
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/flexslider.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
<link rel="stylesheet" href="./main.css"> // ***
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/animate.min.css">
<link rel="stylesheet" href="./css/font-icon.css">
It should work.
Assuming the css folder and main.css are the siblings of the HTML file in which this code is inserted .
I have a index.html file which has this file structure: fl/contact/thanks/index.html
My CSS folder has this file structure: fl/css/style.css
How can i target the style.css file so it affects the index.html file with the current file structure?
This is what it's currently set to:
<link rel="stylesheet" type="text/css" href="css/style.css">
If you are on a server, you could do this:
<link rel="stylesheet" type="text/css" href="/css/style.css">
This assumes that 'fl' is the root.
<link rel="stylesheet" type="text/css" href="../../css/style.css">
each ".." for the upper layer of the path.
<link rel="stylesheet" type="text/css" href="../../../css/style.css" />
That should be your new path for index.html.
You should be able to reference it like this:
<link rel="stylesheet" type="text/css" href="../../css/style.css">
You would be able to do it like this:
Updated answer
<link rel="stylesheet" type="text/css" href="../../css/style.css" />