Subsequent pages are failing to load stylesheets

My HTML is not linking my CSS properly. I am using the Prologue template from html5up.com. In my main directory where index.html is located, I created a subfolder for the different products I want to display. This folder contains several files including 125st.html, 125stmain.css, and a folder called _notes created by Dreamweaver. The code in 125st.html that should be linking to 125stmain.css is:

<link rel="stylesheet" href="products/125st/125stmain.css" />

When I visit shercousa.com/products/125st/125st.html (it won't work for you, as I have redirected the hosts file to my local save while I work on it), only the HTML displays without any CSS. I tried copying this line from the index.html file and changing the folder to direct it to the CSS clone I created. When that didn't work, I even copied and pasted the original line that works on the main site into 125st.html, but still no CSS is loaded. Apologies if my explanation is hard to follow, as I am new to this. Please let me know if you need more information or code.

Edit: Additionally, my images are also not loading, even those linked in the html file.

Answer №1

It seems like there is a simple solution to this issue.

If you are on the page host/products/125st/125st.html and have linked your CSS like this:

<link rel="stylesheet" href="products/125st/125stmain.css" />

The problem arises because your file 215st.html is looking for: host/products/125st/125st.html/products7125st/125stmain.css

To fix this, you can link your CSS in one of these two ways:

<link rel="stylesheet" href="/products/125st/125stmain.css" />

or

<link rel="stylesheet" href="125stmain.css" />

I hope this resolves the issue for you :) And please excuse any mistakes in my English!

Answer №2

Oh no, I made a silly mistake. Make sure to add a slash in front of products like this:

<link rel="stylesheet" href="/products/125st/125stmain.css" />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Incorporate h:outputText into your JavaScript code segment

After populating some information into a h:outputText, I am now looking to trigger a JavaScript function upon clicking a button that will retrieve the text from the outputText. The structure of the code is as follows: <p:tabView id="tabView"> & ...

What are the implications of using subresource integrity with images and other types of media

Subresource integrity is a fantastic method for securely using third-party controlled HTTP-served resources. However, the specification currently only covers the HTMLLinkElement and HTMLScriptElement interfaces: NOTE A future iteration of this spec may i ...

Mouseover Magic: Text and Captions Come Alive with JQuery

I am trying to create a rollover effect that displays text when the user hovers over an image. Despite researching numerous tutorials, I have found limited resources on incorporating text or captions using jQuery. Most of the available tutorials focus on C ...

Issue with MaterializeCSS: Unable to add new options to select menu

I have a function that appends options to a dropdown based on the onchange event. The options are being appended successfully, but they are not visible when clicking the dropdown. $(document).ready(function(){ $('select').formSelect(); }) ...

Refresh the Content of a Page Using AJAX by Forcing a Full Reload

I have a webpage that automatically updates a section using jQuery AJAX every 10 seconds. Whenever I modify the CSS or JavaScript of that page, I would like to include a script in the content fetched via AJAX to trigger a full page reload. The page is ac ...

Issue with the Ajax auto-complete feature in Internet Explorer

I am facing an issue with my "ajax suggestion list" getting hidden behind the "select menu" located right below the text box that triggers the ajax function. This problem only occurs in IE 6.0, while it works fine in other browsers. I have already disabled ...

Switch out the content within a div upon selection

I'm currently working on a palette board project and facing some challenges when switching to a different theme. The initial page is set to have a Warm color palette, but I intend to alter this once the user clicks on the All theme option. Users wil ...

Issues relating to the total count of pages in the uib-pagination component of AngularJS

While there is a previous thread discussing a similar topic Calculating total items in AngularJs Pagination (ui.bootstrap) doesn't work correctly, it does not address my specific issue and I am unsure how to contribute to it. We are using a complex s ...

Display sourcemaps on Chrome's network panel

Recently, I began utilizing source maps for my SASS code in order to debug more efficiently in Chrome. My understanding was that Chrome should request both the stylesheet resource and the .map resource, however, only the stylesheet is visible in the netwo ...

Opacity of absolutely positioned elements

I am currently working on creating a popup box that will gray out the surrounding area. The problem I'm facing is that the opacity of the shadow div seems to be overriding that of the popup. I have tried changing the position from absolute to fixed an ...

Ways to define css attributes for the "before" and "after" pseudo elements in the DOM

I'm looking to modify the color of the "border-left" property from its default red to a different color within the scope, such as blue. .hello:before { content:' '; display:inline-block; width: 22px; height: 25px; ...

Using HTML URL parameter in PHP code

Hi there, I'm new to using PHP and would appreciate any help you can provide. I'm facing an issue with passing a URL parameter from an HTML page (mywebsite.com/f.html?survey_id=5d86055f35bf41f3a35f2c779fc478dc) to a PHP script that should save t ...

Using CSS Classes with PHP Variables in Conditionals: A Handy Guide

I have limited experience in programming and I'm attempting to edit a .php file within a Wordpress theme. Please keep this in mind as I explain my issue. Within the theme, there is code that calculates the average score from 1 to 10 and then displays ...

What is the best way to animate the scaling of a CSS property using jQuery?

I need help creating an animation where a circle div with the class of "bubble" grows from nothing to its full size when a button is clicked using jQuery. I am currently facing difficulties in making it work properly. Here's my current code snippet: ...

What is the best method for rounding a decimal number to two decimal places?

Here is the JavaScript code I am using: $("input[name='AuthorizedAmount'], input[name='LessLaborToDate']").change(function () { var sum = parseFloat($("input[name='AuthorizedAmount']").val()).toFixed( ...

Removing the loading spinner from Ag Grid

While utilizing ag-grid with rowModelType=serverSide, I have encountered an issue where the loading overlay includes a spinner as shown in the image below. My goal is to eliminate this spinner from the overlay. I attempted using hideOverlay(), but it seems ...

Resolved plugin issue through CSS adjustments

Take a look at this template 1) After referring to the above template, I developed a fixed plugin using JavaScript. 2) Clicking the icon will trigger the opening of a card. 3) Within the card, I designed a form using mdb bootstrap. Everything seems to ...

The function of page-break-after: always is not functioning correctly

I want the Div with class questions_visual to appear on the second page when printing. <html> <head> <title>quiz</title> <link rel="stylesheet" href="style.css"> </head> <body> < ...

Positioning HTML elements using CSS and avoiding the use of tables

I'm struggling with my clear CSS declarations. This is how I'd like it to appear: View the Fiddle demo HTML: <div id="timesheeteditor"> <div id="weekselector"> <div>Week 1</div> <div>Week 2</div> ...

eliminate the offspring of a component (chessboard)

Hey there! I'm currently working on developing a chess game and I could really use your expertise to help me solve an issue. In my code, when I try to move a piece in the game, this is what happens: 1. First, I remove the existing piece from its cu ...