my directory is shaped like this
image
in order to use my navbar between different html files, I made it into a seperate html file and use a placeholder to insert it where i need it. the problem is that now the links get thrown off.
for example: when im on the index file, the link works without a problem. however, when im in the about_us file, the link throws a cannot find in directory error because it would need ../ in front of the link.
any javascript I have also does not work for the nav.html.
any suggestions? is there a way to create links and start the directory from the root?
To navigate to the correct HTML file, you have to pass the full path of the HTML file.
For eg: If your application is running in https://localhost:8080 than you have to pass the full path as below:
Home
About Us
Or if you directly opening the HTML file in your browser without any server, than pass the full path of your project folder as below:
Home
About Us
Note: Always use the file or folder name with a hyphen - or underscore _.
For eg: instead of html files rename your folder name as html_files or html-files.
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 faced a problem using a link inside my main html and giving another html file name to the link which is in the same root as the main html.
unfortunately after click on the link the address bar is changed but the page is not loaded and it redirects to the main html page.
this is the way I wrote the link:
click
this is my folder structure:
I also tried with giving the full path but I got this error:
Not allowed to load local resource: file:///C:/my_project/templates/PU.html
As you said in the comments, I assume you're working locally on your computer, so I'm going to answer accordingly.
The first and foremost thing to know is that your main, i.e the file you want users to see first should be named as index.html and it should be in the root directory of your project, i.e according to your question, it should be in my_project.
Now if it is as I said, then your my_project folder/directory will be considered as the root directory. With the help of this consideration, now you can set links with respect to the root directory. e.g:
click
The / at the beginning here tells the HTML to look from the root directory, i.e from my_project in your case.
I don't see any errors in the code you have. Though, I will tell you a few things here.
**./** at the beginning of the link tells HTML to look at the file in the same folder as of the present file. So, if the PU.html file is not in the same folder as of the file you're working on, it will give an error, because as I said, it's looking for the file in the same folder.
There is nothing wrong with your syntax.
click is correct,
but if you have your files in the same directory you don't need ./.
Problem:
I have a table of images that I'm using as an overview/introduction. I want the end-user to be able to click on the image and it link to the HTML page for that image's corresponding introductory information1.
The problem is I can't seem to get the linking part to work. The table of images shows up fine, but clicking on an image just takes me to a page not found screen (see image at bottom of post). I've spent about an hour on Google but haven't found a solution yet.
1each image has a corresponding .rst file with the info I want the end-user to see
Info:
Sphinx 1.8.5
Python 3.7.6 (MiniConda)
Building html pages from reStructuredText files
sphinx-build -b html source build
make clean html
make html
Nothing special has been done in my conf.py file, other than including the RTD theme
I'm guessing I will need to do something fancy in my conf.py file if doing what I want is possible at all
Adding the .rst files to the .. toc:: directive in introduction_file.rst didn't help
Here is the reST code I have so far:
the image directives are all inside a table; table omitted for brevity
I'm also confident that the 'image directives inside a table' thing is not the issue
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: introduction_files/my_first_image_intro_file.rst
.. also didn't work:
.. :target: introduction_files/my_first_image_intro_file.html
File Structure:
Home.rst is the entry point for the HTML pages (i.e. it used to be called index.rst until I renamed it and refactored conf.py accordingly)
--build
...
-- source
|--Introduction/
|--introduction_file.rst
|--images/
|--my_first_image.png
|--my_second_image.png
...
|--introduction_files/
|--my_first_image_intro_file.rst
|--my_second_image_intro_file.rst
...
|--_static/
...
|--_templates/
...
|--conf.py
|--Home.rst
I'm not opposed to doing what I want in HTML/CSS, but if there is a way to do it in sphinx then I'd prefer to do it that way. I will end up editing the HTML code regardless, but the less editing the better; Sphinx is essentially a quick-start or template.
This image is what I see in my browser when I click on one of the images in my table-of-images. The URL bar in Chrome shows the correct path to the .rst file though, so I'm a bit confused.
I tried changing the :target: file extension to .html but that didn't work either
Edit: forgot to add the location of introduction_file.rst to the folder structure
Solution:
Mix up between the paths. I was linking to the file in the source directory, but needed to link to the file in the build directory. Had to navigate back to the root directory with a few '../' prefixes, then navigate to the .html information file in the build directory. In other words, this is what it ended up looking like:
.. filename is "introduction_file.rst"
.. image:: images/my_first_image.png
:scale: 100%
:alt: My First PNG Image
:align: center
:target: ../../../build/html/Introduction/introduction_files/my_first_image_intro_file.html
The target option's value must be either relative to introduction_file.rst (you don't provide its location so you'll have to figure that out), or absolute to the documentation root, i.e., /Introduction/introduction_files/my_first_image_intro_file.html.
I am trying to add a raw html with a link to a .json file that is located in the _static folder.
.. raw:: html
<asciinema-player src="/_static/videos/quickstart.json"></asciinema-player>
This works fine locally, where the _static is always on the root of the domain but readthedocs adds a /en/latest to the start of the path.
Making the path relative works for the root domain, but if the raw HTML with a link has any additional path added to it (for example http://jak.readthedocs.io/en/latest/guide/usage.html) then it will say that static is located http://jak.readthedocs.io/en/latest/guide/_static/XYZ which will fail.
I would like to find a solve that works always, and preferably not hardcode /en/latest in case I want to version my documentation or add more languages.
Perhaps there is a better way of inserting the html?
After i hosted my HTML5 application on Apache tomcat.My page is not showing any background image.
I have placed my project folder (MyExpert) inside root folder and inside MyExpert folder there is an image folder and a css folder .I am giving background image as
background-image:url(../images/myprofile_on.png)
in my css file but images are not coming on my pages except home page.Though application is working fine on localhost.I tried various thing but no fruitful result.
it looks like it will be a simple referencing or permissions issue here, try nivgating directly to the image in your browser and see if you can navigate to it manually so is this case given your description it would be:
http://www.yourdomain.com/MyExpert/images/myprofile_on.png
If that works then its a simple referencing issue from you css file, if it returns a forbidden access page you know its permissions, if it returns a file not found I would recommend checking the casing on your CSS url to ensure it matches the file path as if your box is linux then file paths are most likely case sensitive.