 HTML Local Images - Not displaying |
  |
| Snipely |
 Dec 31 2015, 02:37 PM
Post
#1
|
|
Group: Members Posts: 4 Joined: 31-December 15 Member No.: 23,869  |
Hi there - I'm a novice web designer in the process of building one of my first websites as a learning base. I am working off of a Mac computer, and using Text Wrangler and HTML + CSS for this.
I ran into a problem today I can't seem to figure out, and wound up here. As of yesterday, I could insert local images from my image folder into my code - and they worked just fine (and showed up) when the page was displayed in the browser. I haven't moved or renamed any of the images, nor do I think I have I changed anything with the code, but now all of a sudden my images aren't working and appear as blue question marks instead of the images themselves. This is the same in both browsers I have tried using to display code (Safari and Firefox) and I can't figure out what's wrong. I understand that local images won't display on computers other than the computer hosting these local images, (mine), but as the site isn't live yet that isn't an issue, I just need them to show locally so I can lay out the page properly. I pasted my code work below, in case there's a glaring problem. Thank you in advance for any help! <!doctype html> <html> <head> <title>The Round Table</title> <meta charset="utf-8" /> <meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style type="text/css"> body { margin:0; } .topbar { background-color:#BB1919; width:100%; height:45px; } .center { text-align:center; } ul{ padding: 0; list-style: none; background: #BB1919; } ul li{ display: inline-block; position: relative; line-height: 21px; text-align: left; } ul li a{ display: block; padding: 8px 25px; color: #333; text-decoration: none; } ul li a:hover{ color: #fff; background: #black; } ul li ul.dropdown{ min-width: 125px; /* Width of the dropdown */ background: #BB1919; display: none; position: absolute; z-index: 999; left: 0; } ul li:hover ul.dropdown{ display: block; /* Display dropdown */ } ul li ul.dropdown li{ display: block; } </style> </head> <body> <div id="container"> <div class="topbar"> </div> <div class="center"> <img src="images/logo.png" </img> <img src="images/RTquoteupdate.png" </img> <div class="topbar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li> <a href="#">Articles ▾</a> <ul class="dropdown"> <li><a href="#">Latest Article</a></li> <li><a href="#">All Articles</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </div> </div> </div> </div> </body> </html> |
  |
 
|
| pandy |
Dec 31 2015, 02:58 PM
Post
#2
|
|
🌟Computer says no🌟  Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
You must have changed the markup. What you have now wouldn't work.
 You have this. CODE <img src="images/logo.png" ^^^ </img> ^^^^^^ <img src="images/RTquoteupdate.png" ^^^ </img> ^^^^^^ IMG has no closing tag. Well, in XHTML it has a closing slash, but that's a dead horse. You've also forgotten the closing '>' in the start tag. You want it like this. CODE <img src="images/logo.png" width="" height="" alt=""> It's a good idea to use the width and height attributes (but with values of course). The alt attribute is required. This doesn't affect if the image shows or not though. Just took the opportunity to add some tips.  |
|
|
|
| Snipely |
Dec 31 2015, 03:37 PM
Post
#3
|
|
Group: Members Posts: 4 Joined: 31-December 15 Member No.: 23,869 |
QUOTE(pandy @ Dec 31 2015, 03:58 PM)  You must have changed the markup. What you have now wouldn't work. You have this. CODE <img src="images/logo.png" ^^^ </img> ^^^^^^ <img src="images/RTquoteupdate.png" ^^^ </img> ^^^^^^ IMG has no closing tag. Well, in XHTML it has a closing slash, but that's a dead horse. You've also forgotten the closing '>' in the start tag. You want it like this. CODE <img src="images/logo.png" width="" height="" alt=""> It's a good idea to use the width and height attributes (but with values of course). The alt attribute is required. This doesn't affect if the image shows or not though. Just took the opportunity to add some tips. I appreciate the tips, and the help, thank you. So now I have; CODE <img src="images/logo.png" width="20px" height="20px" alt="Text Alternative"> <img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative"> And still two blue question marks.  Have I still got something wrong with the image tags, or is this a matter of something else in my computer or with the file path being messed up? I still can't get the images to show. Also, can I bother you and ask you a few questions? Would it just be better to upload these images somewhere and work like that versus using local files? If that was a 'yes', do you have a place you would recommend uploading the files? I'm sorry, I'm mostly self taught and still new to the coding scene. Thank you again. |
|
|
|
| Christian J |
Dec 31 2015, 04:37 PM
Post
#4
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(Snipely @ Dec 31 2015, 09:37 PM) So now I have; CODE <img src="images/logo.png" width="20px" height="20px" alt="Text Alternative"> <img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative"> And still two blue question marks. Is the HTML file in the same directory as the "images" directory? Have you renamed the latter, or the images themselves? QUOTE Have I still got something wrong with the image tags Yes, the WIDTH and HEIGHT attributes don't use px units in HTML (only in CSS). That shouldn't prevent the images from showing up, though. QUOTE Would it just be better to upload these images somewhere and work like that versus using local files? I say "no" on behalf of pandy.  |
|
|
|
| Snipely |
Dec 31 2015, 05:12 PM
Post
#5
|
|
Group: Members Posts: 4 Joined: 31-December 15 Member No.: 23,869 |
QUOTE(Christian J @ Dec 31 2015, 05:37 PM) QUOTE(Snipely @ Dec 31 2015, 09:37 PM) So now I have; CODE <img src="images/logo.png" width="20px" height="20px" alt="Text Alternative"> <img src="images/RTquoteupdate.png" width="20px" height="20px" alt="Text Alternative"> And still two blue question marks. Is the HTML file in the same directory as the "images" directory? Have you renamed the latter, or the images themselves? QUOTE Have I still got something wrong with the image tags Yes, the WIDTH and HEIGHT attributes don't use px units in HTML (only in CSS). That shouldn't prevent the images from showing up, though. QUOTE Would it just be better to upload these images somewhere and work like that versus using local files? I say "no" on behalf of pandy. I am using both HTML + CSS... still no to pixel units? (And since I've never used other units... what should I use?) Ok, so no uploads, local files are good. No, I haven't changed the names of any of the images, or of the folder they are stored in. As for the directory - My folders run like this; Desktop > Websites (Folder) > Images (Folder) and Desktop > Websites (Folder) > Saved Code (Folder) So the code is saved in one folder and the images are saved in the other folder... is that what you meant? Thank you!  This post has been edited by Snipely: Dec 31 2015, 05:13 PM |
|
|
|
| Christian J |
Dec 31 2015, 06:51 PM
Post
#6
|
|
. Group: WDG Moderators Posts: 9,653 Joined: 10-August 06 Member No.: 7 |
QUOTE(Snipely @ Dec 31 2015, 11:12 PM) I am using both HTML + CSS... still no to pixel units? In CSS you need the px unit, but not in HTML where it's already implied (only if you use percent in HTML do you need a % unit). QUOTE (And since I've never used other units... what should I use?) For images px is the normal unit in CSS. Usually it makes sense to resize the image file to the same dimensions that you specify in the HTML or CSS, that way both file download time and page rendering speed become optimal. QUOTE As for the directory - My folders run like this; Desktop > Websites (Folder) > Images (Folder) and Desktop > Websites (Folder) > Saved Code (Folder) So the code is saved in one folder and the images are saved in the other folder... is that what you meant? That sounds like the code files are in a folder parallell to the one with the images. Then the URL must go up one step with "../" before going into the image folder. This can be done like this: CODE src="../images/logo.png" See also http://htmlhelp.com/faq/html/basics.html#relative-url |
|
|
|
| pandy |
Jan 1 2016, 12:46 AM
Post
#7
|
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 Joined: 9-August 06 Member No.: 6 |
Regarding separating what's CSS and what's HTML, it can be a little confusing at first, especially if you use inline CSS (the style attribute).
If you have something like this (and God forbid you actually use this!)... CODE <img width="200" style="height: 500px" alt="My guinea pig Sue Ellen"> ...everything but 'height: 200px' is HTML and must use HTML syntax. That is, not even the 'style=""' is CSS. 'style' is a HTML attribute and the equal sign and quotes belong to it. Only its actual value is CSS and must use CSS syntax. <img width="200" style="height: 500px" alt="My guinea pig Sue Ellen"> You may think using the width and height attributes instead of using CSS is old school, but it actually helps the browser when rendering the page. If you have a page with text and many images the text will load first and the images fill in as they load. If you leave width and height out you may see how the page rearrange itself as the images load one after the other, especially if the images are large (kB), the server is a little slow or if you are on a slow connection. Locally you won't see it as everything loads instantly. If you use width and height the browser reserves space for the images from the start, and things don't move around as the images load. Much more pleasant looking. |
|
|
|
| Snipely |
Jan 4 2016, 01:41 PM
Post
#8
|
|
Group: Members Posts: 4 Joined: 31-December 15 Member No.: 23,869 |
CODE src="../images/logo.png" Using this format fixed the images on the main website I'm building... just not on the other. I suspect I have an issue somewhere else in the files, the images I'm using, or in the code, so I'm going to spend some time going over everything and double checking myself. Thank you both for taking the time to explain everything, I really appreciate the help, and if I run into another problem, I'll definitely be coming back here.  |
|
|
|
|
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
|
Lo-Fi Version | Time is now: 19th April 2024 - 04:53 PM |
Invision Power Board
© 2024 IPS, Inc.
Licensed to: HTMLHelp.com, LLC