Debugging needed for HTML Wamp

After successfully building a page, everything seemed to be working perfectly fine as shown below:

However, when I copied my folder to C:\wamp\www\myFolder and accessed it through localhost using WAMP Server, the display looked like this:

The issue is that the Style Sheets are not applied correctly and the Java Script is not functioning.

Observe the following:

  • Where there are green dots, the images are loading properly...
  • Where there are pink dots, the images are not loading at all
  • In the red section, there are 5 boxes with javascript rollover images that load but do not work when hovered over
  • In the top right corner with yellow boxes, the links, textboxes, and buttons have CSS styles that are not rendering correctly

WHAT'S GOING ON?

htmlcsswampwampserver

Answer №1

It's possible that your resources (css and js) are being loaded incorrectly.

To troubleshoot, try viewing the page source in Firefox and clicking on the css link. If it doesn't take you to the css file, then you've found the issue - the path to your assets is incorrect.

Answer №2

Seems like the images are not appearing where they should be.

When using WAMP, the default directory is usually C:\www. If your CSS/HTML files reference images as "/images/example.png", Apache will search for the file in C:\www\images\

To fix this, you can either include the directory "/myFolder/images/" in the image URL or make the image references relative to the CSS file.

For example, if your CSS file is located at C:\www\myFolder and there is an images folder within it, the image paths inside the CSS file should be declared like this:

url('images/example.png');

Make sure to remove the trailing slash so that the path is relative to the CSS file rather than the root directory (C:\www).

I hope this explanation clears things up for you!

Answer №3

Initially, the links were as follows:

href=".\photos\photo.png"

After making a simple adjustment, they now look like this:

href=".\photos/photo.png"

It turns out that the server was functioning correctly all along...

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

Setting the second tab as the primary active tab

I am currently working on a script that is well-known, and everything is functioning perfectly. However, I want to change it so that when the page is first opened, it displays the second tab instead of the first one (the first tab being a mail compose tab ...

javascriptjqueryhtmlcss

Bypass the save as dialogue box and initiate automatic file download without interruption

Working on an Angular 1 web application, I am utilizing the HTML download Attribute. Using the code snippet below: <a href="/images/myw3schoolsimage.jpg" download>, I am enabling users to download presented data as an Excel spreadsheet. My goal i ...

htmldownload

Unique button for custom "CODE" in Froala

Looking to create a custom button with functionality similar to bold (B) but for source code (Src). I have attempted the following, however it is not fully functional: $("#elm1").editable({ inlineMode: false, minHeight: 300, buttons: ["src"], c ...

javascripthtmlwysiwyg

Validate and submit form using mootools when a link is clicked

Is there a way to validate my form and submit it when a link is clicked? I have included my code below: new Element('a',{ 'html': "To cart", 'class': 'shop ...

htmleventsmootoolsanchorform-submit

Issues with JavaScript scripts functionality on my live server

Hey everyone, I'm new to this community and having some trouble with my index.html file. Everything works fine except for one script that only runs when I open the file directly with live server in VSCode. Can someone help me out? The script causing i ...

javascripthtmlcss

I'm having an issue where my footer is getting cut off when I resize the browser and start side scrolling. Can

I designed a webpage with a footer that contains another div holding centered content. The footer is supposed to span the entire width, while the inner content div is set to 960px with a margin auto to center it. <footer> <div class="footer-in ...

csshtmllayout

Issues arise when attempting to resubmit a PHP+JQuery+AJAX form with new values

I'm having trouble understanding why my form isn't refreshing after changing the values. Let me explain further, I have a password recovery form where users enter their email address. The form is processed in PHP using AJAX and displays a valida ...

phpjqueryhtmlajaxforms

Customizing hover color with tailwind CSS

How can I change the color of an icon on mouseover using Tailwind CSS? I have tried to go from this https://i.sstatic.net/ObW6C.png to this https://i.sstatic.net/Tagp3.png, but it's not working. .btn { @apply agt-h-10 agt-w-10 agt-bg-zinc-100 agt- ...

cssangulartailwind-cssstenciljs

Utilizing jQuery to Retrieve Column and Row Headers of a Selected Cell

I am currently working on a JavaFX project that includes a WebView. The HTML code is being generated using a StringBuilder. My goal is to retrieve the column and row headers of the selected cell. This information is necessary for my Java code. You can ...

javascriptjqueryhtmldatatable

Ways to update font color using bootstrap-cue

Looking for a button with white text on a dark-blue background Find the code in xxx.vue <b-dropdown text="user" right variant="blue" class="signout-button"> <b-dropdown-item @click="toMain()">sign out</b-dropdown-item> </b-dro ...

cssvue.jsbootstrap-4

Why doesn't the element I'm clicking return as expected?

Below is the code provided <!DOCTYPE html> <html> <body> <p id="demo">Demo Element</p> <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script> $('#demo' ...

javascriptjqueryhtml

Utilize various addMethods on a field in the event a radio button is chosen through the jQuery validator plugin

When a specific radio button value is selected, I need to apply different methods to a single field. If "true" is selected, method X should be applied. If "false" is selected, method Y should be used on the same field. I attempted to achieve this with a ...

javascriptjqueryhtmljquery-validate

Attempting to create a hexagon using 127 divisions results in a gap

I am faced with a challenge of arranging 127 divs to form a hexagon shape similar to the example below: for (i = 1; i <= 127; i++) { var div = document.createElement('div'); document.getElementsByTagName('body')[0].appendChild( ...

css

Is it possible to customize the appearance of ordered list numbers using javascript?

Is it possible to change the color of a specific line number in an ordered list using JavaScript? I am familiar with CSS styling such as li::marker, but curious about altering individual list item markers dynamically through JavaScript. How can this be ach ...

javascripthtmlcsscolorshtml-lists

Three divs aligned horizontally

Can anyone help me create a layout with a left menu, right menu, and a middle section with page content arranged like this example: I am attempting to build this layout using Bootstrap 4 for responsive design, but I am struggling to get all three menus to ...

htmlcsstwitter-bootstrapbootstrap-4

Spinner loading animation not showing correctly

Even though it shows up when I hover over and inspect, the image remains completely invisible. It's saved in the same folder and I believe all the file names are correct, but for some reason, it's just not working as expected. Any help would be g ...

javascripthtmlcssajax

Is it possible to modify the color of an input tag in a form when it is selected?

I'm currently developing a contact form for my website with bootstrap. The form automatically scrolls to any unfilled required field when the user clicks submit, and highlights it with a blue border. However, I want the border color to change to red i ...

htmlcssformscolorsbootstrap-4

What are the indicators of JSON in a response?

When using ReactJS to make a fetch request to an API, the JSON body response includes the following: { "place": <a href=\"http:\/\/place.com\/ search?q=%23MILKYDOG\" target=\"_blank\">#milkydog<&b ...

html

The hover function stops working once the dropdown class has been removed

I am currently experimenting with a bootstrap template. In the navigation bar, there is an option for "Blog" and "Test". For the "Test" button, I decided to remove the li class="dropdown " because I wanted to create a button that changes color on hover si ...

htmlcss

Complete guide on modifying CSS with Selenium (Includes downloadable Source Code)

I am looking to switch the css styling of a website using Python and Selenium. My initial step was to retrieve the current CSS value. Now, I aim to alter this css value. The Python code output is as follows: 0px 0px 0px 270px How can I change it from 0 ...

javascriptpythonhtmlcssselenium