Images are not displaying properly after uploading html files

Recently, I created an HTML file that was functioning perfectly. However, when I uploaded it to a free domain host, some of the images failed to load properly. You can see the current state of the website here, and this is what it should actually look like here.

<!doctype html>
<html>
<body id="grad1">
<link rel="stylesheet" type="text/css" href="stylenav.css">
<div class="nav" align="right"><font size="4%"><!--NAV BAR-->
    <nav>
            <font size="3%"><a href="main.html" title="Home" class="navb" target="bottom" id="navb1"><b><img src="icons/home.png" height="30%" width="30%" class="invert"></b></a></font>
            <font size="3%"><a href="about.html" class="navb" target="bottom" id="navb2"><b><img src="icons/about.png" height="30%" width="30%" title="About" class="invert"></b></a></font>
            <font size="3%"><a href="gallery.html" class="navb" target="bottom" id="navb3"><b><img src="icons/gallery.png" height="30%" width="30%" title="Gallery" class="invert"></b></a></font>
            <font size="3%"><a href="favorites.html" class="navb" target="bottom" id="navb4"><b><img src="icons/favorites.png" height="30%" width="30%" title="Favorites" class="invert"></b></a></font>
            <font size="3%"><a href="hobbies.html" class="navb" target="bottom" id="navb5"><b><img src="icons/hobbies.svg" height="30%" width="30%" title="Hobbies" class="invert"></b></a></font>
        </font>
    </nav>
        <div align="left" style="margin-top: -5%; color: #eb4979;">
            <img src="images/logo.png" height="40%">
            <font size="10%"><b><span style=" position: absolute; margin-top: 10; text-shadow: 0 0 3px rgba(0, 0, 0, .8)">Dexter Silva</span></b></font>
        </div>
    </div>
</body>
</html>
htmlcssweberror-handling

Answer №1

Double-check that all of your files have been successfully uploaded. For example, I am unable to locate:

<img src="images/logo.png" height="40%">

images/logo.png on the server.

Additionally, make sure icons/favorites.png is located in images/icons/favorites.png for the images to be found.

Remember, some servers may be case sensitive so ensure your HTML references are correct.

Great job overall, keep pushing forward. A helpful hint: consider having your menu buttons open content within the same page rather than new pages. You can explore something like https://www.w3schools.com/howto/howto_js_curtain_menu.asp

Answer №2

To properly link to your images, ensure they are in a nested folder and add images/ to the path like this: src="images/icons/favorites.png" instead of using src="icons/favorites.png"

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

Creating a smooth image transition effect using CSS

I have successfully implemented a code that allows for crossfading between images when the mouse hovers over them. Now, I am looking to modify the behavior so that the crossfade effect happens only once when the mouse passes over the image. In other words ...

htmlcssfading

Perform time update every second

Is it feasible to have my timeupdate function run every second? (Using VUE CLI) @timeupdate="videoSecond" videoSecond(){ let Second = this.player.currentTime(); let CaptureList = this.capturesList; CaptureList.forEach(element => ...

javascripthtmlvue.js

The Divs pile one on top of the other

I am trying to position the second div below the first div instead of stacking on top of it and making the first div invisible. How can I achieve this? .shop { width: 100%; height: 1000px; background-color: #ffffff; position: relative; ...

htmlcss

What is the best way to access the CSS resources within the designated Area section of an MVC project?

I am experiencing difficulties accessing a CSS file located within the MVC AREA section. Here is the direct path to the CSS file. After attempting to troubleshoot with firebug, I received the following error message: The stylesheet was not loaded ...

cssasp.net-mvc

"Utilizing Bootstrap to create a space-saving table layout with an

Using Bootstrap on a table causes an unexpected empty column to appear on the right side (as shown in the screenshot). This issue is strange because it works fine with another table using the same setup... but this particular table seems to have a mind of ...

htmlcsstwitter-bootstraphtml-table

Change the Background of Your Body?

Here's the deal. I'm looking to create a cool effect where the background of the body slowly fades out and changes periodically in a loop using CSS and jQuery. Any suggestions on how I can make this happen? Appreciate your help! ...

javascriptjquerycssbackgrounddocument-body

Navigating up and down effortlessly using bootstrap

My webpage has a collapsible form located near the bottom, but when it's opened users must scroll down to see all of it. Is there a way to automatically scroll down when it's opened and then scroll back up when closed? Take a look at my code: & ...

javascriptjqueryhtmltwitter-bootstrap

How do you go about indenting a paragraph in CSS following the insertion of

My objective: To have all paragraphs indented except for the ones following the .firstCharacter class. In some sections of my page, I utilize a drop cap to start off the first paragraph. I have configured all subsequent paragraph tags to be indented using ...

css

The identical animation is experiencing delays in various directions

Having an issue with my image slider - when clicking on the previous image button, the animation takes longer compared to when clicking on the next image button, even though the animation duration is set to be the same for both. Any idea why this might be ...

javascriptjquerycss

Issue encountered with CSS-in-JS in a TypeScript, Webpack, React project: No matching overload found

My project involves Webpack, Typescript, and React Hooks with CSS-in-js for styling a div. I encountered an error while hovering over the style prop in the Menu component. I'm unsure about where to bind the CSSProperties. (JSX attribute) React.HTMLAtt ...

cssreactjstypescriptwebpack

The tale of a div's mysterious empty room

Once upon a time, in the world of HTML and CSS, there existed a lonely div. This lonely div longed for companionship, and one day, an inline img came to visit. They formed a bond and became good friends. But, no matter how hard the img tried, it couldn&apo ...

htmlcss

When using $.post along with serialize, the post variables and values fail to be sent

I am trying to use jQuery to post data to process.php and then display everything that occurs in the processing file. Currently, I have successfully loaded the file using ajax. For example, when I type echo "Hello world!"; it returns Hello world! Howeve ...

phpjqueryhtmlajax

Drop-down selection triggering horizontal auto-scroll

Within my div element, I have a table with dropdowns. The div is set up to be horizontally scrollable. To create the dropdown functionality, I utilized Harvesthq Chosen. Let me provide some context. In Image 1, you'll notice that I've scrolled ...

javascriptjqueryhtmlcssharvest

Switching the default image using jQuery upon click event

When I click on the image, I want to see a new image appear for just one second before returning to the default. I tried using setTimeout() function, but even after one second, I still see the same pressed.svg image. Here is my complete code: <html> ...

javascriptjqueryhtml

Retrieving the information verified in the database

public function actionEditmul($id) { $sql1="SELECT * FROM category_product INNER JOIN category ON category_product.cat_id=category.cat_id WHERE category_product.product_id=$id"; $editcat=Yii::$app->db->createCommand($sql1)->quer ...

phphtmlyii

Choosing between JavaScript and Handlebars.js depends on the specific needs

Can anyone explain the advantages of utilizing Handlebars.js or similar libraries over solely relying on JavaScript? Thus far, I haven't come across any functionality in Handlebars that cannot be achieved with just pure JavaScript. ...

javascripthtmlcssnode.jshandlebars.js

Ensuring Bootstrap4 columns have a minimum height within a row

How can I adjust the right column in this image layout to crop the height and match it with the left column, aligning the bottoms of the images? This customization should only apply to lg+ screen sizes. An ideal solution using Bootstrap 4 without jQuery i ...

cssbootstrap-4

Is there a way to ajax just specific HTML table rows instead of transmitting all the form inputs?

For weeks, I've been struggling to use AJAX POST with a JSP script to update my HTML table rows without success. Can anyone provide guidance on this? Below is what I have attempted so far. window.addEventListener("DOMContentLoaded", function () { ...

javascriptjqueryhtmlajaxjsp

Maintaining the size and proportions of an object as it

I'm currently learning the ins and outs of HTML/CSS while working on a navigation bar. However, I've run into an issue with scaling. Here is the website in full-screen mode.https://i.sstatic.net/kCFqn.png Here is the website when it's sligh ...

htmlcss

What methods does a web browser use to distinguish between HTML5 and HTML4?

What methods can a Web browser use to distinguish between HTML5 and HTML4? ...

htmlbrowserhtml4