Access a CSS file from a directory other than the main folder

I have an HTML file in the main folder (X-folder) which also contains CSS. I converted the HTML to ASP and now need to put it inside an ASP[Y] folder. My question is, since my CSS file is in the main folder [X], how can I access it from there if I am in the X folder?

My issue is that when I access the URL of the file in the Y folder, which has been converted to a .asp file, I lose most of its images and styles.

How can I rewrite my CSS?

I have tried a few solutions but it still does not read the CSS.

This image illustrates my problems: https://i.sstatic.net/w6DPJ.png

<link href="X/css/style.css" rel="stylesheet" type="text/css" media="all" />
<link rel="stylesheet" href="X/css/responsiveslides.css">
<link href="X/css/iframeCSS.css" rel="stylesheet" type="text/css">
htmlcssfileasp-classicstylesheet

Answer №1

Have you considered using a forward slash (/ at the beginning)? This tells the web server to load the resource from the root directory. For instance, with 

<link href="/X/css/style.css" ... />
, it will load from example.com/X/css/style.css.

Another option is to use ../, which instructs the server to load a resource from a directory one level up. If you are in directory Y/, you could use 

<link href="../X/css/style.css" ... />
to load the resource from example.com/X/css/style.css.

Answer №2

Your webpage's stylesheets are currently utilizing relative paths.

To rectify this issue, make sure to include your stylesheet links like so:

runat=server

Remember to add the virtual web root path as a prefix, denoted by (~)

 (~)

Here is an example:

<link href="~/assets/css/style.css" rel="stylesheet" type="text/css" media="screen" runat="server" />

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

The iPage server has encountered a 403 Forbidden Error, preventing

My website is linked with WordPress, but I'm encountering a 403 forbidden error in the sub-menu. Can someone assist me with this issue? I have uploaded a screenshot of the folder in iPage here Additionally, I want my WordPress page to show up correc ...

phphtmlcsswordpresshosting

Can you show me how to use vuejs to implement h2 tags?

Within the article, there are H2 tags that I want to use as a table of contents. However, despite attempting methods like Replace and substring, I haven't been able to isolate only the H2 tags from the content. The post content is structured in JSON f ...

javascripthtmlvue.js

Retrieving data from Mouse Hover popup with Selenium in Python

I have a project where I'm utilizing Selenium to automate tasks on a website. There is an interactive mouse hover box that appears to provide relevant information for users. Below is the HTML code snippet for the mouse hover: <td align="center ...

pythonhtmlselenium

Error encountered in PHP while trying to move uploaded file

I am currently working on a form that sends user input to a MySQL database. The form should also upload a file to a directory on the server. While everything seems to be functioning well, I'm encountering issues with the file upload feature. As a PHP ...

phphtml

The variable continuously updates itself inexplicably, without any specific code dictating it to

In the sandbox-based game I am playing, two variables are present. blocks (this is an array) and blockssave (also an array) However, there are also functions included: var game = { blocksave: function() { blockssave = blocks; blo ...

javascripthtml

The functionality of the browser's back button is impaired when the window.location.href is modified

My application used to be written in jQuery and was not SPA. I have recently converted some of the pages to AngularJS, making them SPA. Now, I am faced with the challenge of ensuring proper communication between these two types of apps. When transitioning ...

javascriptjqueryhtmlangularjsangular-ui-router

Looking to extract text between specific match groups using regex from an HTML YouTube page? Here's how you can do

Utilizing the power of Screaming Frog to extract keyword data from YouTube videos has its limitations. The software only displays 160 characters of meta information, which means videos with extensive keywords may not fully show up in this tab. Experimenti ...

htmlxpathyoutubeweb-scrapingkeyword-search

What are some techniques for disguising text on a website to give the illusion of being in English but is actually impossible to read

I am seeking a way to obscure text by rendering it completely unintelligible. While this task is easily accomplished in handwriting, I require a method for achieving this on a webpage using the Verdana font. One idea I had was to create a Verdana-style f ...

cssfontshtml

Looking to understand how to effectively utilize the ContentProtectionCallback in SHAKA PLAYER?

Could someone assist me in understanding how to pass the ContentProtectionCallback in order to manage the preProcessor of a drm license url for shaka player? [ var manifestUri = '<mpd url>'; function initApp() { // Including nece ...

javascripthtmlmpeg-dashmedia-sourceshaka

What causes child margins to extend beyond the boundaries of div elements?

Can anyone shed some light on the advantages of CSS behavior that allows a child element's top and bottom margins to extend beyond the boundaries of its block-parent? Check out this fiddle for a straightforward example. The pink div is influenced by ...

css

Simulating a mobile device screen size using an embedded iframe

Imagine this scenario: What if instead of adjusting the browser window size to showcase a responsive web design, we could load the site into an IFRAME with the dimensions of a mobile screen. Could this concept actually work? Picture having an IFRAME like ...

javascripthtmlcss

Positioning JQuery sliders

I've been working on a jQuery slider for my header, but I'm encountering an issue where the previous image drops down to the next container instead of staying in place and transitioning smoothly. It seems like there might be an error in my HTML/C ...

javascriptjqueryhtmlcss

Can a piece of code be created that generates the XPath for a specific element?

I'm interested in finding out if there is a way to automatically generate an XPath by simply selecting an element, eliminating the need for manual updates when changes occur in HTML files on websites. I welcome any suggestions or alternatives that can ...

javahtmlcssseleniumselenium-webdriver

Hiding a description on the mobile version of a Blogger website can be achieved by applying CSS

Can anyone assist me with a CSS code problem I'm facing? I tried to hide the blog description using the code below, but it's not working on the mobile version. Any suggestions? .header .description { display : none; } ...

cssblogger

Which is Better: Data-URIs or Embedding Fonts for Icons?

Currently, I am in possession of a set of approximately 10 monotone icons all sized at 25x25 or smaller. I am contemplating between two options for better performance: 1) Incorporating them into CSS using data URIs 2) Utilizing them as a font (for exampl ...

cssiconsembedded-fontsdata-uri

I'd love some clarity on the concept of stacking contexts

After encountering a bug with a non-clickable video player inside a jquery ui dialog, I resolved the issue by changing position:relative; to position:inherit; Other solutions included removing position:relative; altogether or adjusting the z-index of the ...

cssz-index

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

javascripthtmlnpmpaginationhandlebars.js

What are the best techniques for creating a responsive UI design that adapts to all screen widths?

I created a UI by following some tutorials, but I'm facing an issue with responsiveness. When I resize the window, the UI doesn't look good or adjust properly. Here is the link to my fiddle: http://jsfiddle.net/X8HV9/1/show/ I am encountering tw ...

javascriptjquerycssjquery-mobile

HTML - Automated Navigation to Anchor Links

My website features a search box and various options. While the mobile version displays these prominently on the start page, once a user performs a search, the result page also includes the search box and options at the top. To streamline the user experie ...

javascripthtml

Position the Bootstrap Modal at the start of the designated DIV

When using a Bootstrap Modal to display larger versions of thumbnails in a photo gallery, there can be some challenges. The default behavior of Bootstrap is to position the modal at the top of the viewport, which may work fine in most cases. However, if th ...

javascriptjqueryhtmlcsstwitter-bootstrap