Why isn't my HTML linking my CSS properly? using the Prologue template from html5up.com... In my main directory (I mean where index.html is) I created a subfolder for the different products I want to display. This folder contains a few files: 125st.html, 125stmain.css, and a folder called _notes created by Dreamweaver. Here is the code in the 125st.html that should be linking to the 125stmain.css:
<link rel="stylesheet" href="products/125st/125stmain.css" />
When I visit shercousa.com/products/125st/125st.html (It wont work for you, I've just tricked the hosts file to go to my local save instead of the live site while I work on it) it shows no CSS only the HTML. I just copied this line from the index.html file (which works) and changed the folder to try to direct it to the CSS clone I created. When this didn't work I tried copying and pasting the original line verbatim that works on the main site, but when linked in 125st.html still loads no CSS at all. I'm a bit new so sorry if I'm a bit hard to follow. I can elaborate or post any more code if anyone needs to see it.
Edit: Also my images are not loading, even the ones linked in the html file.
If i'm not wrong, this have an easy solution.
If you're on host/products/125st/125st.html and you linked CSS this way:
<link rel="stylesheet" href="products/125st/125stmain.css" />
What it's happening there is that your file 215st.html is trying to find: host/products/125st/125st.html/products7125st/125stmain.css
So you can either link your css with both this ways:
<link rel="stylesheet" href="/products/125st/125stmain.css" />
or
<link rel="stylesheet" href="125stmain.css" />
I hope this works for you :)
And sorry for my english!
Ga, I'm such a dope. There should be a slash in front of products like so:
<link rel="stylesheet" href="/products/125st/125stmain.css" />
Related
I'm pretty much new to all of this and for the past days I've been working on my first Website using bootstrap. Locally, this works fine, but right now, when trying to get it up online, it looks like this:
http://wearemanjaro.de
Just ugly html, no css nor any images are loading.
I made the link above link to the html which is in the /manjarowebsitebootrap/robots/index.html path. The CSS (bootstrap and custom) is in the following directory: /manjarowebsitebootstrap/css/...
The link to CSS in my html looks like the following:
<link rel="stylesheet" type="text/css" href="../css/custom.css">
<link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
Same problem with the images in my ../img folder. It all works fine locally. I'd really love some help or advice :)
First thing you need to do is use an absolute instead of a relative path.
if your directory structure is:
-root
--docs
---doc1.php
--includes
---header.php
---footer.php
---css.css
--index.php
In your header, you link to my CSS file like so:
<link href="includes/styling.css" type="text/css" rel="stylesheet" />
you need to do like this :
<link rel="stylesheet" type="text/css" href="/root/includes/css.css" />
You also need to use developer tools on chrome that will help you to debug these things.
I saw there that the images are not uploaded so once you able to upload them you will start getting them on the Website if the path is correct.
and best of luck for the new world of web development.:)
Your file structure has changed from local to online/live. I inspected your page, placed in the CDN for Bootstrap and pow, the styling came alive.
Use the following CDN to replace your current src='' path for bootstarp in your html head to see what I mean.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
The next steps you should take: make note of where all your files are living on your server, you must place all associated files on the server, as specified by your code, i.e shows that you have a CSS folder.
Also is this HTML file located at the same level as the CSS folder or does this HTML file live in a folder of its own. If not your paths do not need to include the ../ portion and you should use just css/yourFileName.css
Firstly, I could not find any answers what would solve this (hope simple) issue. So I've just moved the whole website, all its pages and stylesheets to a new directory through my host and now it just cannot load any style for itself. I guess it's about a little problem but already working to find that piece but couldn't get at all.
So to simplify it, in cPanel's File Manager I catched all files and moved to an addon domain like below:
/www/public_html <--- This was the main directory but I moved it to
/www/public_html/addondomainname's directory
The above location is now the current for all pages like index, account, dashboard etc. and all of them are .php files.
Also, I call css sheets to individual pages like
<link rel="stylesheet" href="css/styles.css">
Note that too, there is no full-named links on single pages, I use all my links as they are in-page like so:
Help
Would be just
Help // Or without the DOT and SLASH
And finally I use BS 3 and Font Awesome as sources of my website. I could say it relies on Bootstrap mainly and yes, I included all necessity of script and js implementation within the .
Full code of BS and FA in index.php:
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
I tried linking the css like
<link rel="stylesheet" href="mysite.com/css/styles.css/>
But both, with or without the mysite.com href did not work. And yes, the addon domain's directory structured like the root (after public_html/addon) contains index.php, dashboard.php, otherpage.php etc. and folder called css holds all sheets what I would like to use.
Any suggestions would be appreciated guys!
Can you try loading the CSS in the following methods:
<link rel="stylesheet" href="http://www.example.com/css/styles.css" />
Or try:
<link rel="stylesheet" href="/css/styles.css" />
When loading from your addon domain e.g. http://www.example.com
I'm so sorry to everybody who wasted his/her time trying to help me. The issue occured by my stupidity and everything was just fine. What I did is like I ensured that preventing hotlinking my files e.g. jpg, gif and such as CSS does really work. I've just removed the extension of css to be prevented from hotlinking and it works like a charm. Really, sometimes people do not know what are they doing and again I'm sorry who answered my question!
PS: We should log ourselves what are we doing while remaking any of the projects, stuff or materials.. :)
Best wishes,
Christian
I downloaded some css template from the web, copied the folders containing the css files and pasted them in my project, i used their html code as well in order to test the page on the server. It just doesnt work and i went through all the steps on the internet to link css to html.
The css folder is inside WEB-INF, the jsp pages are inside web content, i can't yet post an image on the site so i'll hope you can picture the structure.
<link rel="stylesheet" href="/WEB-INF/css/animate.css" type = "text/css"/>
this is the link syntax i'm using copied from stackoverflow.com and even if i include the project name in the path, it still doesn't work.
Is the folder structures wrong ? or something with the link syntax ?
any help appreciated
change
href="/WEB-INF/css/animate.css"
to
href="/css/animate.css"
You don't need to write that... css, pages and images are usually put into the webcontent folder (as per practice).
I Think you have just to be simple and link your css like this:
This work in HTML, PHP
<link rel="stylesheet" type="text/css" href="css/animate.css" />
This is for ASP.NET
<link rel="stylesheet" type="text/css" runat="server" href="css/animate.css" />
I Hope it help!
I am attempting to use Bootstrap; I am downloading example pages to build off of from the Bootstrap website. When I launch them, however, they look quite crummy in my Chrome browser.
For example, when I load the narrow-jumbotron page, the jumbotron spans the entire screen... What am I doing wrong? I have the css, js, and font folders inside the folder that I've saved the narrow-jumbotron.html page in.
Any help would be much appreciated.
Please check the source url or path of the css and other files. Possibly this is creating problem.
Firstly ensure that you have downloaded bootstrap.min.css and jumbotron-narrow.css.
Place them in the folder you are having the html file.
After that find the following 2 statements in your html file.
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/jumbotron-narrow/jumbotron-narrow.css" rel="stylesheet">
Replace them with these lines:
<link href="bootstrap.min.css" rel="stylesheet">
<link href="jumbotron-narrow.css" rel="stylesheet">
It looks like it's probably is a path issue. When you download the original bootstrap framework, you'll have a /css and a /js directory. How your new html files get access to those places depends on where you put those directories. I'm going to assume you have some bootstrap test area. Let's just call this your main bootstrap area or core file area, whatever.
After you set that up, you probably went back for the other download which has the /examples directory buried within it. The files in there are set up to deal with being a few directory levels down. When you went into the /examples directory folder, did you copy over the whole /examples branch? Or just one set of the example files?
Let's try this just as one example just to try to get things working. Then once you get it working if you want to mess with directory / folder organization and file paths, that's fine.
Go find the examples/theme directory, wherever you put it. In this /theme directory rename index.html to theme.html
Take the theme.html and theme.css out of your /examples/theme directory and put them in the root directory of wherever you have your bootstrap's root index.html file. Now your file paths to CSS files and such should be set to match what the index.html file is doing.
Go into the theme.html file and look for the lines with the ../../dist/css/ as suggested earlier.
But make them look like this... "css/bootstrap-theme.min.css"
This should now have these files getting called from the correct places. This alone should work for you.
There's still one issue though. You'll see in the theme.html file a link to "../../assets/js/ie-emulation-modes-warning.js"
You could just ignore this, but to really have things all in order, you need to get that path right. So, go find your original download of the examples and get the whole /assets folder and sub-folders copied into wherever you have your bootstrap root; that is /assets should be at the same level as /css and /js.
Once again then, fix the link to look like this "assets/js/ie-emulation-modes-warning.js"
This will hopefully get you going and give you a clear and obvious sense of how the file paths work. If you like going forward, put things into better directory / folder structures and re-do the paths. Remember if you wanted to on a real web server, (local or remote), you can always use virtual paths from the root so you don't have to keep track of the levels everyplace for such files.
In any case, I did just test this and ideally it will work for you as well.
Just place bootstrap.min.css and bootstrap.min.js in the same folder as carousel folder for example.
Then fix the path of the js file to this:
<script src="bootstrap.min.js"></script>
And fix the path of the css file to this:
<link href="bootstrap.min.css" rel="stylesheet">
Try to delete "integrity" part
Instead of this:
<link href="css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
Make:
<link href="css/bootstrap.min.css" rel="stylesheet">
As integrity attribute checks whether code was changed.
That might help.
As of 2022 and the BootStrap version v5.2 the way to fix it is to copy paste the bootstrap.min.css file you get when you download the ready-to-use compiled code to the example folder you want it in and then change these lines from
<link href="../assets/dist/css/bootstrap.min.css" rel="stylesheet">
TO
<link href="bootstrap.min.css" rel="stylesheet">
This must do the trick
I've been working on a project with a HTML and an external CSS file. The link worked fine at school when i was doing it on adobe dreamweaver on a mac, but i sent both files home via dropbox, and the css doesnt seem to link with the html file. I believe i've got the file paths and everything right, but just to make sure:
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
i also tried removing the "Desktop/" bit from the file directory, but it still didnt work. My Index file and Css file are both on my desktop. I am using windows. The same code worked at school, so i believe it might be something to do with with file location.
please help
Thanks in advance
This is how linking works,
Let's say your html file is in a folder named "xyz". Now when linking to css, the address is related to your html file's location. So if you mentioned
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
it would assume the css file is in the same folder as your html, while if you linked it as
<link rel="stylesheet" type="text/css" href="Desktop/Stylesheet.css" />
it would assume there is a folder named Desktop inside the folder xyz, and your css file is probably stored in Desktop.
Now im assuming you've simply placed both your html and css on your desktop directly, this is not good practice as you're probably going to move these files back to school as well. Hence I'd recommend you to place both in a folder and then link to your css with
<link rel="stylesheet" type="text/css" href="Stylesheet.css" />
and dont forget to pay attention to capitalization, yes html is non case sensitive but when it comes to linking external files, capitalization does matter.
Your directory structure should look as follows:
Root Directory
|
|-page.html
|-Desktop
|-StyleSheet.css
If it does not you need to modify your directory structure or change the href attribute on the link tag
If it is in the same directory simply set the path to href="Stylesheet.css"
The problem is with your file location .
If you are using Dreamweaver or any other code editor, simply browse to the path of the file to insert it in link href attribute, rather than manually entering the path .