|
HTML - Images Not Displaying In Browser
I am having problems viewing any images on the browser and don't know why so I am starting from scratch. I have placed an image titled "jesus.jpg" into a folder named "church" on my C drive, the relative path is
C:/mike'sdocs/websites/church just to be sure I checked the image's properties and it confirms the image is a jpg file, I copied this image into Apache's htdocs folder where I placed the index file and this is all I am getting, the pic itself does not show, all I am seeing where the image should be is a rectangular bordered box on a transparent background with a small icon of a dog-eared page with 3 colored tiny symbols in it, what could be wrong here please? This is not an Apache issue, I was getting this same problem before just using Firefox's browser and I was told to install a webserver which is why I installed apache which is working fine as I can see any changes made to the text on my index page in Notepad. The code I am using is: <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> <img src="jesus.jpg" width="144" height="50" /> </body> </html> Similar TutorialsHello all, I am not understanding the coding for the relative path for my image from the index.html page. I have an image which I gave the name "jesus.jpg" and this image is located in my pc in the folders c://mike'sdocs/websites/church/churchimages/jesus.jpg The index.html file is in the "church" folder and the image itself "jesus.jpg" is in the "churchimages" folder. so the code I am using is <img src="churchimages/jesus.jpg" /> but it does not show in Firefox's browser, help please? I tried other images in that same folder but same result, what could be wrong here please? Hello! Please ceck: http://htlounge.net/testing Near to logo is a adsense banner.. 468x60. In IE and Opera is displaying ok! But in Firefox not.. It is a white space! What is the problem! Thank you! I'm making a webpage that has a photo gallery on it. I found a very nice photo gallery to use at cssplay.co.uk. The gallery uses a Div in order to work. I nested the div inside of a table so that I could create the look that I wanted to. However, the footer of my webpage won't show up, no matter what I try to do. Does anyone have any suggestion? Thanks P.S. Sorry I had to take out some of the code so that it would post. here is the code: HTML Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Galleries</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="content-type" content="en" />
<title>Galleries Home</title>
<link href="../../CSS/Table_Header_Style_Sheet.css" rel="stylesheet" type="text/css" />
<link href="../../CSS/Marquee Style Sheet.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../JS/ie5.js"></script>
<script type="text/javascript" src="../../JS/DropMenu1.js"> </script>
<!--THE CODE FOR THE PHOTO GALLERY BELOW IS THANKS TO STU NICHOLLS AT [url]http://www.cssplay.co.uk/[/url] -->
<style type="text/css">
body {text-align:center; font-family: tahoma; arial, sans-serif; font-size:76%; letter-spacing:0.05em;}
table.dm1 { background: url( "http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
/* ================================================================
This copyright notice must be untouched at all times.
The original version of this stylesheet and the associated (x)html
is available at [url]http://www.cssplay.co.uk/menu/lightbox.html[/url]
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
/* common styling */
a {color:#000;}
a:hover {text-decoration:none;}
/* slides styling */
.photo {width:635px; text-align:left; position:relative; margin:0 auto;}
.photo ul.topic {padding:0; margin:0; list-style:none; width:635px; height:auto; position:relative; z-index:10;}
.photo ul.topic li {display:block; width:125px; height:31px; float:left;}
.photo ul.topic li a.set {display:block; font-size:11px; width:124px; height:30px; text-align:center; line-height:30px; color:#000; text-decoration:none; border:1px solid #fff; border-width:1px 1px 0 0; background:#ccc; font-family:verdana, arial, sans-serif;}
.photo ul.topic li a ul,
.photo ul.topic li ul
{display:none;}
.photo ul.topic li.active a
{color:#000; background:#bbb;}
.photo ul.topic li a:hover,
.photo ul.topic li:hover a
{color:#fff; background:#aaa;}
.photo ul.topic li.active ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #bbb; z-index:1;}
.photo ul.topic li a:hover ul,
.photo ul.topic li:hover ul
{display:block; position:absolute; left:0; top:31px; list-style:none; padding:0; margin:0; height:375px; background:#ddd; width:464px; padding:40px 60px; border:20px solid #aaa; z-index:100;}
.photo ul.topic li ul li
{display:inline; width:112px; height:87px; float:left; border:1px solid #fff; margin:1px;}
.photo ul.topic li ul li a
{display:block; width:110px; height:85px; cursor:default; float:left; text-decoration:none; background:#444; border:1px solid #888;}
.photo ul.topic li ul li a img
{display:block; width:100px; height:75px; border:5px solid #eee;}
.photo ul.topic li a:hover ul li a:hover,
.photo ul.topic li:hover ul li a:hover
{white-space:normal; position:relative;}
.photo ul.topic li a:hover ul li a:hover img,
.photo ul.topic li:hover ul li a:hover img
{position:absolute; left:-50px; top:-32px; width:200px; height:150px; border-color:#fff;}
.table {
height: 100%;
width: 1000px;
}
table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
body,html {
margin:0;
padding:0;
height:100%;
}
table.background { background: url("http://i1131.photobucket.com/albums/m541/Mitch_Guzman/JetDragsterLogoWatermark2-1-1.png?t=1306259715") no-repeat; background-position:center }
a:link {
color: #94D4FF;
text-decoration:none;
}
a:hover{
color:#FF0;
}
a.header:link {
background:none;
color: #00C;
}
a.header:hover {color:#FF0; background:none; }
<!--This allows the color of the links to change when you hover over them a:visited {
color: #94D4FF;
}
-->
</style>
</head>
<body background="../../Images/CarbonFiber.jpg" link="#94D4FF" vlink="#94D4FF" alink="#94D4FF">
<div id="header" align="center">
<img src="../../Images/jdp.pr.erau.edu_Header.jpg" width="1000" height="95" />
<table background="../../Images/Table header Background.jpg" align="center" border="none" height="50" width="1000" cellpadding="0" cellspacing="0">
<tr align="center">
<th>
<a href="../Home/Home Page.htm" class="header">Home Page</a>
</th>
<th>
<a href="../Research/Research home.htm" class="header">Research</a>
</th>
<th>
<a href="Galleries Home.htm" class="header">Galleries</a>
</th>
<th>
<a href="../JDP Calendar/JDP_Calendar.htm" class="header">Calendar</a>
</th>
<th>
<a href="../Contact Us/Contact Us.htm" class="header">Contact Us</a>
</th>
</tr>
</table>
</div>
<table class="background" border="0" bordercolor="#0000FF" align="center" style="width: 79.25%;" cellspacing="10" height="750">
<tr>
<td align="center" valign="top">
<div class="photo">
<ul class="topic">
<li><a class="set" href="#Portraits">Portraits<!--[if gte IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="lbox/portrait1.jpg"><img src="http://www.cssplay.co.uk/menu/lbox/portrait1a.jpg" alt="" title="" /></a></li>
<ul>
<li><a href="#bird1"><img src="http://www.cssplay.co.uk/menu/lbox/bird1.jpg" alt="" title="" /></a></li>
<li><a href="#bird2"><img src="lbox/bird2.jpg" alt="" title="" /></a></li>
<li><a href="#bird3"><img src="lbox/bird3.jpg" alt="" title="" /></a></li>
<li><a href="#bird4"><img src="lbox/bird4.jpg" alt="" title="" /></a></li>
<li><a href="#bird5"><img src="lbox/bird5.jpg" alt="" title="" /></a></li>
<li><a href="#bird6"><img src="lbox/bird6.jpg" alt="" title="" /></a></li>
<li><a href="#bird7"><img src="lbox/bird7.jpg" alt="" title="" /></a></li>
<li><a href="#bird8"><img src="lbox/bird8.jpg" alt="" title="" /></a></li>
<li><a href="#bird9"><img src="lbox/bird9.jpg" alt="" title="" /></a></li>
<li><a href="#bird10"><img src="lbox/bird10.jpg" alt="" title="" /></a></li>
<li><a href="#bird11"><img src="lbox/bird11.jpg" alt="" title="" /></a></li>
<li><a href="#bird12"><img src="lbox/bird12.jpg" alt="" title="" /></a></li>
<li><a href="#bird13"><img src="lbox/bird13.jpg" alt="" title="" /></a></li>
<li><a href="#bird14"><img src="lbox/bird14.jpg" alt="" title="" /></a></li>
<li><a href="#bird15"><img src="lbox/bird15.jpg" alt="" title="" /></a></li>
<li><a href="#bird16"><img src="lbox/bird16.jpg" alt="" title="" /></a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<br class="clear" />
</div>
[color="Red"]This is the part I'm not sure about.[/color]
</td>
</tr>
<tr style="background-color:transparent; vertical-align:text-top" align="center" >
<td colspan="3" style="font-size:12px" valign="top">
<a href="../../Home/Home Page.htm">Home</a> |
<a href="../../Research/Research home.htm">Research</a> |
<a href="../../Galleries/Galleries Home.htm">Galleries</a> |
<a href="../../Calendar/Calendar.htm">Calendar</a> |
<a href="../../Contact Us/Contact Us.htm">Contact Us</a>
<br />
<p>Copyright © 2011 Embry Riddle Jet Dragster Project <br />
Embry-Riddle, Prescott, AZ. All Rights Reserved <br />
Designed by: <a href="mailto:mguzman9294@gmail.com">Mitch Guzman</a> </p>
</td>
</tr>
<div id="ads"></div>
</table>
</body>
</html>
Hi all, just came here to ask why is it that when I try to open my HTML file in Internet Explorer, which I created in note pad, it comes up with the code I typed it rather than displaying the actual page? Like for example I typed in this... <html> <head><title>Interspecies Conflict Videos</title></head> <body> <div align="center"> <img src="web logo.jpg" alt="Web Header" /> </div> </body> </html> And all I got was the code you see above you, there was no picture or anything. I need to display 40-50 images one-by-one using forward and backward buttons. It doesn't seem too difficult, but I'm pretty lost. Please help! Howdy all! I recently developed the website http://www.dailytask.co.uk. I cant seem to get IE to show my images (regardless of format) within the tables ive used to put together its basic layout. Work okay in Firefox, Chrome and the rest. Could someone take a peak at the code for me and give me a shout out about what i am doing wrong here ? Thanks! Adil I need to display TIFF images in a browser. I would prefer not to have to download and install ActiveX controls to the client to accomplish this. All of the clients are Windows 2000 or XP and use IE 6. Is this possible and if so any tips or pointers on where to start? Hi, Im a bit of an amateur and for some reason I cant get an image to display in firefox, but its fine in explorer.... Does anyone know why this might be? Thanks Aly_ve Hello, I'm not sure if what I'm asking is possible using html, but I'm going to ask anyway... I'm trying to figure out how to have a sidebar randomly cycle through a series of images each time the page is loaded/refreshed. I'd like the same image displayed at the top and bottom of my sidebar, one image each at the top and bottom of my menu list. But I want to make sure that the image displayed at top and bottom are the same one. Here's my current version of the site: http://home.comcast.net/~blayne81/l5rrpgweb/ You can see the menu on the left side of the page and the two images at the top and bottom of the menu. I have another eight or so images I'd like it to display randomly or cycle through in order (it really doesn't matter which), whenever the page loads/reloads so I don't have to manually pick which image appears every page I write, the code will do that for me. Thanks for your help, Brienprime As I said in my introduction I have been dragged out of to produce 2 websites which is not my usual area of IT business. I have used MS Visual Web Developer 2008/IIS because that is what I have and I am having trouble with a small piece of code: <table> <tr> <td> <img src="Images/RSAshed.jpg" alt="Image not found" /> <img src="images/RSAstore.jpg" alt="Image not found" /> <img src="images/RSAwarehouse.jpg" alt="Image not found" /> </td> </tr> </table> With IIS Firefox displays 3 images horizontally across the page, but when this is uploaded to the Namesco host I get: http://www.mohairmarketing.org.uk/page4.html i.e. one image and two of 'image not found'. We have a Mandriva Linux file server so I have loaded the pages into Apache and get the same problem. Can anyone tell me what is the problem please. It seems that it may be wise to transfer production to Linux. I have tried Amaya but my eyesight is pretty poor and a cannot read the very faint coloured text. It would be preferable if the code was changed so that it works on all platforms. Thank you in advance. Malcolm my website is here crafthouse.net.au the offending directory is crafthouse.net.au/bonnie.php I have written this site with notepad. I use htm, css, and javascript routines from either freeware sites or other sources The site displays galleries of images (an amateur interest of mine) Each gallery page has a text preamble with thumbs below. Clicking on a thumb lays a transparent layer over the parent and a larger version of the image slides open centred on the page - looks very sweet (the routine is freeware - I adapted it to suit). Since doing this I've seen it a few times on other sites (don't you hate that!) ALL galleries have been working well. Today I decided to add a 1px border to the images in one gallery - I used a newly acquired version of CS4. PS is the only thing unique to this problem - I have updated from CS3 - but surely an image is an image is an image. When I uploaded the new versions of the images the images don't open. I have replaced them with origanals from D: to no avail? I have used colour space sRGB and Adobe 1998 - just in case? I have been in contact with my host and they say it's coding - but it's NOT! I have redone the page with a template from another working page. The rewtritten page displays well (of course) but the images still don't open. I have replaced the folder on the server in case the folder has problem (now I'm sounding like a jerk) Permissions are all correct. I've used WS Ftp Pro and FZ - the image folder on the server is black - the others are not! I wonder what this is about? Can anyone shed any light on this? I don't understand this at all. Hello All, I cant seem to lock a form and images in a browser, I have all center and when it opens it remains centered but when I shrink the browser window the images/form moves... My CSS is <style type="text/css"> <!-- body { background-image: url(); margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin: 0; padding: 0; } --> </style></head> <style type="text/css"> <!-- #centerDIV0 { width: 100%; text-align: justify; overflow: hidden; position: absolute; margin: 0px; padding: 0px; left: 0px; top: 0px; right: 0px; bottom: 0px; visibility: visible; background-image: url(CS_bkgd.jpg); background-repeat: repeat; } #centerDIVX { text-align: center; overflow: hidden; position: absolute; margin: 0px; padding: 0px; vertical-align: middle; z-index: 2; left: 0px; top: 0px; right: 0px; bottom: 0px; width: 100%; } #centerDIVZ { z-index: 2; overflow: hidden; position: absolute; font-family: Arial, Helvetica, sans-serif; font-size: 14px; text-align: center; vertical-align: middle; left: 0px; top: 0px; right: 0px; bottom: 0px; margin-top: 380px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; visibility: visible; padding-top: 0px; padding-bottom: 0px; padding-left: -300px; } --> </style> And Html is... <body> <div id = "centerDIV0"> </div> <div id="centerDIVX"><img src="CS_bkgd.gif"/></div> <div id="centerDIVZ" bgproperties="fixed"> <form action="mailto:tastetation301@yahoo.com" method="post" enctype="text/plain" onsubmit="location.href='thanks.html'"> <p><br/> <strong>Name:</strong> <input type="text" STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> <br/> <strong>Email: </strong><input type="text"STYLE="color: #FFFFFF; font-family: Verdana; font-size: 12px; background-color: #000000;" size="0" maxlength="50" align="justify"/> </p> <input type="submit" value="Submit"/><input type="reset" value="Reset"> </form> </div> </body> </html> THANKS FOR YOUR ASSISTANCE!!!! I'm having some trouble with my site. Some images at the bottom are shifting when using IE. On Safari, it looks fine. Just wondering if anyone can help... Here is the site: http://www.ballermag.com/ and here is the code: <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=40" target="_blank"><img src="img/duzzblog.jpg" alt="Duzzyduzz" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><a href="http://www.ballermag.com/blog/?cat=21" target="_blank"><img src="img/jessblog.jpg" alt="J-Dimes" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> </tr> </table></td> <td><table border="0" cellspacing="0" cellpadding="3"> <tr> <td width="100" valign="top"><img src="img/what.gif" alt="Who's next?" width="100" height="66" hspace="5" align="left" border="0" /></td> <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="2"> <tr> <td valign="top" nowrap="nowrap" class="video01"></td> </tr> <tr> <td valign="top"><span class="style4">■■■■■■■■</span></td> </tr> </table></td> So I know if you use "%" to define your height and width with tables that it allows you the table to resize based upon a users browser size. My question is how can you do this with images? I tried setting my height and width for my image using "%" but then my image just becomes overly stretched. My professor said that I should create a table and than place the image within the table, and then set the table height and width using "%". The code below is what I tried. It didn't work though. Any ideas on how to do this? Code: <body>
<table width="100%" height="100%" border="0">
<tr>
<td height="100%" width="100%"><p align="center"><img src="images/Banner.png" align="center" class="source-image" /></p></td>
</tr>
</table>
</body>
Thank you for your help! How do I stop images/pictures from moving when a browser window is resized? The images/pictures move underneath the navigation buttons when it is resized..........Thank You Here is the website. www.prasse.com Hello, I've created a table with two columns, the second column is fixed width at 64px and contains a div, the div has a border and contains some text, the text renders to larger than 64px. This is a cut down version of a more complex page to illustrate the problem so just changing it to divs or some such wont help. In IE6 and FF2 the div border automatically stretches to contain the text, in IE7 the div is set to 64px and stays there, I don't think this is the correct behaviour, but I can't seem to find another mention of this problem, could anyone give me some pointers? tia, Dave here's the code or here http://members.iinet.com.au/~daven@powerup.com.au/ and the shorter url http://tinyurl.com/6gnpuc <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <HTML> <BODY> <table cellspacing="0" cellpadding="0" style="width:100%"> <tr valign="top" style="width:100%;"> <td> hello </td> <td style="width: 64px;"> <DIV style="border: solid 1px #0000FF"> dsadsadsdsadas </DIV> </td> </tr> </table> </BODY> </HTML> I've created a webpage using html and was wondering if there was any way that when I open the file to have the address bar display a "fake" url. That is, when I open the file instead of saying "file:///Users.filename.html" it will say "www.example.com" in the browser's address bar. I'm on Mac OS and my browser is Google Chrome, if that helps. Hi, I am new to this forum. I need some help. I want to know how to display the contents of a link in one box to another box when that link is clicked. Thanks Pankaj Hello, I have a web page that is built using components. The footer of the page is a component. When building the page, the footer is added using a glob. In the footer, there is supposed to be a bunch of Korean characters. Currently, they are not displaying properly. When the glob is viewed alone, it is still incorrect. However, if the source is viewed, the Korean characters are correct in the source, but are displaying incorrectly in the page. The charset is already set to UTF-8. What could be the issue here? Hello, my name is North, and my website is not displaying correctly in IE. I am putting this here because my website is build with php, but the actual content on the pages are html, so i thought that this would be the place. http://north-see.com/judge/index.php?pid=0 this is the link to the site. I am making it for a persons book. Any ideas? Any common things that happen like this in IE? |
|||||||