|
HTML - 100% Height Footer Fixed Bottom ?
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 Similar TutorialsHowdy, I wanted to have a fixed bar at the bottom of website just like Facebook. Can anybody know how to do that? Bar should be customizable as per my requirement. Thanks in Advance. 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 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>
Hello. First time here asking for help. Hope there's a solution! The site in question is http://www.jason-bradbury.com/Design.html. It's my first attempt at web design and I'm stumped. The goal is to present my art portfolio in a horizontal scrolling layout with a fixed header and footer. Ideally it would look identical across the many browser platforms. On a Windows laptop, my page looks and functions as it should in the latest browser versions of Safari, Google Chrome and Firefox as long as there aren't a stack of toolbars enabled. If toolbars are present (mostly in Firefox), the footer gets truncated and the page will not vertical scroll to allow it to be seen. So my first problem is getting the vertical scrolling (for the entire page including header and footer) to appear only when necessary in that situation. On my Mac Pro (I have not been able to test a Macbook yet) the page appears normal across the board with Safari and Firefox (have not tested Chrome or IE) The second problem is that in all versions of IE (and older versions of Firefox prior to 4.0) the page is displayed incorrectly. In IE, the header is missing, the left margin is way off and a vertical scrollbar is present for the body (again, if the vertical scrolling was for the entire page it wouldn't be so bad). As for the horizontal scrolling, it is very sluggish in IE. Firefox only has the vertical scrollbar in the body problem and since the header is shown in that browser, the body overlaps it when scrolled up. The page was originally designed in iWeb and then I had to tweak the code in Dreamweaver to get the fixed header and footer. Hope someone can help me out here! Cheers, Jason. hello Every can any one tellme How can i make a webpage open in Fixed height and Width which is to be opened by a Hyperlink Example : like when you click On MORE link From The Smilies in this Forum it open a Small Window Resizeble Window Hi There, I have included my code below. The table looks correct in Firefox 2 and Safari 3 but not IE7. I am attempting to create a table that fills up the entire page with a fixed width row at the bottom. IE7 ignores the height I have set for the second row and makes both rows the same height. Note that the Doctype tag is important here, if I remove it then the page looks correct, however it is my intention to ensure the browser runs in standards mode. As far as I am aware my code is correct. Any help or advice would be appreciated. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html,body{
margin:0;
padding:0;
height:100%;
border:none;
}
</style>
</head>
<table height="100%" cellpadding="0" cellspacing="0" border="1" width="100%">
<tr>
<td>
Line 1
</td>
</tr>
<tr style="height:10px;">
<td>
Line 2
</td>
</tr>
</table>
</html>
Hi there, I have a table layout on the main page of site I'm working on, and have one row with two cells. The cell on the left contains a php include page which auto updates with news, however, as the news gets longer and the cell container auto resizes to fit the height..it also messes with the height of the cell on the right, leaving empty spaces (the black space right under "recruitment status") I'm stumped as to how to deal with is, any suggestions are much appreciated. Thanks the site: http://guild-paragon.com/indexframe edit: decided to put an iframe in there to hold the height, there's prob better alternatives out there though Hello everyone, I posted this in the CSS section, but figured that this is also an HTML issue somewhat as well. I am a web/graphic designer at a company called Executive Travel Link. Our site can be found at http://www.executivetravellink.com. I am having a bit of an issue with an easy fix regarding changing the height of the Footer. We had our site built by another company and the designer whom worked on it is no longer responsible for doing any work for us. We had our SSL Certificate for the site registered with GoDaddy and I am trying put their Trust Seal logo into our Footer by the code provided from them. However, the large height of the Trust Seal is dragging down the other logos that were created in our Footer to the point that you can only see the top halves of the logos. The way that the designer created our Footer was mainly through a CSS file. I am a novice overall at CSS and after a few hours of trying to get it to look right and coming up unsuccessful, I felt it was probably best to see if there was anyone whom could give some advice or assistance with this problem. I will provide the code for the Footer, CSS, and GoDaddy Trust Seal below. Any help that could be given would be much much appreciated! Thank You! Footer Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="he" lang="he"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <title>Executive Travel Link</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <link href="style.css" type="text/css" rel="stylesheet" /> <meta name="keywords" content="" /> <meta name="description" content="" /> </head> <body> <div class="footer"> <div class="float_left"> <a target="_parent" href="http://www.executivetravellink.com">Home</a> | <a target="_parent"href="http://details.executivetravellink.com/about-us.htm">About Us</a> | <a target="_parent" href="http://www.executivetravellink.com/contact-us.htm">Contact Us</a> | <span class="tel">Call Us: 855-243-5561</span> </div> <div class="float_right"> <img class="cards" src="cards.png" alt="logos" title="logos"/> </div> </div> </body> </html> CSS Code (for the Footer section): .footer{font-family:arial;font-size:12px;color:#5e5e5e;width:980px;height:28px;background:url(footer_bg.jpg) repeat-x;padding:9px 10px 0px 10px;} .footer a{color:#5e5e5e; text-decoration:none;} .footer a:hover{text-decoration:underline;} .cards{vertical-align:middle;margin-left:10px;} .seal{vertical-align:middle;margin-left:10px;} .footer .tel{color:#c00000; font-weight:bold;} GoDaddy Trust Seal Code: <span id="siteseal"><script type="text/javascript" src="https://seal.godaddy.com/getSeal?sealID=KFHPuTChwFUJEViHL7RyWg1D7LlZ2jhS6pfMSTHd0TOItdQqvI"></script><br/><a style="font-family: arial; font-size: 9px" href="https://www.godaddy.com/ssl/ssl-certificates.aspx" target="_blank">ssl certificates</a></span> Hi all, Current code available for viewing he http://www.joomlatemplatesearcher.com/testtemplate/ I'm trying to position a div so that it sits (near) the bottom of a container. I'd assumed position:relative / bottom: 10px would do the trick, but no joy, and I can't figure out why that's not aligning. If anyone could offer help, I'd be very appreciative. Ultimately I'm trying to get the aqua-coloured box sitting inside the black area of the monitor (aligned from the bottom, as the div containing the monitor background is bottom-aligned to a container with variable height. Any suggestions greatly appreciated. With thanks, - SuperGrover Hello there, I am pretty new to web programming. I am currently having problem with Iframe's height. here's what happen. I have a page with 2 Div. First div is the header with menu. The 2nd Div Contains 2 Iframes. The first Iframe is my title bar location, and the 2nd iframe is my content location. The menu and title bar location is fine. When I click on something from the menu bar, it changes both the title bar and the content page. I did it like this because I don't want my title bar to scroll up when my content page is longer. So here's my problem: for the 2nd Iframe which contain my content, I couldn't set the height properly so it will fill and extend to the bottom of the screen when resolution is high. Also i don't want a scroll bar to the whole website, but only to the 2nd iframe. here's an example. I made a very simple version of what is exactly my problem. So is easier to read on the forum. index.html's 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body scroll="no"> <div id="apDiv1" scrolling="no"> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> <p>This is a test.</p> </div> <div id="apDiv2" scrolling="no"> <iframe src="123.html" style="position:absolute; width:780px; height:35px; top:240px;" scrolling="no"> </iframe> <iframe src="abc.html" style="position:absolute; width:780px; height:100%; top:275px;" scrolling="yes"> </iframe> </div> </body> </html> 123.html's 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> 1234567 </body> </html> abc.html's 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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Untitled Document</title> </head> <body> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> <p>TEST</p> </body> </html> Notice, I have a long TEST there. because i want only the iframe to scroll, but not the whole website. Anyone know a solution to this? Usually 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? I'm attempting to insert a image map menu at the bottom of each page, however for some reason there is a 2-4 pixel gap between the menu and the bottom of the table and I can't figure out why. Here is the URL: http://www.knockoutwebsites4u.com/LSC/index.html Thanks for your help in this matter. Hi I just creating a website skin I have upload he http://autismnetwork.jatos.co.uk/skin/skin.html I need to get rid of that irritating little gap between the bottom of the logo image and the bottom of the logo DIV. if anyone could show me some code thats does that, it'd be much appreciated. Thanks, Jamie ....I had enough! My footer is all over the place! Why can't it just move down when the text becomes longer! I am just using <div>. My header, the nav bar and the right side bar are fixed and I want the footer to just fit in underneath. Anybody got some code which solves that problem? Chris PHP Code: <?php echo "<div class='mainarea'>"; include ("includes/header.inc"); include ("includes/navigation.inc"); if ($var == 'service' or $var == 'consultancy') { echo "<div class='textarea_services'><p><br /></p>"; include ("text.php"); echo "</div>"; } else { echo "<div class='textarea'><p><br /></p>"; include ("text.php"); echo "</div>"; } if ($var != 'service' and $var != 'consultancy'){include ("includes/rightside.inc");} if ($var != 'privacy'){include ("includes/footer.inc");} echo "</div>"; ?> Hi Everyone, I'm slightly confused by this one. But i'm sure theres a hack out there to fix it. Basically, in firefox and konqueror, running on kubuntu, the top navigation bar at http://www.tendervendors.com/dev/payroll.html displays correctly, and when you hover over it, it fills the li with a semi-opaque background. This is correct. Its done, by filling the a element, with a background-color and then applying opaque: 0.5; The a element also has padding, which makes it fill out to the size of the li element, so the a element fills its portion of the ul, and looks like the li has the affect applied to it. However, in opera, the right and left padding is correct, but the height padding doesn't work. Does anyone know of a bug in opera that would be causing this problem, and possibly a code fix for it? TIA Matthew Millar hi guys im after a simple code so that the background on my forum is fixed and only the foreground moves up and down, someone must know iv looked all over the place and cant find how anywhere,someone help please Cheers Jacob Hello. I need some assistance in figure out how to make a fixed/linkable/image. I used this code here
HTML Code: <body style="background-attachment: fixed; background-repeat: no-repeat;" background="XXX.jpg"> which worked great in keeping its place. Then I added HTML Code: <a href="http://www.davesite.com/"> before and after but no luck. Im trying to get that link to work for the background too, but its not working out at all. "Sadly no HTML skills whatsoever" |
|||||||