when i write localhost/profil the css works.
But when i write localhost/profil/ the css doesn't work.
app.use(express.static(__dirname+'/public'));
app.get('/profil',[checkCo],require('./routes/profil.js'));
Why?
thanks!
edit:
it's because it thinks that profil/ is a folder, so how can i get around this?
You likely need to use absolute paths within your HTML.
For example, instead of
<link rel="stylesheet" href="style.css">
you need to do
<link rel="stylesheet" href="/style.css">
In the first example, the browser tries to access style.css in the current directory the user is navigated to. So if the user is navigated to /profil/, it tries to load the css from /profil/style.css. In the second example, the browser is told to load the css from /style.css no matter what.
Related
I'm trying to import multiple css files into my html using #import but for some reason it doesn't work.
A tree of my project looks something like this:
root
--assets
----css
------body.css
------main.css
--index.html
My main.css looks like this: #import "body.css";
I put this line in the header in the index <link rel="stylesheet" type="text/css" href="css/main.css">
And for some reason the styles in my body.css aren't showing up.
I did recently get a new laptop, is there any configuration/download I need to do that I just forgot needs to be done?
I guess the solution to this would be to use <link rel="stylesheet" type="text/css" href="assets/css/main.css">
Also on how to find such issues the next time: Press F12 in your browser, navigate to the network tab and reload your site. If you see a red entry there it means it couldn't be loaded (or there were other errors with it)
If it's a 404 error (like Failed to load resource: net::ERR_FILE_NOT_FOUND )this is your hint that it literally can't find the file. in 99.9999% it's a wrong url. You can even copy-paste the URL and open it on it's own.
So i have like triple checked the code cant see the error. I even tried inspecting the page and it doesn't find the files. If you visit zoeaa.com you will see just html no styling. What am I doing wrong?
<head>
<meta name="descri
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/web/assets/mobirise-
icons/mobirise-icons.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/tether/tether.min.css">
<link rel="stylesheet"
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
grid.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/bootstrap/css/bootstrap-
reboot.min.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/dropdown/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/theme/css/style.css">
<link rel="stylesheet"
href="/application/widgets/homepagesystem/assets/mobirise/css/mbr-
additional.css" type="text/css">
</head>
The path has to start from where this html page is, so for instance if this let's call it index.html is inside let's say "mainFolder", in order to work the "application" folder also has to be inside "mainFolder".
If it's not check via ftp the whole path from the css file to where the "index.html" is and that is the correct path (no need of the full url with the domain as mentioned above, that's not the issue).
You need to use absolute paths when referencing files.
Include the site name e.g. https://www.example.org/app/css/styles.css.
This is because if you go to a sub directory and you have your src setup like /app/css/styles.css the server will try to find your file on https://www.example.org/my-sub-dir/app/css/styles.css
Also a side note. bring all your files in together as your just causing more requests. HTTP works faster with larger files and less files to download.
Is it typo mistake or something? But I cant see closing tag > in meta. + When I opend the site you provided and checked the developer consoler , I found error.
It looks like your meta name might not be getting closed (missing the ">). That could definitely be interfering with things working properly. If you're sure the paths are correct that's the only thing I could see that might be an issue.
Hope that does it!
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
I am relatively new to CSS and HTML, but I just had a tutorial on connecting HTML documents to CSS sheets. It didn't work, and I have searched everywhere for the answer. All the sites had feasible answers, but none worked for mine.
Here is my code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css"/>
<title>FlyHighGames|Home</title>
<meta charset="utf-8" /> <!--Bro what does this even mean?-->
</head>
<body>
<div>
<p>Hello</p>
</div>
</body>
</html>
Please help!
use folder name if you saving css in any folder
<link rel="stylesheet" href="foldername/stylesheet.css"/>
As others have said, you need to use the link element:
<link rel="stylesheet" href="pathToCSSFile">
FYI the: type="text/css" part is no longer needed in HTML5
But, to correctly indicate the path to the .css file, follow these
rules:
If the resource you need is part of the same web site (not talking about folder structure here, talking about domain), you should use relative paths, where:
a. fileName.ext is all you need if the resource is in the same folder as the currently loaded document.
b. folderName/fileName.ext is what you need if the file you need is in a sub-folder of the current folder that the loaded document is in.
c. ../fileName.ext is what to use if the file you need is one directory higher than the current document's folder. The ../ can be repeated if you need to go up more than one level (i.e. ../../fileName.ext).
d. /fileNameext or /folderName/fileName.ext indicates that the file or folder specified should be found starting from the root of the web site, regardless of where the current document is.
If the resource you need is located on another domain, you'd use an Absolute Path (http://something.something/file.ext).
a. DO NOT use absolute paths for local resources! This may work but causes the domain name to have to be resolved again, resulting in a longer load time.
WARNING: Different servers have different configurations and requirements that may affect whether these reference rules work or not. For example, GoDaddy web hosting provides an "httpDocs" folder at the root of a web site. You don't have to use it, but that's where their servers expect the site's content to be placed. Not following those rules result in relative paths not working.
NOTES:
If you feel that you've referenced the CSS file correctly, you may have a syntax error in that file which is preventing the CSS from being processed. You can run your CSS through a validator (https://jigsaw.w3.org/css-validator/) to see if it's valid.
You can also hit the F12 key with your web page open and click on the Network tab and refresh the page. This will show you all the network requests made by the current page. If you see the CSS file listed and then see a 404 message next to it, you know the file wasn't found.
The link tag is used to link to external style sheets. check your css file path try this code work fine
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
you need to attech style sheet beetween head tag.
As other said, use the link tag, but I sometimes get an error, if I add a slash at the end as required in XHTML as it automatically closes the tag and doesn't allow it to access other parts of the page.
Create a css stylesheet.css file and save in folder where HTML file exits
Provide complete path of your stylesheet file
example
<link href="Content/css/stylesheet.css" rel="stylesheet" />
Currently i am doing a website admin redesign where i need to include some css and js files into the header, but i am confused how to do this,
admin path is
www.xxx.com/admin/
what i want to include is in the top level
www.xxx.com/css/style.css
I know i can use the full path but i dont want to hard code the full path like this
<link rel="stylesheet" href="http://www.xxx.com/css/colorbox.css" type="text/css" media="screen" />
So i am looking for a URL independent solution to use to include them.
may be ../../ but not sure this works though ? any idea ?
Start your URL with a slash and use the full path:
<link rel="stylesheet" href="/css/colorbox.css" type="text/css" media="screen" />
On Unix systems, "." is the current directory, and ".." is one directory up.
This means that for your problem, the correct path would be:
../css/style.css
or the whole line:
<link rel="stylesheet" href="../css/colorbox.css" type="text/css" media="screen" />
You just gave answear in Your question :)
For relative paths use ../ this will go one folder up. So for excample:
file placed in www.xxx.com/admin/ path used in this location: ../css/style.css in result path will be: www.xxx.com/css/style.css
One thing i'm not sure is if this method is used with full adress of a web will it be working properly.
I know that this (as i can see) is not a solution fo You but while i'm a PHP programmer i like to use full paths based on servers direct paths (using $_SERVER['DOCUMENT_ROOT']). This saves me a lot of time with paths while for example moving web from one server to another and from my experiaece i can tell that it is worth of implement in any project.
Link them like this
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />