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.
Related
I am a newbie in Front end languages. I am having a difficulty with my CSS web display, whenever I get to write my CSS codes on Bracket editor,then get to link it with any of the html codes. For example using <link rel="stylesheet" href="css/mine.css>..then get to refresh the CSS.mine page, it automatically displays my index.html codes page, which is not related to what I expect, in terms of it loading to other html pages I linked it with or I'm working with.
Please any solution, on how to overcome this challenge?
Thanks
Hopefully I am getting it right, but normally the web browsers render the html files in the project folder, when it comes to css files, they are used for styling the html page, so you have to link the css file to the html file you want to render, for example index.html and index.css. Then in the head of the index.html you put the link tag
<link rel="stylesheet" href="index.css">
as an example. Then you save and reload(or if using any automated terminal just save). CSS files are only displayed in the linked html files, so this means
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
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'd like to scrape all the linked javascript and css files on a give domain with Scrapy. The issue is that I don't quite understand how to extract the links from the link elements.
Assume I'm scraping example.com. There are links to js and css of the form:
<link rel="stylesheet" href="/path_to_css/example.css"/>
<script src="/path_to_js/example.js"></script>
These links start from the root domain, so no problem. But if the links are like the ones below, it starts to get confusing:
<link rel="stylesheet" href="path_to_css/example.css"/>
<script src="path_to_js/example.js"></script>
These relative URLs are supposed to work such that if I'm on example.com/some_page/ the link paths are appended to that like: example.com/some_page/path_to_js/example.js. That's not how it always works in actual web pages however. On some web sites with language selection eg.example.com/en/some_page, the relative paths start from example.com/en instead of the full path of that page.
So, while expecting to find the files at example.com/en/some_page/path_to_js/example.js, you find them at example.com/en/path_to_js/example.js
Is there any way to understand from where the relative paths start from?
While scraping, Scrapy allows you to create an absolute URL from a Relative URL
You could do something like this
for link in response.css("link"):
response.urljoin(link.css("::attr(href)").extract_first())
for script in response.css("script"):
response.urljoin(script.css("::attr(src)").extract_first())
I often get confused with the href attribute, the link tag, and the base tag. I'm unsure how to properly link the CSS file so a file can be moved into a subfolder and still work (example later on) so I went ahead and found out how the href works when specifying a location.
For your knowledge, I'm working with my localhost, so I have the main htdocs folder and inside that, I have multiple folders, each for a project I'm working on. It ends up looking like this:
localhost/index.php (which redirects to localhost/home/index.php)
localhost/home/
localhost/zune/
localhost/school/
localhost/aeac/
And generally the layout of a folder will be something along these lines:
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
Going on, let's say I have the file localhost/aeac/test/index.html and in it, I have 4 links for testing. I've found out that
<a href="/"> will link to "localhost/"
<a href="./"> will link to "localhost/aeac/test/" (the directory the file is in.)
<a href="../"> will link to "localhost/aeac/" (the directory above the file.)
<a href="about.html">will link to "localhost/aeac/test/about.html" (the directory the file is in.)
Now that I understand href's, I need to understand how to link CSS properly.
Imagine the site's directory looks like this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
and right in the /aeac/ folder I have index.html. The file has a link tag that looks like this:
<link rel="stylesheet" href="stylesheets/main.css" />
So that works out well, main is basically the site's structure/theme and gets included in every file. The problem occurs when I have to make a subfolder. Now we have a localhost/aeac/users/*username*/index.html. The site still uses the main.css, but the link doesn't work anymore because there is no stylesheets folder inside there.
That's where I'm stuck, I imagine that I should be using the base tag to solve my problem but I'm still confused on how that would written. Also, I know I could just change the link tag for all the files in the users folder, but I'd like to know how to do it this way (if that's even possible.)
with what you found out about href, just combine that knowledge about navigation with your final approach:
So if you have this:
localhost/aeac/
localhost/aeac/images/
localhost/aeac/stylesheets/
localhost/aeac/scripts/
localhost/aeac/users/
and you are in localhost/aeac/users/index.html
you just go one directory up (../ to get into aeac) and then navigate on:
../stylesheets/style.css
Hope this helps
I believe you want this:
<link rel="stylesheet" href="/aeac/stylesheets/main.css" />
This begins with /, so it will always traverse up from the root, not matter where your page is located (i.e. at /aeac/index.html or at /aeac/users/foo/index.html). Now, if you have control over the tag in each copy of index.html (which you probably do), you could also navigate upwards with .., to ../../stylesheets/main.css, but navigating from the root is probably simpler.
You can have an absolute path to the stylesheet using / as the base
<link rel="stylesheet" href="/aeac/stylesheets/main.css" />
You can use:
/stylesheet/main.css
or ../../stylesheet/main.css
No matter what the "user" folder is named, ../.. will always go 2 folders back:
/aeac/users/user1/index.html
/aeac/users/user2/index.html
../../stylesheet will always get to /aeac/stylesheet