Footer image not showing - HTML Forums

tangara · 11-08-2009, 01:32 AM

Hi, I am trying to add an image to spice up an otherwise boring page but the image just won't show up...even if I just use color ....the footer just won't show the color. Hope someone can tell me what's wrong with my code. tks.

Code:

body {
			margin: 0;
			padding-left: 200px;    
			 padding-right: 190px;   
			min-width: 240px;      		}
 
		#header, #footer {
			margin-left: -200px; 
 			margin-right: -190px;   		}
 
		.column {
			position: relative;
			float: left;
			}
 
		#center {
			padding: 0 50px 0 20px;
		width: 100%;
		}
 
		#left {
			width: 180px;        
   			padding: 65px 10px;       	
		right: 240px;
         			margin-left: -100%;
		}
 
		#right {
			width: 130px;          
			padding: 0 10px;        
			margin-right: -100%;
		}
 
		#footer {
			clear: both;
		}
 
		# buffer {
		padding: 35px 0; }
		
		#content-main {
		margin-top: 85px;
		margin-left: 100px;

#header {
			font-size: large;
			text-align: center;
			padding: 1em 0 ;
			background: #DDDDDD;
		}
		
		#footer {
		padding: 3px 0;
		width: 100%;
		height: 20px;
		background: #DDDDDD;
		background: url('footertile.gif') repeat-x; }
	</style>
</head>

<body>
<div id="header">This is the header.</div>
 
	<div id="center" class="column">
		<div id="content-main">
		<div id="buffer"></div>
				<p>Our Projects</p>
				<img src="tn_ID1.jpg" alt="house1" />
				<img src="tn_ID2.jpg" alt="house2"/>
				<img src="tn_ID3.jpg" alt="house3"/>
				<img src="tn_ID4.jpg" alt="house3"/>
				<img src="tn_ID5.jpg" alt="house3"/>
				<p>Nullam dolor. Nulla mauris quam, pulvinar sed, tristique et, elementum eget, neque. Etiam porttitor, urna id venenatis placerat, orci enim ullamcorper mauris, suscipit placerat mi odio et lorem. Vestibulum dui elit, porttitor rutrum, accumsan quis, dignissim eget, ligula. Proin mollis. </p>
			</div>
		</div>
	</div>
</div>
	</div></div>
	<table width= "100%" >
	<tr align="center">	
	<td width ="25%"><a href="Home.html">Home</a></td>
	<td width ="25"><a href="Projects.html">Projects</a></td>
	<td width ="25%"><a href="enquiry.html">Enquiry</a></td>
	<td width ="25%"><a href="contact.l">Contact</a></td>
	</tr>
	</table>
	
	
	</div>
	<div id="left" class="column">
		<h3><img src="nav_right1.gif"/>Our Subsidiaries</h3>
		<ul class="press">
		<li>Interior Design
		<li>P&D System</ul>
		<p>P&D is proud of our craftsmanship. We have done some of the most coveted commerical and high-end residence projects.</p></div></div>
<div id="right" class="column">
		<h2>This is the right sidebar.</h2>
		<p></p>
	</div>
	<div id="footer">
	<p align="center">Copyright 2009-2010. Created by Tangara.com</p>
	</div>
	</body>
</html>

¥åßßå · 11-08-2009, 04:24 AM

You've missed a }

#content-main {
margin-top: 85px;
margin-left: 100px;

¥

tangara · 11-08-2009, 10:01 AM

Sorry I have forgotten to enclose it. But, that's not the cause for the footer image not showing up. :-(

Pegasus · 11-08-2009, 10:42 AM

Try using background-color: and background-image: rather than two background:

¥åßßå · 11-08-2009, 10:49 AM

A link to your site would be useful

¥

coothead · 11-08-2009, 11:04 AM

Hi there tangara,

both ¥åßßå and Pegasus have made useful suggestions.

And I have popped in and corrected your coding errors...

Code:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english"> 
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
    margin:0;
    padding-left:200px;    
    padding-right:190px;   
    min-width:240px;
 }
#header, #footer {
    margin-left:-200px; 
    margin-right:-190px;
 }
.column {
    position:relative;
    float:left;
 }
#center {
    padding: 0 50px 0 20px;
    width:100%;
 }
#left {
    width:180px;        
    padding: 65px 10px;       	
    right: 240px;
    margin-left: -100%;
 }
#right {
    width:130px;          
    padding:0 10px;        
    margin-right: -100%;
 }
#footer {
    clear:both;
 }
#buffer {
    padding:35px 0;
 }
#content-main {
    margin-top:85px;
    margin-left:100px;
 }
#header {
    font-size:large;
    text-align:center;
    padding:1em 0;
    background-color:#ddd;
 }
#footer {
    padding:3px 0;
    width:100%;
    height:20px;
    background:#ddd url('footertile.gif') repeat-x;
    text-align:center; 
 }
table {
    width:100%;
 }
td {
    width:25%;
    text-align:center; 
 }
</style>

</head>
<body>

<div id="header">This is the header.</div>
 
<div id="center" class="column">
<div id="content-main">
<div id="buffer"></div>
<p>Our Projects</p>
<img src="tn_ID1.jpg" alt="house1">
<img src="tn_ID2.jpg" alt="house2">
<img src="tn_ID3.jpg" alt="house3">
<img src="tn_ID4.jpg" alt="house3">
<img src="tn_ID5.jpg" alt="house3">
<p>
Nullam dolor. Nulla mauris quam, pulvinar sed, tristique et, elementum eget, neque. 
Etiam porttitor, urna id venenatis placerat, orci enim ullamcorper mauris, suscipit 
placerat mi odio et lorem. Vestibulum dui elit, porttitor rutrum, accumsan quis, 
dignissim eget, ligula. Proin mollis.
</p>
</div>

<table>
<tr>	
<td><a href="Home.html">Home</a></td>
<td><a href="Projects.html">Projects</a></td>
<td><a href="enquiry.html">Enquiry</a></td>
<td><a href="contact.l">Contact</a></td>
</tr>
</table>

<div id="left" class="column">
<h3><img src="nav_right1.gif" alt="">Our Subsidiaries</h3>
<ul class="press">
<li>Interior Design</li>
<li>P&amp;D System</li>
</ul>

<p>
P&amp;D is proud of our craftsmanship. We have done some of the most coveted commerical 
and high-end residence projects.
</p>

</div>

<div id="right" class="column">
<h2>This is the right sidebar.</h2>

</div>

<div id="footer">
Copyright 2009-2010. Created by Tangara.com
</div>

</div>

</body>
</html>

...but as we do not know how the page is meant to look, we await your input.

¥åßßå · 11-08-2009, 12:14 PM

Good of you to, eventually, wander in here and make the css indentation look pretty, but notice you didn't bother with the html indentation .... tut, tut, yer gettin' old huh?

¥

coothead · 11-08-2009, 12:23 PM

......and smelly.
I'm afraid that incontinence seems to be taking it's toll.

¥åßßå · 11-08-2009, 12:25 PM

At least it's not you that's full of .... just your incontinence pads?

¥

coothead · 11-08-2009, 12:33 PM

No, I've always been full of ****, the pads have only recently been used for the overflow.

Pegasus · 11-08-2009, 12:45 PM

Overflow: hidden; You're elected nursemaid, YaBBa, since you brought the subject up.

Gentlemen! Let the OP get a word in edgewise, too, huh?

tangara · 11-09-2009, 04:32 AM

Hi hi, I've tried to put it in the #header and some how it works....

Couldn't open your website for quite a while and so I continue with some other things...will try to study what you guys said.....Seriously, I'm getting exhausted experimenting all these css stuff :-(

tangara · 11-09-2009, 04:43 AM

A question juz pop up my mind. I wld like to ask you guys if there's a better way in designing website rather than using notepadd ++ and open up my internet explorer again and close and open again to check how it looks ?

Am getting very very tired and it seems my IE is damaged becos of my frequent open and close :-(

BTW, dun suggest dreamweaver cos I dun no how to use it. Million tks.