Configure Relative path in HTML when inside a folder - html

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" />

Related

The external style sheet is not working on my site

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!

Moved HTML into a different folder, now it's not linking CSS correctly

I created a header (header.html) file to be imported into different pages on my site. It works when I have it only in the WebContent folder, and draws the CSS files, fonts, and images from the Assets folder perfectly. However when I try to import it into a JSP page under the User folder using this method, it doesn't work.
When I move header.html into the User folder, it stops drawing from the Assets folder altogether, and the header just becomes text. I am linking it by:
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
Also, the User folder and Assets folder are both directly under WebContent.
Thanks in advance!
providing the folder structure has both user and assets mentioned above in the parent directory simply change
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
To
<link rel="stylesheet" type="text/css" href="../assets/css/custom.css">
This is a relative link meaning it will go up one structure and go from there.
But you need to consider the location from which file it is called as we don't know your directory structure this is the best we can do with the information you've given.
Simply use absolute path for your CSS & JS & Fonts & other assets
How?
Instead of
<link rel="stylesheet" type="text/css" href="assets/css/custom.css">
write
<link rel="stylesheet" type="text/css" href="/assets/css/custom.css">
and make sure if assets directory is in directory for which point your domain
In many cases absolute paths are better, because You don't have to think how to link to your assets from specific directory, because this path always start from root directory
Here is similar question & answer

CSS Stylesheet linking wrong in Wordpress across entire site

Ok, I have a feeling I've really done it this time. I've developed a Wordpress site locally and then transferred it to my remote server. I did a search and replace on the database using the script.
Now, I go into my site on the remote server and the HTML is good, but the CSS stylesheet is not linking properly.
Here is how it appears when I view source:
<link rel="stylesheet" type="text/css" media="all" href="www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Now when I click on the link in source, I am directed to this:
www.fairchildwebsolutions.com/jesusandg/www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css
Obviously, one too many domain names in there, so the file cannot be found. My question now is, how do I go back and do a search and replace on this to remove the extra domain without messing things up even worse?
<link rel="stylesheet" type="text/css" media="all" href="http://www.fairchildwebsolutions.com/jesusandg/wp-content/themes/Sky/style.css" />
Without the http:// it thinks its a local link not direct.
Wordpress can also link to the stylesheet or theme directory:
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
Here is some more information on the function to call out the theme directory: http://codex.wordpress.org/Function_Reference/get_template_directory
when you add the stlyesheets in your functions.php try to stay away from using exact links and instead use the get_template_directory_uri (or something like that i can't remember the syntax exactly. it's referenced here Wordpress codex for template directory
Add http:// to the beginning of your style href. Alternatively, since it appears you are on the same domain, simply modify the href to be the following:
href="/jesusandg/wp-content/themes/Sky/style.css"
The former is an absolute path. The latter is an absolute path relative to your domain root.
Your stylesheet call is missing its http:// at the beginning of the href. This means the browser interprets it as a relative path not an absolute one and breaks the link.
What does your stylesheet call say (probably in header.php)? It should be something like:
<link rel="stylesheet" type="text/css" media="all" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" />
The get_stylesheet_directory_uri() call returns the absolute path of the theme directory.
If it's not in header.php it's probably referenced in functions.php using the wp_enqueue_script() function. Same deal - use get_stylesheet_directory_uri() or one of the several template tags that do the same thing and make sure that is used to build the url to the stylesheet rather than defining it explicitly.

Stylesheet link failure HTML/CSS

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 .

node.js express.js routes slash css

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.