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?
Related
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" />
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 .
Please help, i really cannot see what i am doing wrong. I have tried all permutations and still cannot link so have started to write css code in html. Not what i want to do. Been looking at it too long and hoping someone can see my error. Thnks
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/style.css" type="text/css" rel="stylesheet">
</head>
My file tree is my directory folder name of the project then a sub folder css, then the style.css
Assuming your index file is in the root directly below the css file, you need to write "./css/style.css" - you're definitely not pointing to the right location.
<link href="./css/style.css" type="text/css" rel="stylesheet">
Try This:
<link href="../css/style.css" type="text/css" rel="stylesheet">
OR
<link href="/ProjectName/css/style.css" type="text/css" rel="stylesheet">
If you want to link to your stylesheet and it is not working, navigate to your stylesheet (it should look like http://www.example.com/css/style.css) and then copy the URL to your <link rel="stylesheet"> tag so it looks like this:
<link rel="stylesheet" type="text/css" href="http://www.example.com/css/style.css">
instead of this:
<link href="css/style.css" type="text/css" rel="stylesheet">
Hope this helps!
After building my web site for a while now, I wanted to see if I could upload it to my domain and see if it was functional from the web.
Now I have this error coming from my css files :
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://www.benny-water.com/Mainscss2.css"
I have been googling for 3 hours straight and haven't found a solution. If I understand it is my server (OVH) that is wrongly interpreting the css files as html or text files but I have no idea where to change this.
my code for the css files looks like this :
<head>
<title> Benny Water </title>
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Oxygen"/>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Muli"/>
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio.css" />
<link rel="stylesheet" type="text/css" ng-href="js/Jportfolio/css/jportilio_style_default.css" />
<script type="text/javascript" src="js/Jportfolio/js/jquery-1.11.2.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/bootstrap.min.js"/>
<script type="text/javascript" src="js/Jportfolio/js/jportilio.js"/>
<script src="http://code.jquery.com/jquery-latest.min.js"/>
</head>
thank you for your help :)
Looking at your paths there seems to be a mismatch between where your CSS files are located.
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
The /style/Css3.css has a / in front of your path, but the style/Grid.css doesn't.
Your Mainscss2.css link is also closed incorrectly. I would removed </link> and close the tag with /> instead for consistency in your code.
The .css file must go inside the <head> tag, while the .js in the <body> tag. It is a rule but it obviously work anyway also when they all are inside <head> too.
About the path of your .css, are you sure it is correct?
<link rel="stylesheet" type="text/css" href="Mainscss2.css"> </link>
<link rel="stylesheet" type="text/css" href="/style/Css3.css" />
<link rel="stylesheet" type="text/css" href="style/Grid.css" />
there are 3 different paths for 3 .css
Use this scheme:
/var/www/mywebsite/index.php
/var/www/mywebsite/images/favicon.ico
/var/www/mywebsite/style/css/mytheme.css
/var/www/mywebsite/style/css/images/imagesUsedBymytheme.png
/var/www/mywebsite/style/js/myscript.js
of course modify it accordingly, if you are index.php, you would want to link your .css using this code:
<link rel="stylesheet" href="style/css/mytheme.css" type="text/css" >
EDIT:
<link> is a single tag, you can use it as <link rel="" href"" >
I typed the below code in the section of the HTML. However, the CSS code and the bootstrap is not being recognised by the HTML.
<link href="C:\Users\Robert\Desktop\Websites\public_html\Main.css" rel="stylesheet">
<link rel="stylesheet" href="C:\Users\Robert\Desktop\bootstrap-3.3.4-dist\css\bootstrap.css">
<link rel="stylesheet" href="Main.css">
What am I doing wrong pls?
You can find this answer very easy by using google.
I would do the following. Create on your desktop a directory website. In this directory create a directory called "css", "js", "img". Create in the directory "website" index.html and enter this in the document:
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
</head>
Try making a container in your html file like:
<div class="container">
some text...
</div>
Use inspect element in firefox and you can see if your browser reads your css file.