when I bundle webpack, it adds random a href links, heres the image of where the link is supposed to be:
Good, a picture of my code in vscode
Notice how there is only one link,
here is the bad:
Bad, a picture of the bundled code in the web inspector
It's adding way more links.
I already searched all my files to see if I was accidentally appending links to the DOM, but I didn't
Related
This is pretty much my first go at HTML and CSS. I thought I was getting a hang of it until I added more pages. I wanted each page to have the same top navigation bar format, but when I linked the same CSS Stylesheet to all of my pages it just doesn't want to work? How should I go about fixing this?
Also, somehow my google fonts link did work at first, but once I added in the pages and tried linking the single stylesheet to all the pages, it stopped working completely.
Here's what is going on:
index.html file code & link href to css
Preview of index.html/my homepage
menu.html file code & link href to the same css stylesheet
Preview of menu.html/menu page
My CSS stylesheet
The preview works with index.html, but when I navigate to the menu page, or contact page I have created through the preview, it completely breaks and doesn't have the navigation bar I created across all the pages at all.
Did I do something wrong here? I tried creating multiple CSS files and gave them different names since each page is going to look different anyways, but kept the html the same across all the other html pages and the css the same.
The reason why the css script is working for the index page only is because index.html is the only script that has the right directory to your css script. So the browser can't find the css script as a result. Remember that the other pages are not in the same location as index.html (they are in Pages instead of the root directory). All you would have you do is just change the directory path on the other scripts.
Add this on all your other scripts (excluding index.html):
<link rel="stylesheet" href="../CSS/style.css"/>
It should work after this.
Here is an example:
Your actual problem is not knowing how to navigate from one/folder to another. This link below will help you further on how to navigate around folders.
https://learn-the-web.algonquindesign.ca/topics/paths-folders/
Don't take out the files from Pages but leave them where they, all you need to do is to change the path to the different files. You'll see how I did on the screenshots above.
If I had more time I would go more in detail but this should be sufficient info for you to solve the problem and understand what mistakes you made. I hope this helps.
I'm trying to include Shield IO Badges in the README.rst file for a GitHub project I am working on. Shield IO Badges have the functionality to encode for two links (one on the left side of the badge and one on the right side of the badge) and I would like to include this in the project README. From https://shields.io/, in order to use the dual link functionality, the badge must be encoded in a HTML <object> tag. reStructuredText has the raw function and can include HTML code snippets in the files which is parsed and included in the README. The PyCharm interpreter can parse the HTML properly and the dual link functionality is present. However, when I push the file to GitHub, the HTML is not being parsed at all. Was curious if there was a work around to get this functionality in a GitHub README file (Doesn't necessarily have to be reStructuredText).
Example:
.. raw:: html
<object data="https://img.shields.io/static/v1?label=Question&message=Unanswered&color=lightgrey&link=https://stackoverflow.com/&link=https://stackoverflow.com/questions/66716288/embedding-shields-io-badge-html-in-github-readme-rst"></object>
Example Badge Image:
Link to Shield IO Static Badge with Dual Link Functionally:
https://img.shields.io/static/v1?label=Question&message=Unanswered&color=lightgrey&link=https://stackoverflow.com/&link=https://stackoverflow.com/questions/66716288/embedding-shields-io-badge-html-in-github-readme-rst
It's not possible. Github strips links from SVG's in Markdown and reStrcturedText. See this issue on Github.
How to specify the link of left and right on GitHub #5593
It works if you wrap an <img> tag with the Shield.io badge with a <a> tag containing the link you want. I know using HTML in markdown is frowned on but this is the only way I've found to make this work how you want it to.
<img src="https://img.shields.io/static/v1?label=Question&message=Unanswered&color=lightgrey&link=https://stackoverflow.com" />
I am having a navbar having links to homepage and other stuffs and it is same for every page so it is only kept in home directory and linked with other htmls. The problem I am having is with the anchor tags as different files are kept in different directories, so the relative link to homepage and other stuff will also differ. For example let my home directory name be 'abc' and homepage and navbar is located in this directory as 'abc/homepage.html' and 'abc/navbar.html'. Anchor tags works well on homepage but in different directory it doesn't. As if I access it from 'abc/def/otherPage.html' it isn't working in other page as now homepage link is '../homepage.html' rather than just 'homepage.html'. Someone plz suggest a solution out of this problem.
As i understand you need to use absolute path for links, for example "/abc/homepage.html", not "abc/homepage.html". In this case no matter from where you click to this link you will come to /abc/homepage.html
Yes, I know that this question has already been asked multiple times, and I've applied every solution that I could find, but I still have this issue:
If you visit my Jekyll site (yasath.github.io), the homepage and the tags page in the navbar render the CSS perfectly and look beautiful. However, when I click on a post (like this one), the CSS completely fails to render and I end up with an old-looking white background, Times New Roman text page!
My config.yml file has the right URLs (as far as I know!), and when I view the source of both pages with Chrome's developer tools, they both import the same CSS file correctly.
Hopefully, someone can give me advice specific to my site! This is the GitHub repo for the site, and again, here is the actual site.
The links to your stylesheets in your <head> section are written as relative links. You have, for example:
<link rel="stylesheet" href="assets/css/app.min.css">
When a URL starts with a directory name like "assets", the browser looks for that directory relative to the URL it's displaying right now. So when you're at yasath.github.io, it goes to yasath.github.io/assets/css/app.min.css... but when you're at https://yasath.github.io/2017/09/04/hello-jekyll.html, it looks for a stylesheet at https://yasath.github.io/2017/09/04/hello-jekyll.html/assets/css/app.min.css, which of course doesn't exist.
You want to start your URL with a /. That tells the browser to look relative not to the page it's displaying, but to the root of the website. So in your head template use:
<link rel="stylesheet" href="/assets/css/app.min.css">
...and similarly with all your other stylesheet URLs.
I've developed a custom HTML homepage for my prestashop site, but it seems I do not know how to incorporate it, I've tried looking into the prestashop forums, but all it shows are for .tpl files, is there a way for me to link them to the homepage?
Can I just link it as an html page or do I really need to put it inside a tpl page for it to work?
Create your .html file (say 'test.html).
In test file you need to
add these lines of code before your html code
<?php
include(dirname(__FILE__).'/config/config.inc.php');
Tools::displayFileAsDeprecated();
include(dirname(__FILE__).'/header.php');?>
Also add these lines after your html code
<?php include(dirname(__FILE__).'/footer.php');?>
Place the test.html file in the public_html folder.
Now you need to add the page to link with your site.
If it is home page you need to add it to index.php otherwise you can just add the url (http://mysite/test.html) to menu bar or footer links, where ever you want to put it.
I have placed my php page link in the footer information part using anchor tag as shown in the image
In prestashop you can find "Home Editorial" module, in this module you can put your html obviously the module need to be transplant in displayHome position.