|
HTML - Footer To Stay At The Bottom Of The Page!!!
Hi Guys,
How can i make my footer stay at the bottom of the page so when the user holds down ctrl and zooms out i want to the footer to stick to the bottom of the screen, i have done this before but i cant remember for the life of me and its actually killing me know can someone put me out of my misery please. heres the HTML and CSS its called BottomBanner HTML Code: <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<!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 runat="server">
<title>Vodafone One Net Express</title>
<style type="text/css">
body{background: none repeat scroll 0 0 #F4F4F4; margin:0px !important; padding:0px !important;}
.PageSetter{margin-left:auto; margin-right:auto; margin-top:-2.3%; background: none repeat scroll 0 0 #F4F4F4; position:relative; }
.TopBanner{background-color:#C51906; width:100%;height:80px;}
.TopBanner h1{font-size:2.7em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.BottomBanner{background-color:#C51906; width:100%;height:80px; margin-bottom:-0.1% !IMPORTANT}
.BottomBanner h1{font-size:2.3em; text-align:center; color:White; margin-left:auto; margin-right:auto; padding-top:15px; font-weight: normal; width: 600px;}
.IframeContiner{width:980px; margin-left:auto; margin-right:auto; margin-top:10px}
.IframeStyle{Width:982px; height:1000px; border:0px}
</style>
</head>
<body>
<div class="PageSetter">
<div class="TopBanner">
<h1>
Vodafone One Net Express
</h1>
</div>
<div class="IframeContiner">
<iframe scrolling="auto" class="IframeStyle" src="http://www.telegraph.co.uk/finance/yourbusiness/businesstechnology/9209385/Review-Vodafone-One-Net-Express.html">
</iframe>
</div>
</div>
<div class="BottomBanner">
<h1>
Call Now 0800 1980 000
</h1>
</div>
</body>
</html>
Similar TutorialsUsually when people place a footer at the bottom of a page they do it outside of the wrapper, so the footer is a first generation child of the body. However, I'm helping with a site that has shadow bars running down the sides of the wrapper div, and we want the footer to stick to the bottom, but inside of the wrapper. Currently any content that extends to where the footer is begins to overlap it. Here is my code: HTML Code: <html>
<head>
<title>Closeout Boat Sales</title>
<link rel="stylesheet" type="text/css" href="style/styles.css" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="style/styles2.css" />
<![endif]-->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="scripts.js"> </script>
</head>
<body>
<div id="wrapper">
<div id="header">
<?php include('header.php'); ?>
</div>
<div id="navcontainer">
<?php include('nav.html'); ?>
</div>
<br />
<div id="sidebar">
<p><img src="images/latest_sidebaroff.png" id="toggle1" /></p>
<p><img src="images/bulk_sidebaroff.png" id="toggle2" /></p>
</div>
<div id="main">
<br /><br />
<div id="latest">
<table style="width: 100%"> <tr>
<p><?php echo $dynamicList; ?></p>
</tr></table>
</div>
</div>
<div id="footer">
<?php include('footer.php');?>
</div>
</div>
</body>
</html>
HTML Code: body,td,th {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #333;
line-height:1.5em;
margin: 0;
}
body {
background-color: #fff;
}
#header h1 {
font-size: 32px;
display: inline;
}
#header a {
font-size: 32px;
color: #06C;
text-decoration: none;
}
#cartBar
{
/*float:right;
background-color: gray; */
width: 1003px;
text-align: right;
margin-left: -2px;
}
#wrapper
{
margin-left: 100px;
height: 100%;
width:1050px;
padding-left: 40px;
padding-top: 10px;
background-color: #fff;
background-image: url('../images/shadow-bar.png');
background-repeat: repeat-y;
}
#header
{
width: 1002px;
margin-left: -19px;
margin-top: -10px;
padding: 3px;
background-image: url('../images/headerBar.png');
}
#sidebar
{
width: 250px;
float: left;
}
#main
{
width: 800px;
float: left;
}
#main a
{
font-weight: bold;
color: #06c;
}
#main a:hover
{
color: #999;
}
#main a:visited
{
color: #06c;
}
#navcontainer
{
width: 100%;
text-align: center;
}
#navcontainer li
{
/*float:left;*/
display:inline-block;
list-style-type:none;
position:relative;
margin:0 10px;
overflow:hidden;
}
#navcontainer li:hover {
overflow:visible;
}
#navcontainer li ul {
position:absolute;
display:block;
left:0px;
top:20px;
margin:0;
width:110px;
padding:0;
background-color:#CCC;
padding:0 10px 10px;
}
#navcontainer li ul li {
float:none;
margin:0;
display:block;
}
#footer
{
margin-left: -19px;
margin-bottom: -10px;
height: 125px;
width: 1009px;
color: black;
position: absolute;
bottom: 0;
font-size: 10pt;
background-image: url('../images/footer.png');
}
#footer a
{
color: #333;
font-weight: bold;
text-decoration: none;
padding: 5px;
}
#bulk
{
display: none;
}
Any ideas? Hi there everyone. First time post here. I am trying to keep a footer at the bottom of my page. The problem is if I don't have enough content to fill up the whole page, the footer is not at the bottom of the screen. I am using tables for my format. My site: http://www.keystonestatistics.com/zzz.php Check the source. Thanks in advance for the help! My site is www.movehumanityforward.com On the bottom is a banner. I need to push it to the right a little bit, to align it to the content above it, specifically the corner of the edge next where it says HOME. I appreciate You! Hi all, I would like to create a fairly basic site where there are three areas. 1) The Banner which is pinned to the top of the screen. 2) The Main Body which will enlarge dependant on different screen sizes (Both width and depth) 3) The footer which is pinned to the bottom of the screen. The top banner is OK, and the enlarging widthways is OK, but I can't figure out how pin the footer to the bpottom of the screen and enlarge the main body to fill the gap. Any help you can offer is muich appreciated. Hi, I have a template in the making but i have got to a point now where the footer isnt working. I want the footer to stick to the bottom of the browser and for it to work when there is a small amount of content which doesnt require scrolling and also when scrolling is required. At the moment it works when scrolling isnt required but as you will see on my example below when scrolling happens the footer doesnt stay stuck to the bottom of the browser it just moves up with the rest of the site. Any ideas how to fix this? I have been testing in FF2 but i need it working in IE 6 + 7 + FF 2. The site is here any ideas or help would be great Cheers Hope the title made sense, I am using Microsoft Expression Web and, I am also using Frames on my website. I have 3 Frames, One complete at the top, one on the left side and then a main page frame to fill the rest. I am using a 19" wide screen monitor, and because of that the pages I make are all unaligned with each other as they get stretched to fill the monitor. now the top frame and left frame stay where they should I have done that, but I can't keep the main page frame from moving over to the right and making everything look untidy and nasty. so could anyone help me out with this problem please, I use a background Image, text and images on the page so they all need to stay centered bu to the left of the page. Or maybe center all the frames to the middle of the screen such as www.myspace.com looks on a wide screen monitor (although i know they do not use frames.) Thanks in advance Hi, I am trying to figure out how to make my links stay on the left side page while scrolling down or up. Not sure if this is the right place to post. Any help, codes, and/or examples would be great. Thanks I am stuck with this stupid code that i have been trying to fix for an hour! Please help. Heres my problem...: I want to embed a webpage within another and scroll it to the bottom of the page automaticly because i want the information at the bottom which is updated frequently. I also dont want a scroll bar, so all that is seen is the table. the website is www.totalfta.com. I want from below the ENTER|EXIT sign to the bottom of the table. I have attached what i have so far. ***I have the embed into another page, and the no scroll bar... i just want to make it auto scroll to the table..**** Thank you..! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-... <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Tester</title> </head> <iframe height="410" width="100%" frameBorder="0" src="http://www.totalfta.com" mce_src="http://www.totalfta.com" scrolling="no" body onLoad="for (i=0;i<window.screen.availHeight;i++) {window.scroll(0,i); }"</iframe> <body> http://wantedfraternity.webs.com/officerschat.html At the very bottom of my page I've got a gap...and I cant seem to see whats causing it. I had this problem before on another page, but I was able to fix it. This one I just cant seem to. Now the grey background is suppost to go all the way down, but its got a black spot stopping it now. Any help on what is causing it I'd be greatful. Thanks I am a novice when it comes to html and can't figure out why there is a gap at the top and bottom of my web page in Mozilla? In AOL browser it is ok. http://www.nomoreheartdiseaseandstrokes.com Thanks Hi, i have tables on my site at the top, middle, right,left etc... but I can't seem to get one to stick at the bottom of the page, it just stays underneath the other page info, i want it to go right to the bottom.... any ideas? thanks Hey been looking around for an example on how to get an Iframe to load at the bottom of a page and not move, just a small Iframe, like 25px in height and 100% width, Ive got a page which scrolls news and I didnt want it to reload every time the user clicked on another page. I dont want it to be at the bottom of the content on the page, but on the bottom of the actual browser window if that makes sense Any suggestions would be great thanks I need help with this html page. I would like the disclaimer at the bottom of the page to not follow the body. Is that possible? Take a look at this html and let me know if it is possible to recode it to show the disclaimer across the entire width of the page bottom as in this url : http://www.stocktraderspress.com/mem..._01112012.html Here is the html code for the new page I am trying to edit: <html> <head> <title>Stock Traders Press :: 2011 Performance</title> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <style type="text/css"> <!-- .style3 { font-size: 24px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .style4 { font-size: 18px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .style11 {font-size: 10px} .style15 {font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: bold; } .numbersbody { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-align: center; } .datebody { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-align: right; } .tickerbody { font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-align: left; } .style17 {font-size: 14px; font-family: Arial, Helvetica, sans-serif;} --> </style> </head> <body bgcolor="#FFFFFF" text="#000000" marginwidth="0" marginheight="0"> <table width="100%" border="0" cellpadding="0" cellspacing="0"> <tbody> <tr align="center" valign="middle" bgcolor="#FFFFFF"> <td width="20%" height="19">*</td> <td width="20%" height="19">*</td> <td width="20%" height="19">*</td> <td width="20%" height="19">*</td> <td width="20%" height="19">*</td> </tr> <tr align="center" valign="middle" bgcolor="#FFFFFF"> <td colspan="5"> <table width="89%" border="1" cellpadding="10" cellspacing="0"> <tbody> <tr> <td valign="middle" bgcolor="#FFFFFF"> <table width="100%" border="0" cellpadding="2" cellspacing="0"> <tbody> <tr> <td colspan="5"><img src="/stp_logo.gif" width="363" height="42"></td> <td>*</td> <td><span class="style3">2011 Performance</span></td> </tr> <tr> <td colspan="2"><a href="/members/welcome.php">Go Back </a></td> <td colspan="5"><span class="style4">************************** </span></td> </tr> <tr> <td colspan="7"><span class="style4">These are the recommendations our Firm made in 2011 </span></td> </tr> <tr> <td colspan="7"><span class="style4">By purchasing an equal amount of every stock, you would have had an average gain of 9.41%</span> </td> </tr> <tr> <td width="87">*</td> <td width="115">*</td> <td width="80">*</td> <td width="79">*</td> <td width="197">*</td> <td width="140">*</td> <td width="175">*</td> </tr> <tr> <td colspan="2" class="style15">Closed Positions </td> <td>*</td> <td>*</td> <td>*</td> <td>*</td> <td>*</td> </tr> <tr bgcolor="#CCCCCC"> <td> <div align="center"> <strong><span class="style17">Stock</span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Date Bought</span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Date Sold </span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Time Held </span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Price (Recommended) </span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Price (Sold) </span></strong></div> </td> <td> <div align="center"> <strong><span class="style17">Profit/Loss</span></strong></div> </td> </tr> <tr> <tr bgcolor="#E6FFFF"> <td class="tickerbody">GT</td> <td class="numbersbody">01/05/2011</td> <td class="numbersbody">04/29/2011</td> <td class="numbersbody">114 Days</td> <td class="numbersbody">$12.69</td> <td class="numbersbody">$18.20</td> <td class="numbersbody">43.42%</td> </tr> <tr bgcolor="#E6FFFF"> <td class="tickerbody">CMG*</td> <td class="numbersbody">07/08/2011</td> <td class="numbersbody">08/18/2011</td> <td class="numbersbody">41 Days</td> <td class="numbersbody">$325</td> <td class="numbersbody">$285</td> <td class="numbersbody">12.36%</td> <td class="numbersbody">*Cover of a Short position</td> </tr> <tr bgcolor="#E6FFFF"> <td class="tickerbody">GT</td> <td class="numbersbody">09/06/2011</td> <td class="numbersbody">10/24/2011</td> <td class="numbersbody">2 1/2 months</td> <td class="numbersbody">$11.11</td> <td class="numbersbody">$13.58</td> <td class="numbersbody">24.46%</td> </tr> <tr bgcolor="#E6FFFF"> <td class="tickerbody">OLN</td> <td class="datebody">10/04/2011</td> <td class="numbersbody">10/27/2011</td> <td class="numbersbody">23 Days</td> <td class="numbersbody">17.17</td> <td class="numbersbody">$21.37</td> <td class="numbersbody">24.46%</td> </tr> I'm looking for some help getting an html table I created to be at the top of a page. It looks alright to me, but then when I post it to my blog it has like 50 blank lines and puts it at the bottom of the page. I want it right at the top. I'm not the best at html, especially tables... I just try and copy excisting table examples and add my own information. If someone can help it would be greatly appreciated. Heres the code: HTML Code: <table cellspacing="1" cellpadding="2" border="1"> <tbody></tbody></table><table border="6"> <tbody><tr> <td><b><center>Player</center></b></td> <td><b><center>G</center></b></td> <td><b><center>PA</center></b></td> <td><b><center>AB</center></b></td> <td><b><center>R</center></b></td> <td><b><center>H</center></b></td> <td><b><center>HR</center></b></td> <td><b><center>RBI</center></b></td> <td><b><center>BB</center></b></td> <td><b><center>SO</center></b></td> <td><b><center>SB</center></b></td> <td><b><center>BA</center></b></td> <td><b><center>OBP</center></b></td> <td><b><center>SLG</center></b></td> <td><b><center>OPS</center></b></td><b> </b></tr> <tr> <td align="middle">Corey Hart</td> <td>60</td> <td>221</td> <td>194</td> <td>34</td> <td>61</td> <td>10</td> <td>31</td> <td>21</td> <td>35</td> <td>15</td> <td>.314</td> <td>.391</td> <td>.531</td> <td>.922</td> </tr> <tr> <td align="middle">Carlos Lee</td> <td>76</td> <td>331</td> <td>292</td> <td>41</td> <td>85</td> <td>13</td> <td>60</td> <td>24</td> <td>30</td> <td>4</td> <td>.291</td> <td>.341</td> <td>.503</td> <td>.844</td> </tr> <tr> <td align="middle">Corey Hart Projected</td> <td></td> <td></td> <td>294</td> <td>51</td> <td>91</td> <td>15</td> <td>46</td> <td>31</td> <td>52</td> <td>22</td> <td></td> <td></td> <td></td> <td></td> </tr> <tr> </tr></tbody></table> If I want to make a way to have that table move ends? tenchars// I taught myself HTML, so I'm not the greatest at it, but I get by. My problem is that on a page I am currently working on (and it's happened to me in the past as well) there is a small space at the bottom of the page that shouldn't be there. It's weird because it's there when the page first loads, but when I refresh it goes away. But why is it there in the first place. There's no stray <br> tags or anything and this is very basic HTML code, including tables. I don't see any other sites with this problem, what in the world could it be? I just asked a friend, and I don't think he's seeing it. The space is very noticeable. It's kind of embarrassing, a wrestling related page, but I'll include the link. I am using Internet Explorer, by the way. And I just noticed than when I click the link in my bookmarks, and hit "open in new tab", the space isn't there. Just odd. Anyway, here it is: http://steenerico.fwrestling.com/ Well, that link won't do any good, because apparently when it opens in a new window, the space doesn't show up. Argh. Try opening a new browser window and pasting the link into the address bar. HY ! I want to create a link to an external page and to open it at the bottom side. Can u tell me how to do this ? How can I make the text appear at left bottom... I have 3 taGS RETURNING DATA FROM sql: <p> #TOC# </p> <p> BUSINESS POLICY TRADEMARK REGULATIONS. </p> <p> #Qry.USERSIGN# </p> I want the text from this tag to appear one after other at left bottom: For example: This is basic algebra lesson. BUSINESS POLICY TRADEMARK REGULATIONS. Smith How to do that? Any advise is appreciated.RosieGp |
|||||||