I feel like a baby for having to do this but bear with me. I'm trying to set up webpage structures on my desktop in a folder. It's got an index.html and a couple folders of its own. One folder, "research", has its own index.html. I'm trying to link to this page from the higher index.html with but instead of taking me to research/index.html it takes me to a 'file-directory view' (for lack of knowing what to call it) of the directory research/
Clearly I could fix this by doing but that's annoying. Thoughts?
if you want to browse locally, you will have to include the file name. in other words:
<a href='research/index.html'>research</a>
The reason it works on remote servers is because replacement is done by the web server so if you want research/ to work then you will need a local web server such as wamp on windows or mamp on mac.
Related
So I'm trying to access my root directory in HTML but when I use / it is not working. So for example I'm trying to get my navigation css by doing:
<link rel="stylesheet" href="/nav.css">
The weird thing is, it works perfectly fine when I am using VS Code with the live server extension, but I just recently noticed when I run the index.html file alone none of the links starting with the / work. I know this is the issue too, because when I take away the / in the above line, it works perfectly fine again (only for the homepage page in the root directory already).
As Quentin points out, if you're loading the index.html file locally without a server, the root directory will be the root of your file system. If your requirement is for the index.html file to work locally on your professor's machine without a web server, you should use relative paths.
In order to traverse back up your file system from the current file, you can use paths that start with ../
when I run the index.html file alone none of the links starting with the / work
If you are running index.html alone then the links starting with / will be relative to the root of your file system.
The browser doesn't (and can't) know which directory represents the root of your web site project.
Use a web server. Load the data over HTTP.
Try this:
./nav.css
It (I mean, ./) loads files in the same directory of index.html, same as nav.css. With VS Code, I bet ./nav.css should work for the live preview too: using an external HTTP server (such as http-server on Node.js) helps, because it takes the current directory (where index.html is) as the root and you can easily reach /nav.css. Without a live server, the relative path could be reached as I said with ./nav.css (a typical *NIX path) or simply nav.css without slashes on Windows.
As others have indicated then the reason it's not working is because by loading the file directly you are now loading it as a local file rather than a file on website, and thus your URL base (Your /) is now referring to the root of your local file system. Which would likely be C:\ on a windows system or your actual root / on a *nix system.
To actually solve your issue I would suggest one of the following solutions:
Just always run the project over HTTP through a server.
Go through your project and change all of your paths to be relative paths. You might be able to use a find replace in your editor to do this.
Use a <base> tag to specify what the base href of your web page should be.
If you can't use a server and just have a single HTML file then it might be quickest to use fix 3. You can probably get away with using <base href="."> to make the base the current directory of your index.html file which, I suspect, will be a drop in solution to make things work as they did before.
In future best consider this and how you are going to run the file, and what your URLs are going to be relative to. It's a wrinkle that can be easily missed nowadays that the tools we use in development are so good at hiding the details of how websites are actually deployed.
I don't think <base> is a good idea.
It will change the base href in the whole page, which might cause problems when using other links or section navigation.
The images aren't shown (anymore) on my website, which is using Bolt CMS. The connection to the database is just fine, everything is written correctly in the tables.
When I try to access the systems File Management it gives the error
Attempted to call function "exif_read_data" from namespace "PHPExif\Adapter".
So my guess is that the actual images are saved in a root folder, but that the link to it from the database is disrupted.
Everything is still working fine on my local version and I don't remember making any major changes to the config files.
Any ideas on what could cause the problem?
Thanks!
You don't have the EXIF extension installed/enabled in PHP
been looking around here for a bit but still haven't found an answer.
Have an issue with a site I'm working on. Site is entirely self contained in a folder. Trying to reference one image for a parallax section on the website. Referenced like this in the main css file:
#services {
background-image: url("../images/dark.JPG");}
Main css file is located in maindir/css. Image that I'm looking for is located in maindir/images/.
It worked locally, so I tried to upload the entire folder to my testing domain. However, when I load up the site, this one specific image doesn't come up. I can confirm in FileZilla that the file uploaded without a problem, and can download and confirm that the file's intact. Other images load without a problem, but trying to replace this specific image with any other image yields the same results.
Is this something I may be doing wrong or potentially an issue with my webhost? Going through Lunarpages and have had a few random buggy incidents like this before, but I wanted to figure out if it was my own ineptitude to begin with haha. Again, nothing is stored anywhere on the computer - all local to the folder the rest of the site is in.
Like I figured in my comment, it's a capitalisation issue. On your local machine, where the file system is case insensitive, it's no problem to use "JPG" to access a file ending in "jpg". However, on the Apache server, case does matter.
http://nearsighted.ninja/images/dark.jpg loads
http://nearsighted.ninja/images/dark.JPG does not load!
Solution: write the filename in your css exactly as it is, with lowercase "jpg". (Or, rename the file.)
You are probably developing on a Windows machine, and deploying on a Linux machine. Windows file system is case insensitive, so .jpg and .JPG and .Jpg are all the same.
On Linux, where you're deploying, the file system is usually case-sensitive. Which means xxx.jpg and xxx.JPG are interpreted to be different files.
It's always better to use the same environment for both development and deployment. You can install a virtual machine for testing your work locally.
I've recently changed computer and now when running my site locally all the font-awesome icons are replaced by boxes or other characters. This happens cross browser.
My first thought was the FA files were not being linked to correctly. I checked and they being linked to. The source of the page is also identical to my previous computer (where it still works). The problem also persists if I link to the CDN rather than local files.
I am now using linux mint rather than OSX and tried searching in relation to that but all of the results suggest it works locally but not remotely.
The server is the one provided by the Pyramid web application so it's not an apache/nginx problem.
Where should I be looking next or is there anything else I can try?
Maybe this option will work. If its a downloaded template
font-awesome/fonts/fontawesome-webfont.eot#v=4.2.0
Rename the filename like
font-awesome/fonts/fontawesome-webfont.eot
same like for all files the version for ttf,woff,eot#
refer the image file also
I am making my first web site with OSX; this is an internal website for my company.
When the server start, I load pages from a different location, from the one that OSX server used to create my template site (because I do redirects that go on the same IP address, so the pages of the redirect obscure the ones from OSX server). These pages are served by a product called Buildbot (a CI server).
Now, I load the main page from the python directory on my computer, and I would like to avoid to get all the pages for the server there, to not mix them up with the buildbot pages; so I am trying to use the directory that OSX server created for me.
The issue thou, is that I do not know how to link pages...HTML is something that I forgot with time; but I remember that each site starts from a root directory, so the computer is protected by outsiders that may try to force it.
Now, I assume that my root is where the start page is loaded from (in my case is /Library/Python/2.7/site-packages/buildbot-0.8.8-py2.7.egg/buildbot/status/web/templates/), so if I use an href to link to another page, I can just access to this tree.
Which means that my website should be in a folder in this path? I can't seem to access the site where OSX server created the website resource (which in my case is Library/Server/Web/Data/Sites/mySite/).
Has been so long since when I used HTML, so I am quite rusty on the topic, and would appreciate a lot any kind of hint. The site will not be available outside our internal network, so I simply need to link pages and resources scattered on my server HD, and put them on web pages.
Here's how I understand:
Let's say your web root is /root, but you want to have a href to an html file in /dog, for example. Is this correct?
Assuming so, you cannot link an HTML file that is not in the web root, as the browser needs to be able to access it. If you were using a server-side programming language you could do this, but not with HTML.