8 Replies - 766 Views - Last Post: 02 February 2011 - 08:11 AM

#1 baxter111  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 77
  • Joined: 30-June 08

Footer - Div

Posted 01 February 2011 - 12:49 PM

Hello,

I would if someone could take a look at this, the footer1 doesn't seem to be in the correct place, basically the footer should be going at the bottom.

Any help would be great!!

css

body {
	

	
}

/*Layout Items */

#wrapper {
	margin: 0 auto;
	width: 1024px;
	height: 2000px;
	
}

#header {
	width: auto;
	height: 181px;
	background-image: url(../images/header.png);
}

#nav-bar {
	width:auto;
	height:40px;
	background-color:#FFF;
}

#container {
	width:auto;
	height:auto;
}

#content-left {
	width:600px;
	height:auto;
	float:left;
}

#side-bar {
	width: 400px;
	height:auto;
	float:right;
	clear:right;
	border-left-color: #009966;
	border-left-style:solid;
	border-left-width:5px;
	padding-left:10px;
	margin-top:10px;
	
}

#printer2 {
	width:auto;
	height:auto;
	margin-top:20px;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

#printer1 {
	width:auto;
	height: auto;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

hr {
	color:#006699;
}

.header-text {
	width: 200px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:18px;
	text-transform:uppercase;
	font-weight:bold;
	margin-bottom:10px;
}

.red-image {
	width:200px;
	float:right;
	clear:right;
	position:fixed;
	left: 1218px;
	top: 201px;
}

#side-pannel-3 {
	width:auto;
	margin-top:20px;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

#side-panel-4 {
	width:auto;
	margin-top:20px;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

#side-panel-5 {
	width:auto;
	margin-top:20px;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

#main-image {
	width:auto;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

.img {
	padding-left:150px;
}

#main-content-1 {
	width:auto;
	border-bottom-color:#006699;
	border-bottom-width:5px;
	border-bottom-style:solid;
	padding-bottom:20px;
}

#main-content-2 {
	width:auto;
	padding-bottom:20px;
}

#footer1 {
	width:1024px;
	background-image:url(../images/footer-bg.jpg);
	background-repeat:no-repeat;
}
	


/* Text Styling */


#main-content-1 ul {
	list-style-image:url(../images/symbol_small.jpg);
	font-family:Verdana, Geneva, sans-serif;
	margin-top:10px;
	font-size:14px;
	color:#333;

}

#main-content-1 li {
	line-height:30px;
	padding-bottom:10px;
	padding-left:10px;
	
}

#main-content-2 ul {
	list-style-image:url(../images/symbol_small.jpg);
	font-family:Verdana, Geneva, sans-serif;
	margin-top:10px;
	font-size:14px;
	color:#333;

}

#main-content-2 li {
	line-height:30px;
	padding-bottom:10px;
	padding-left:10px;
	
}


.heading { 
	font-family:Verdana, Geneva, sans-serif;
	font-size:24px;
	color:#009966;
	font-weight:bold;
}


h3 {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	color:#333;
	text-transform:capitalize;
	margin: 0;
}

h4 {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#333;
	margin: 0;
}

/* GREEN */
h5 {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #009966;
	text-transform:uppercase;
	margin: 0;
	padding-bottom:5px;
}

/* RED */

h6 {	
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color: #F00;
	margin: 0;
	padding-bottom:5px;
}
	

.printer-text {
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	color:#333;
}

.price {
	font-family:Verdana, Geneva, sans-serif;
	font-size:16px;
	padding-left:30px;
	font-weight:bold;
	color:#006699;
	text-transform:capitalize;
	
	
}

.colour-image {
	margin-right:5px;
}

.statement {
	font-family:Verdana, Geneva, sans-serif;
	font-size:20px;
	font-weight:bold;
	color:#F00;
}


/*Menu Style */

#nav-bar ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0 auto;
  padding-top: 10px;
  list-style: none;

}
#nav-bar ul li {
  display: block;
  position: relative;
  float: left;
}
#nav-bar li ul { display: none; }
#nav-bar ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background-image:url(../images/nav-bar-background.png);
  margin-left: 1px;
  white-space: nowrap;
}
#nav-bar ul li a:hover {  }
#nav-bar li:hover ul {
  display: block;
  position: absolute;
}
#nav-bar li:hover li {
  float: none;
  font-size: 11px;
}
#nav-bar li:hover a { }
#nav-bar li:hover li a:hover {  }



HTML
<link href="css/style.css" rel="stylesheet" rev="stylesheet" media="screen" />

</head>

<body>

	<div id="wrapper">
    
    	<div id="header">
        
        </div>
 
 		<div id="nav-bar">
        
        	<?php include 'includes/nav-bar.php'; ?>
        
        </div>
        
        <div id="container">
        
       	  <div id="cont1ent-left">
            
            	<div id="main-image">
           
                <img src="images/printeroffer.jpeg" alt="Printer Offer" width="312" height="423" class="img" style="margin: 0 auto;" />
                
                
                </div>      
                
               	<div id="main-content-1"> 
             
                <p class="heading">Quality Assured Best Value Toners, Inkjets and Office Products</p>
                
                <ul class="prod">
                <li>Toner Cartridges - Originals, UK Remanufactured or Compatibles</li>
                <li>Inkjets - Originals, Compatibles or Refilled</li>
                <li>Printers - New & Reconditioned with 12 Month Warranty</li>
                <li>Everyday Office Supplies</li>
                </ul>
                
                
                </div>
                
                <div id="main-content-2">

                <p class="heading">We are Committed to Making a Difference</p>

                <ul class="prod">
                <li>Reducing your printer costs</li>
                <li>Using our toner cartridges lowers your carbon footprint by up to 4 kg of CO2 on every cartridge- (our toner cartridge carbon footprint study available on request)</li>
                <li>Locally produced - Carbon emissions reduced still further</li>
                <li>Reconditioned printers (with green cartridge options)</li>
                </ul>
                
                
                </div>                
          </div>
                
      </div>
            
         

	
            
            
            
<div id="side-bar">
            
            <div class="header-text">All Printers Come With Full Toner</div>
            
    
            	<div id="printer1">
                
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="46%"><img src="images/colour.jpg" alt="Colur" width="85" height="16" align="right" class="colour-image" /></td>
    <td colspan="2"><h3>HP4650DN</h3></td>
    </tr>
  <tr>
    <td rowspan="11"><img src="images/HP4650DN.png" alt="HP" width="158" height="182" hspace="10" /></td>
    <td colspan="2"><h4>Colour LaserJet Printer</h4></td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td width="5%" height="25" align="center" valign="middle"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td width="49%" class="printer-text">A4 Network Ready</td>
  </tr>
  <tr>
    <td height="25" align="center" valign="middle"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td class="printer-text">22 page/per minuite output</td>
  </tr>
  <tr>
    <td height="26" align="center" valign="middle"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td class="printer-text">Duplex - prints both sides</td>
  </tr>
  <tr>
    <td height="25" align="center" valign="middle"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td class="printer-text">Medium / heavy duty</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td colspan="2"><h5>Black - .006p Per Page</h5></td>
    </tr>
  <tr>
    <td colspan="2"><h6>Against 1.4p Per Page Original</h6></td>
    </tr>
  <tr>
    <td colspan="2"><h5>Colour - .009p Per Page</h5></td>
    </tr>
  <tr>
    <td colspan="2"><h6>Against 2.1p Per Page Original</h6></td>
    </tr>
  <tr>
    <td class="price">Only 520.00<br />
      Excluding VAT</td>
    <td colspan="2"><img src="images/info.png" width="209" height="39" alt="More Info" /></td>
    </tr>
</table>


                                
              </div>
                
                <div id="printer2">
                
                <table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="45%">&nbsp;</td>
    <td colspan="2"><h3>HP 4250N</h3></td>
    </tr>
  <tr>
    <td rowspan="9"><img src="images/HP4250N.png" alt="HP1" width="158" height="170" hspace="10" /></td>
    <td colspan="2"><h4>Mono LaserJet Printer</h4></td>
    </tr>
  <tr>
    <td width="5%" align="center">&nbsp;</td>
    <td width="50%">&nbsp;</td>
  </tr>
  <tr>
    <td width="5%" align="center"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td width="50%" class="printer-text">A4 Network ready </td>
    </tr>
  <tr>
    <td align="center"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td class="printer-text">43 page/per minute output</td>
    </tr>
  <tr>
    <td align="center"><img src="images/symbol.jpeg" width="10" height="10" alt="Symbol" /></td>
    <td class="printer-text">Heavy duty </td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td colspan="2"><h5>BLACK- .003p PER PAGE</h5></td>
    </tr>
  <tr>
    <td colspan="2"><h6>Against .09p Per Page Original</h6></td>
    </tr>
  <tr>
    <td colspan="2">&nbsp;</td>
    </tr>
  <tr>
    <td class="price">ONLY 335.00<br />
      Excluding VAT</td>
    <td colspan="2"><img src="images/info.png" width="209" height="39" alt="More Info" /></td>
    </tr>
</table>
                
                
                </div>
                
                <div id="side-pannel-3">
                <span class="statement">
                LOW PRICES EVERY DAY ON TONER & INKJET CARTRIDGES
                </span>
                
                </div>
                
                <div id="side-panel-4">
                  <table width="100%" border="0" cellspacing="0" cellpadding="0">
                    <tr>
                      <td colspan="2"><h3>INKJET CARTRIDGES</h3></td>
                    </tr>
                    <tr>
                      <td colspan="2"><h4>Originals, UK Remanufactured or Compatibles</h4></td>
                    </tr>
                    <tr>
                      <td width="46%" rowspan="2"><img src="images/inkjet.jpeg" alt="InkJet" width="107" height="112" hspace="40" vspace="10" /></td>
                      <td width="54%" height="92">&nbsp;</td>
                    </tr>
                    <tr>
                      <td><img src="images/info.png" width="209" height="39" alt="More Info" /></td>
                    </tr>
                  </table>
                
                
                </div>
                
                <div id="side-panel-5">
                
                	<table width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td><h3>TONER CARTRIDGES</h3></td>
  </tr>
  <tr>
    <td><h4>Originals, UK Remanufactured <br />
      or Compatibles</h4></td>
  </tr>
  <tr>
    <td><img src="images/toner.jpg" alt="Toner" width="204" height="140" hspace="60" /></td>
  </tr>
  <tr>
    <td><img src="images/info.png" alt="More Info" width="209" height="39" hspace="5" align="right" /></td>
  </tr>
</table>
                
                </div>
            
            	
            
            </div>
            
            <div id="footer1">
            
            </div>
            </div>


</body>
</html>



Thanks,

Scott

Is This A Good Question/Topic? 0
  • +

Replies To: Footer - Div

#2 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Footer - Div

Posted 01 February 2011 - 12:58 PM

Is this code live anywhere online?

Looks like there is nothing telling the footer to stick to the bottom, it will ride up to the bottom of everything else.
Was This Post Helpful? 0
  • +
  • -

#3 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: Footer - Div

Posted 01 February 2011 - 07:42 PM

Hello Scott,

As PhunkRabbit mentioned above, there is nothing telling the footer where to go. Because the way many of the elements on the page overflow, it puts the footer in the center. It is actually in the "correct" place according to the code.

To overcome this issue, you need to tell the footer to CLEAR everything else.
#footer1 {clear:both}

this will make sure that the footer is below all the other content. Please let us know if you still have an issue after trying this.


be sure to read this overview on clearing floats http://www.quirksmod...s/clearing.html
Cheers!

This post has been edited by ClearRift: 01 February 2011 - 07:43 PM

Was This Post Helpful? 1
  • +
  • -

#4 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Footer - Div

Posted 02 February 2011 - 01:38 AM

ClearRift - I read it as he wanted the footer to be at the very bottom of the site/screen regardless of wether the content filled the page or not.
Was This Post Helpful? 0
  • +
  • -

#5 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: Footer - Div

Posted 02 February 2011 - 07:05 AM

PhunkRabbit- I did as well but when I looked at his code I noticed that the height of his static content greatly exceeds the height of a browser window. Then, when I rendered the code I saw that that the footer was sitting in between two of the tables.

These two factors indicated to me that the simplest solution was to just clear everything as the content will always fill the page. I don't use sticky footers that often but probably should. What method do you recommend?
Was This Post Helpful? 0
  • +
  • -

#6 PhunkRabbit  Icon User is offline

  • D.I.C Regular
  • member icon

Reputation: 81
  • View blog
  • Posts: 406
  • Joined: 23-August 10

Re: Footer - Div

Posted 02 February 2011 - 07:09 AM

I dont use sticky footers either, tbh I rarely come across a site where the content/sidebar doesnt fill the height of a page on a standard monitor (less than 22").

Worst case senario then I use absolute positioning however hate using methods like that, same for JS scripts to stick the footer.
Was This Post Helpful? 0
  • +
  • -

#7 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: Footer - Div

Posted 02 February 2011 - 07:44 AM

Quote

hate using methods like that, same for JS scripts to stick the footer.


Agree completely. Its hardly ever necessary. Cheers!
Was This Post Helpful? 0
  • +
  • -

#8 baxter111  Icon User is offline

  • D.I.C Head

Reputation: 2
  • View blog
  • Posts: 77
  • Joined: 30-June 08

Re: Footer - Div

Posted 02 February 2011 - 08:08 AM

Cheers guys worked first time!!

#footer1 {clear:both}



Next question - how do you get an image to appear out of the wrapper div - basically if you look at:

http://www.ourbaby-blog.co.uk you will see the head image has a blue and green line - basically want this to carry on to the edge of the pages.

Cheers,

scott
Was This Post Helpful? 0
  • +
  • -

#9 ClearRift  Icon User is offline

  • New D.I.C Head

Reputation: 5
  • View blog
  • Posts: 37
  • Joined: 09-December 10

Re: Footer - Div

Posted 02 February 2011 - 08:11 AM

View Postbaxter111, on 02 February 2011 - 10:08 AM, said:

Cheers guys worked first time!!

#footer1 {clear:both}



Next question - how do you get an image to appear out of the wrapper div - basically if you look at:

http://www.ourbaby-blog.co.uk you will see the head image has a blue and green line - basically want this to carry on to the edge of the pages.

Cheers,

scott



Hi Scott,

Can you post this as a new topic so other people will be able to find it from google?

Thanks
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1