Web Design Troubleshooting Guide
By Milana Leshinsky
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:
www.yoursite.com/staff.jpg
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!
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
