Troubleshooting: Issues with Mod_rewrite affecting CSS, JS, and Image functionality

Today marks my first time posting a query in this forum.
I'm currently facing an issue with mod_rewrite.

Below is the structure of my filesystem:

site_new/stylesheets/layout.css  
site_new/javascript/somescript.js  
site_new/hallendetails.php  
site_new/etc...

I attempted to redirect my PHP page to an HTML file using mod_rewrite.
The redirection is successful, and my .htaccess file looks like this:

RewriteEngine on  
RewriteBase /site_new/  
RewriteRule ^(.*)/(.*).html$ hallendetails.php?id=$1&halle=$2 [L]

The original URL is:

localhost/site_new/hallendetails.php?id=01&halle=Heimspielhalle_Gaissacher_Strasse

The "new" URL is:

localhost/site_new/01/Heimspielhalle_Gaissacher_Strasse.html

However, all my CSS, JS, and Image files are now broken.
They are being accessed in the following manner:

type="text/css" href="stylesheets/layout.css"

But after the redirection, they are being sought in

/site_new/01/stylesheets/layout.css

I believe I require a RewriteCond, but I'm unsure of how to implement it. I have attempted multiple approaches, but none have been successful.

I would greatly appreciate any assistance!

css apache .htaccess mod-rewrite url-rewriting

Answer №1

Consider implementing the absolute path for css, images, and js files when utilizing mod_rewrite

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

What is the best way to programmatically insert new rows into a table

I am currently working with the foundation 5 framework (not sure if this is relevant). I need to ensure that each CELL is treated as a distinct item/value when passing information to another page, and I am unsure of how to approach this issue. It should cr ...

javascript html css zurb-foundation

Are there any options available for customizing the animation settings on the UI-bootstrap's carousel feature?

If you're interested in seeing an example of the standard configuration, check out this link. It's surprising how scarce the documentation is for many of the features that the UIB team has developed... I'm curious if anyone here has experie ...

javascript css angularjs angular-ui-bootstrap css-animations

What could be causing my CSS code to not function properly within Vue.js?

Having trouble with css in VueJs. I can't seem to figure out what I'm doing wrong. Generally, my scoped style css works fine in vuejs, I can target ids and classes without any issues. The problem arises when trying to change the internal css va ...

css vue.js quill

What is the best method for resetting a flexbox item?

I'm trying to achieve a layout with flex box where the first item spans 100% width, the second item is centered at 50% on its own line, and the third and fourth items each take up 50% width on the same line. Usually, clearing works fine on simple blo ...

html css flexbox

Tips on determining the type of DOM element for CSS Selector adjustment

In this case, $self is not returning the expected result and I am getting "undefined". To adjust the CSS selector to correctly target the desired element, I need to determine which element type I am dealing with. Is it the "ul", "li", or "a" element? Whil ...

javascript jquery css

Is there a way to hide a specific character within a span element as securely as a password input field using

Can I use CSS to mask a span character similar to an input type password? Are there any properties like type="password" for the span or a specific class in Bootstrap such as class="mask" that can achieve this effect? https://i.stack.imgur.com/b8WQ4.png ...

html css bootstrap-4

Is there a way to adjust the placement of text in an HTML document?

Just starting out with web development and created some HTML code: <html> <body> {errors} <p>Input your numbers:</p> <form method="post" action="."> <p><inpu ...

html css css-position webfonts

Show an error notification if the mobile device does not meet the requirements for jquery mobile version

Currently, I am in the process of creating a website using HTML5, CSS3, and jquerymobile. My goal is to have an error message appear saying "Your mobile browser does not support this application" if the page is not rendering correctly or if the jquery mobi ...

jquery html css jquery-mobile

Struggling to keep navbar fixed with a blur effect without it colliding with body content as you scroll?

I'm looking to create a sticky navbar with a blur effect similar to the one seen on (try scrolling to see the blur effect on the nav). I want it to have the following structure: My HTML code is as follows: <header class="sticky z-10 top-10"> ...

html css tailwind-css

Hidden Navigation Bar in AngularJS

Is there a way to hide the navBar when the route is "/"? I managed to successfully hide/show the navbar, but the issue arises when the navbar is hidden. The "app-body" div then has 50px of padding top (where the navbar should be). Here is my HT ...

html css angularjs twitter-bootstrap navbar

I'm struggling to center my navigation bar and adjust its size properly, causing the page to overflow

I am facing some issues with my navigation bar. I am unable to adjust its size or position it at the center of the page. Additionally, despite setting the body width and height to 100vw and 100vh respectively, I am able to scroll both vertically and horizo ...

html css node.js frontend

Adding the <a> tag causes Superfish to malfunction

I've been struggling to get the latest Superfish menu code working with lists that include the <a> tag. I've double-checked everything, but it seems like I'm missing something obvious. Can anyone help me figure out what's wrong? ...

javascript css superfish

Prevent touching the pseudo content of an element

My issue involves a toggle button component where I have utilized the ::before pseudo class to add text. The problem arises when clicking on the text within the toggle button causes the button's state to change. How can this be prevented? Here is the ...

html css angular ionic2

Tips for creating a sidebar table of contents with CSS

I'm looking to design a webpage with a side bar table of contents (TOC) similar to the one found here: The current placement of the TOC on the HTML page is as follows: <h2>Table of Contents</h2> <div id="text-table-of-contents&quo ...

html css tableofcontents

Is it possible to avoid widows in CSS without the need for extra HTML elements?

I have a snippet of text that is controlled within a Content Management System. The CMS restricts the use of HTML or special characters such as   or <span>. Despite my attempts to adjust margins and padding, I cannot achieve the desired out ...

html css content-management-system whitespace word-wrap

Strategies for Increasing Index Values in JavaScript

I attempted to modify the data attribute in my code snippet below. After clicking on the square, the data attribute should be incremented. However, it appears that the incrementing is not happening as expected. How can I resolve this issue? Additionall ...

javascript html jquery css

Is there a sweet syntax for CSS variables available?

What about using this instead: :root { --primary-color: gray; --secondary-color: lightgray; } var(--pc) Is there a more concise syntax available, perhaps shorter than var(--pc)? ...

css css-variables

AngularJS: Showcase HTML code within ng-view along with its corresponding output displayed in a navigation format such as Html, Css, JS, and Result

Currently, I am working on a web application. One of the screens, screen-1, consists of a series of buttons labeled 'Code'. When a user clicks on any of these buttons, it loads a different HTML page, screen-2, in the ng-view using $location.path( ...

javascript html css angularjs

A guide to accurately accessing form data in Jquery Ajax requests

My beforeSend function is not working properly, as the background color does not change. I suspect it may be due to not correctly referencing the id variable posted from the form. Below is the relevant HTML and JS code: HTML <div id="rec<?php echo ...

jquery css ajax

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

javascript html css animation

CSSer Q&A