I have many html files, all named index.html but being in different subdirectories.
These files are created by a software. After these files being created, I want to add a Stylesheet to all of them!
If i use SEARCH:"<head>" and REPLACE:"<head><link rel='stylesheet' href='/style.css'>" it wouldnt work because the files would need relative paths.
Any idea how I could achieve my goal? While Iframes are oldschool they do not use the CSS of the main page i assume.
Other ideas?
You could use an absolute path to your CSS-file. Then it doesn't matter that they're in different paths:
<link href="/styles/site.css" ...
Now every file will look up the styles-folder in the root, and the file site.css in that folder
Just use the absolute path as you mentioned.
And DO NOT open your html files directly in the
file://D:/path/to/your/file/index.html
because the root path '/' means D:/
You should setup a http server to host your pages and open them by visiting like
http://localhost/url/to/your/file/index.html
the root path '/' means
http://localhost/
Or upload them to a server.
In this way the absolute path of your css will work correctly.
Forget the relative paths.
Related
I want the path to the file to look like this: "/assets/style/home.css"
But even though VSCode recognizes this path, and takes me there when I click it, the CSS doesn't appear on the page. It only appears when the path has the two dots: "../assets/style/home.css"
Any ideas on how can I fix this? This is what the entire path looks like:
It's like that with every single path I use in this project, actually. I have to use the two dots for everything.
The "../" means that it is to return a directory, as your HTML file is inside the PAGES directory it is necessary to use the "../".
To call the css file like this "/assets/style/home.css" you need to move the assets folder into the PAGES folder
The "../" before the file path is used to move up one directory level. It seems that the HTML file linking to the CSS file is in a subdirectory and the CSS file is in a directory one level up. If you want to use the path "/assets/style/home.css" the file should be in the same directory as the HTML file or a subdirectory of the HTML file.
You could also consider using absolute path instead of relative path, it would work regardless of where the HTML file is.
Upvote if it helps.
Your code should work if RANDOMWEBSITE is the root folder of the web server.
It will work in VSCode if you open the folder RANDOMWEBSITE, but perhaps your webserver is configured to use a different root folder above your directory.
For example the root folder might be html, and your website is at html/RANDOMWEBSITE/. In this case it would look for the css file in html/assets/style/home.css, rather than html/RANDOMWEBSITE/assets/style/home.css.
Check what the root folder of the webserver is set to and reconfigure, or alternativly remove the RANDOMWEBSITE folder from your folder tree and work within the existing root folder.
You have to do that because .html is isn't "in the same line" as css. You can imagine that it's something like a crossroad if turn right but then you realise that you want to go left firstly you have to go back and than you can turn left. If you want do do "/assets/etc" you need to move you .html file to "randomwebsite/.html"
I have a problem in my html pages
when I use "root-relative" paths it isn't make the path correctly
instead of direct to the folder of index.html it direct to the father folder.
Example:
My index.html is: Websites/MySite/index.html
when I make a link in index.html to "/" it direct me to Websites/
what is the problem?
Root is the first folder that your work begins. Your site root is actually Websites/. So it acts correct. Maybe some hosts consider the folder that your html file is on it as root. If you want to have no problem with this, you should make all relative links work with your main root.
There is a php function that gives your current html file path. You can use it before your links. like:
<?php php_function ?>/mylink
The root path is a setting in the server config. If you want to reach something relative to your index.html than you would use ./ and ../
You can go back with ../ and stay in the directory with ./ where the file you are using is in.
For example if you want to reach the file
Websites/someFile.txt
from your index.html in
Websites/MySite/index.html
you would have to use the relative path
../someFile.txt
and if you wanted to use the file
Websites/MySite/subDirectory/some.css
from the same index.html you would write
./subDirectory/some.css
I hope that helps, if not feel free to ask, or make you question more precise.
And if you want to read more about relative url's you can visit the mozilla develop network ("Going back in the directory tree")
The physical folder structure on my web server is:
inetpub
oo|
oo|_wwwroot
oooooo|
oooooo|_MyApp ----> this is the root folder of my web application
oooooooooo|
oooooooooo|_images
oooooooooo|
oooooooooo|_styles
oooooooooo|
oooooooooo|_pages
I have an html file (test.html) under the pages folder. I want to link to other files (eg. stylesheets and images) via absolute paths. So, I have a line of code similar to this:
<img src="/images/roundbutton.png" />
When the page is rendered, the image is not displayed, as the "/" tells it to look for the image in a folder wwwroot/images.
Is there another way to use absolute paths to refer to the application root, instead of the site root? Or is using relative paths the only other option?
Yes, use the <base> element.
I'm currently working on updating a "legacy" website to xhtml/css, so that I can go ahead and proceed on a re-design. All of the pages have the header included via PHP. The issue is is that if I reference the style sheet from the header as "style.css" it looks in the current directory for the style sheet where of course there is no style sheet. Do I need to use an absolute path, or is there a better way to do this?
The line below should work in any HTML/PHP file in any directory, included/required or not, as long as the directory "assets" is in your home directory. I think i'm right in saying this is true for all "href" attributes (i.e. in anchors).
<link href="/assets/css/style.css" rel="stylesheet" type="text/css" />
If you're including a CSS file with a PHP inluclude, you must know the relative path from every file in which you are running the include function - no absolute URLs are allowed.
The path to the CSS file is relative to the URL which you used to request the main PHP page (the one in browser address bar), not to the local disk file system path where the PHP page is located in the server machine. CSS files are namely loaded by the webbrowser, not by webserver.
So to figure the relative style sheet path which you'd like to use in <link href> in the HTML head, you need to know the absolute URL of both the PHP page and the CSS file so that you can extract the relative CSS path from it.
Like many developers I put my images in /images, css in /css, and js in /js. This way, no matter what the URL/directory structure, the site can simply reference /css/style.css or /js/jquery.
Problem is when I try opening the html from a directory, the paths are screwed up. It assumes / is C:/
I'd like to be able to preview html files in a directory before putting them into a CMS on the web, but don't know how. Can somehow be used to handle this with minimal hassle?
Using root-relative links is great but, as you see, can cause issues when working locally.
Ideally, you'd set up a local web server on your machine and preview that way rather than just using the file system.
By putting a slash in front of your path, you're making it an absolute path. You should use absolute paths as rarely as possible - instead, use relative paths.
Say you have a directory structure like this:
/website
/html
/css
style.css
test.html
script.js
/newcss
newstyle.css
If you're in test.html and you need to refer to style.css, the relative path would be css/style.css. If you need to refer to script.js, the relative path would be just script.js. If you need to refer to newstyle.css, the relative path would be ../newcss/newstyle.css (the .. means "go up one directory level").
This has the benefit of making your code portable - you could copy the website folder anywhere you wanted, on any system, even to your websever, and it would work. Both *nix and Windows systems obey these rules.
You could consider setting up a local server like XAMPP. That way, your files will be previewable on http://127.0.0.1 and your absolute paths can be made to work just like on the web. XAMPP comes with a default htdocs directory into which you would put your file structure.
It may take some time of setting it up and getting into it, though.