Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Web Design Troubleshooting Guide

Getting your web site to look right can sometimes be a hair-pulling experience. Even for professional web designers! I can only imagine how frustrated many newbies can get. Let me share with you some of the common problems in designing a well-functioning web site. If you haven't made these mistakes yet - trust me: you will! Keep this troubleshooting guide handy for when you need it.

1. Missing images on the page
2. Image loads very slowly
3. Image looks distorted
4. Broken links
5. Text is missing on the page
6. Visitors can't see your fancy fonts
7. Too much horizontal scrolling required
8. The table is wider than specified
9. Web page displays old links and images
10. Background doesn't show
11. Can't access your home page

1. Problem: Missing images on the page

Solution: there are three things that might cause this problem. You have either forgotten to upload the image to your web server, didn't link to it correctly, or the graphic is in invalid format.

1. Remember, you need to upload all the graphics that you are using on your web page, just like any other file. So if you have a "services.html" page that contains "staff.jpg" graphic, you need to upload both "services.html" and "staff.jpg" to your web server.

2. You also need to reference that image correctly. For this, you need to understand a little bit about files, folders, and directories. Basically, a file is a document. A folder (or a directory) is a collection of files.

You might have a directory on your web site called "images". Inside it you might have the "staff.jpg", "logo.jpg", and other files.

Now, here is the trick: if your HTML file is located in the same folder with the graphic it contains, then here is how you refer to that image:

<img src="graphic.jpg">

So far, simple, right?

But let's say that your HTML file is located in the main directory, while the graphic file is located in the sub-directory. For example, "services.html" is located in the root directory of your web site so that if you type www.yoursite.com/services.html in your browser location bar, you will see it.

And let's say that you placed a graphic used on that page into a sub-directory called "images", so that when you type www.yoursite.com/images/graphic.jpg into your browser location bar, you will see that image. So how do you refer to that graphic from your "services.html" page? Here is how:

<img src="images/graphic.jpg">

All I did was put the sub-directory (or folder) name followed by a forward slash before the graphic name.

Finally, what if you put an HTML page into a sub-directory, but leave the image in the main (root) directory? For example, your "services.html" is located in a sub-directory called "pages". And the graphic used on it, "staff.jpg", is placed in the main directory, so that when you type this address into your browser location bar, you will see it:


How do you refer to this graphic on your "services.html" page? You use the "previous directory" notation like this:

<img src="../../staff.jpg">

The browser will then know, that in order to find that graphic it needs to look in one directory below.

If you are having trouble understanding the above notation, use absolute image references. For example:

<img src="http://www.yoursite.com/staff.jpg">

Make sure you know where you placed your graphic (which folder) and refer to it as if you were accessing it from your web browser. That's it!

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro

Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2023 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268