Connecting Tech Pros Worldwide Help | Site Map
bytes > topic > html css > answers

I am new at dealing with tables using DIV, but my second image does not appear

Newbie
  
Join Date: Nov 2009
Posts: 6
#1: 2 Weeks Ago
Hi,
I have double checked and triple checked, but I cannot figure out why my second image (the picture in div.top2) is not displaying. The spelling is right. I have attached the files.
Also is there a way of aligning all the pictures towards the centre with the wording beneath lined up nicely as well?

Thanks for any help,
Mary


Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2.  
  3. <HTML>
  4.  
  5. <HEAD>
  6.  
  7. <TITLE>Second Page</TITLE>
  8.  
  9. <STYLE type="text/css">
  10. div#container
  11.  
  12. {
  13.  
  14.    width: 800px;
  15.    background-color: black;
  16.  
  17.    position: relative;
  18.  
  19.    margin-top: 0px;
  20.  
  21.    margin-left: auto;
  22.  
  23.    margin-right: auto;
  24. <p>
  25.  
  26. }
  27. div.inside
  28. {
  29. float: left;
  30. }
  31. div.top1
  32. {
  33. height:  585px;
  34. width: 400px;
  35. background-color: black;
  36. float: left;
  37. }
  38. div.top2
  39. {
  40. height: 585px;
  41. width: 400px;
  42. background-color: black;
  43. float: right;
  44. clear: right;
  45. }
  46. div.bottom1
  47. {
  48. height: 100px;
  49. width: 400px;
  50. background-color: black;
  51. float: left;
  52. clear: left;
  53. }
  54. div.bottom2
  55. {
  56. height: 100px;
  57. width: 100px;
  58. background-color: black;
  59. float: left;
  60. }
  61. </style>
  62. </head>
  63. <body bgcolor="black">
  64. <BGSOUND src="../heartbeat.wav" loop="-1">
  65. <div class="container" align=center>
  66. <font face="Bloodsuckers" size="7" color="#FF0000">Haunted House and Haunted Castle</font></p>
  67. <IMG src="bloodybar.gif" alt="" border="0" width="800" height="24" style="position:relative;">
  68.  
  69. <div class="top1"><a href="hauntedhouse1.htm"><IMG src="http://bytes.com/images/hauntedhouse.jpg" alt="link to interior views for haunted house" border="0" width="400" height= "585"></a>
  70. </div>
  71. <div class="top2"><a href="hauntedcastle1.htm"><IMG src="http://bytes.com/images/hauntedcastle.jpg" alt="link to interior views for haunted castle" border="0" width="400" height="585"></a>
  72. </div>
  73. <div style="clear: left"></div>
  74. <div class="bottom1"><a href="hauntedhouse1.htm"><font color="#FF0000">Haunted House--Click for Interior View</font></a>
  75. </div>
  76. <div style="bottom2"><a href="hauntedcastle1.htm"><font color="#FF0000">Haunted Castle--Click for Interior View</font></a>
  77. </div>
  78. </div>
  79. <div align="center">
  80. <p><P><P>&nbsp;<b><font color="#FF0000"><a href="index.htm"><font color="#FF0000">Home</font></a>
  81. </div>
  82. </BODY>
  83.  
  84. </HTML>
Attached Thumbnails
hauntedcastle.jpg   hauntedhouse.jpg  
best answer - posted by CdnRebel
I have stripped the code down to the following and my image is not appearing.
The code below is saved in a temporary htm file and the image is stored in an images folder. Why is my image not displaying when I click on the htm file? It was displaying at one point. I thought I had saved a copy of the code where it did display, but I have resized the image since and it does not display now. This is the only problem I have left to deal with before uploading the changes.
Any help would be greatly appreciated.

Thanks,
Mary


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
div.container
{
width: 1100px;
background-color: black;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div.top1
{
height: 765px;
width: 550px;
background-color: black;
float: left;
}
div.outside
{
height: 100px;
width: 1100px;
background-color: black;
float: left;
clear:left;
}
</STYLE>
</HEAD>
<BODY bgcolor="#000000" text="#000000" link="#FFFF00" vlink="#FFFFFF" style="SCROLLBAR-FACE-COLOR:#C0C0C0;SCROLLBAR-ARROW-COLOR:#000000;SCROLLBAR-3DLIGHT-COLOR:#C0C0C0;SCROLLBAR-DARKSHADOW-COLOR:#000000;SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;SCROLLBAR-SHADOW-COLOR:#808080;SCROLLBAR-TRACK-COLOR:#C0C0C0;">

<DIV id="container" style="width: 1100; align=center">
<div class="top1"><IMG src="images/hauntedhouse.jpg" alt="link to interior views for haunted house" border="0" width="550" height= "765">
</div>
</div>
<div.outside>
<p><P><P>&nbsp;<b><font color="#FF0000"><a href="index.htm"><font color="#FF0000">Home</font></a>&nbsp;&nbsp;
</div>
</BODY>

</HTML>
Markus's Avatar
Moderator
  
Join Date: Jun 2007
Location: York, England, with wolves.
Posts: 4,936
#2: 2 Weeks Ago

re: I am new at dealing with tables using DIV, but my second image does not appear

I don't see your issue. Do you have a live server we can view the website on?
Newbie
  
Join Date: Nov 2009
Posts: 6
#3: 2 Weeks Ago

re: I am new at dealing with tables using DIV, but my second image does not appear

I have stripped the code down to the following and my image is not appearing.
The code below is saved in a temporary htm file and the image is stored in an images folder. Why is my image not displaying when I click on the htm file? It was displaying at one point. I thought I had saved a copy of the code where it did display, but I have resized the image since and it does not display now. This is the only problem I have left to deal with before uploading the changes.
Any help would be greatly appreciated.

Thanks,
Mary


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<TITLE>Home Page</TITLE>
<STYLE type="text/css">
div.container
{
width: 1100px;
background-color: black;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
div.top1
{
height: 765px;
width: 550px;
background-color: black;
float: left;
}
div.outside
{
height: 100px;
width: 1100px;
background-color: black;
float: left;
clear:left;
}
</STYLE>
</HEAD>
<BODY bgcolor="#000000" text="#000000" link="#FFFF00" vlink="#FFFFFF" style="SCROLLBAR-FACE-COLOR:#C0C0C0;SCROLLBAR-ARROW-COLOR:#000000;SCROLLBAR-3DLIGHT-COLOR:#C0C0C0;SCROLLBAR-DARKSHADOW-COLOR:#000000;SCROLLBAR-HIGHLIGHT-COLOR:#FFFFFF;SCROLLBAR-SHADOW-COLOR:#808080;SCROLLBAR-TRACK-COLOR:#C0C0C0;">

<DIV id="container" style="width: 1100; align=center">
<div class="top1"><IMG src="images/hauntedhouse.jpg" alt="link to interior views for haunted house" border="0" width="550" height= "765">
</div>
</div>
<div.outside>
<p><P><P>&nbsp;<b><font color="#FF0000"><a href="index.htm"><font color="#FF0000">Home</font></a>&nbsp;&nbsp;
</div>
</BODY>

</HTML>
Attached Thumbnails
hauntedhouse.jpg  
Newbie
  
Join Date: Nov 2009
Posts: 6
#4: 2 Weeks Ago

re: I am new at dealing with tables using DIV, but my second image does not appear

Code was corrected and now first image doesn't appear
Newbie
  
Join Date: Nov 2009
Posts: 6
#5: 2 Weeks Ago

re: I am new at dealing with tables using DIV, but my second image does not appear

Hi Markus,

It turns out that I had to save the pictures as .gif files for them to display. I thought the problem might have been my code.

Thanks,
Mary
Reply

Tags
div, image not appearing, table

« previous question | next question »

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,366 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved