Member Avatar for kz13

I am trying to create a footer and facing a problem while doing so...

This is my html code:

<div id="container">

<div id="main">

<div id="terms">

// content

</div> // closing terms 
</div> // closing main

 <div id="footer">
// content
</div>
</div> // closing container

And css code is

html, body {
    height:100%;
    margin:0;            
    background: #F0FAFF;
}

#container {
    min-height:100%;
    position:relative;
}

#main {
    height:100%;
    font-size:150%;
    clear:both;
    overflow:auto;
    padding-bottom:80px;
}

#footer {
    position:absolute;
    background-color:#FF6633;
    bottom:0;
    width:100%; 
    height:80px;             
}

#termsandpolicy {
position:absolute;
left:3%;
width:72%;
top:90px;
}

And result that I get is http://www.walknshine.com/termsofuse.php


What is the problem...I have searched in google a lot but not able to get any significant css code...plzz help....

  • 4 Contributors
  • 11 Replies
  • 169 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by macgurl70

Recommended Answers

All 11 Replies

Member Avatar for twiss

Do you want it at the bottom of the page or of the screen? If at the bottom of the screen, change the position of #footer to fixed and add padding-bottom: 100px; to #termsandpolicy.

Member Avatar for kz13

Do you want it at the bottom of the page or of the screen? If at the bottom of the screen, change the position of #footer to fixed and add padding-bottom: 100px; to #termsandpolicy.

Thnx for the reply twiss but I want the footer to be at the bottom of page...

Member Avatar for almostbob

take the positioned footer outside of any other container, else it is position relative to the container, not the screen

<div id="container">
<div id="main">
<div id="terms">// content
</div> // closing terms 
</div> // closing main
</div> // closing container
<div id="footer"> content </div>
Edited by almostbob because: n/a
Member Avatar for kz13

take the positioned footer outside of any other container, else it is position relative to the container, not the screen

<div id="container">
<div id="main">
<div id="terms">// content
</div> // closing terms 
</div> // closing main
</div> // closing container
<div id="footer"> content </div>

Thanx almostbob...tht did it...but cant I get single scroll in http://www.walknshine.com/termsofuse.php....

Member Avatar for twiss

Change height to auto (#main). Or just remove it, auto is the default.

Edited by twiss because: n/a
Member Avatar for kz13

Change height to auto (#main). Or just remove it, auto is the default.

I have done that...now here is the issue

Go to http://www.walknshine.com/index.php?organization=0

Same is in http://walknshine.com/privacy.php

The code is

<body>
<div id="container">

<div id="main">

<div id="terms">

// content

</div> // closing sample
</div> // closing main
</div> // closing container 

 <div id="footer">
// content
</div>
</body>

html, body {
    height:100%;
    margin:0;            
    background:#FFFFFF; 
}

#container {
    min-height:100%;
    position:relative;
}

#container {
    height:100%;
}

#main {
    height:auto;
    font-size:150%;
    clear:both;
    overflow:auto;
    padding-bottom:80px;
}

#footer {

    background-color:#3489C0;
    bottom:0;
    width:100%; 
    height:80px;             
}
Member Avatar for almostbob

Its doing precisely what you told it to
#container min-height:100% height:100%
plus the size of the footer

remove the height statements, they are redundant anyway

Edited by almostbob because: n/a
Member Avatar for kz13

Its doing precisely what you told it to
#container min-height:100% height:100%
plus the size of the footer

remove the height statements, they are redundant anyway

I have done and problem is solved for contents longer than the screen...

But for small contents like http://www.walknshine.com/about.php

OR

http://www.walknshine.com/index.php?organization=0

Footer gets located much above as per content's length

Here is the changed css code:

html, body {
    height:100%;
    margin:0;            
    background:#FFFFFF; 
}

#container {
    
    position:relative;
}

#container {
    
}

#main {
    
    font-size:150%;
    clear:both;
    overflow:auto;
    padding-bottom:80px;
}

#footer {

    background-color:#3489C0;
    bottom:0;
    width:100%; 
    height:80px;             
}

Same result is obtained from

html, body {
    margin:0;            
    background:#FFFFFF; 
}

// Rest is same
Member Avatar for kz13

Is there any relation between the docstype used and my problem....its been while I am not getting any response...any suggestion can be helpful..:)

Member Avatar for macgurl70

Rough draft possibility for the page layout code.

CSS Code

body{
	margin:0px;
}

header, nav, footer, article, section {
	display:block;
}

section {
   background-color:#80B59D;
   width:90%;
   color:white;
   margin-bottom:25px;
   padding:10px;
   }

nav {
	float:right;
	width:25%;
	padding:10px;
}

#login{
background-color:#E2E3E3;
border-style:solid;
border-width:thin;
padding:10px;
text-decoration:none;
border-color:#E2E3E3;
margin-top:30px;
margin-bottom:100px;

}

article {
	float:left;
	width:74%;
	margin-top:-300px;
	vertical-align:top;
	margin-left:20px;
}

footer{
	clear:both;
	background-color:#3489C0;
	margin:0px;
	height:60px;
	color:white;
	text-align:center;
	vertical-align:middle;
	padding-top:25px;
	padding-bottom:10px;
}

.footerTable{
    width:100%;
	margin-left:0px;
	margin-right:0px;
	font-size:12pt;
	color:white;
	}

header{
	background-color:#7E587E;
	color:#E2E3E3;
	padding:10px;
	padding-left:30px;
	padding-right:0px;
	padding-bottom:3px;
	padding-top:5px;
	top:0px;
	font-size:x-large;
	border-bottom:thick #7E587E solid;
	border-right:thick #7E587E solid;
	margin:0px;
}

#topnav{
     background-color:#006600;
	position:relative;
	bottom:0px;
	width:103%;
	font-size:medium;
	color:green;
	margin-left:-30px;
	height:35px;
	vertical-align:top;
	text-align:center;
	padding-bottom:5px;
	padding-top:1px;
	margin-top:-30px;
}

Html code (the javascript does need to be there - it allows IE 8 to render correctly)

<!DOCTYPE html>

<head>

<script type="text/javascript">
document.createElement('header');
document.createElement('nav');
document.createElement('article');
document.createElement('footer');
document.createElement('section');
</script>

<link href="IndexStyles.css" rel="stylesheet" type="text/css">

</head>
<html>
<body>

<header>
<table class="footerTable"><tbody>
<tr><td>Walk'n'Shine Welcomes You</td>
<td>Terms of Use</td>
<td>Share Popular &nbsp&nbsp |&nbsp Get Popular</td>
</tr>
</tbody></table>
</header>



<nav>
<form action="" id="contactform" onsubmit="return false;">
<div id= "login">  
<font face="Georgia" size="-1">
 
Email:
 
<br>
 
 <input type="text" size="30%" name="username" class="textbox" id="textfield"  /> 
 
<br><br>
 
Password:
<br>
         <input type="password" name="password" size="30%" id="textfield2" class="textbox"  />
 
<br><br>
</font>
       
    <div align="center">
        <font size="-1" face="Arial" color="#2B5555" >
     <input type="checkbox" name="remember" id="checkbox" />
Rem me </font>   
 
&nbsp;
<font size="-1" face="Georgia" >
 <input type='image' src='login-button.jpg' id='button' name='login_user' value='Login'  onclick='login();'/>
 
</font> 
&nbsp;&nbsp;&nbsp;
<font size="-1" face="Arial" >
<a href="registration2.php" title='Get registered in Walk n Shine' class='nav'>Register</a></font>
</div>
</div>
</form>



</td>
</tr>
</table>
</nav>


<article>
<section>
<h1>Conditions of Use</h1>
Welcome to our online store! Walknshine and its associates provide their services to you subject to the following conditions. If you visit or shop within this website, you accept these conditions. Please read them carefully.
</section>
<section>
<h2>PRIVACY</h2>
Please review our Privacy Notice, which also governs your visit to our website, to understand our practices.
</section>
<section>
<h2>ELECTRONIC COMMUNICATIONS</h2>
When you visit Walknshine or send e-mails to us, you are communicating with us electronically. You consent to receive communications from us electronically. We will communicate with you by e-mail or by posting notices on this site. You agree that all agreements, notices, disclosures and other communications that we provide to you electronically satisfy any legal requirement that such communications be in writing.
</section>
<section>
<h2>COPYRIGHT</h2>
All content included on this site, such as text, graphics, logos, button icons, images, audio clips, digital downloads, data compilations, and software, is the property of Walknshine or its content suppliers and protected by international copyright laws. The compilation of all content on this site is the exclusive property of Walknshine, with copyright authorship for this collection by Walknshine, and protected by international copyright laws.
</section>
<section>
<h2>TRADE MARKS</h2>
Walknshines trademarks and trade dress may not be used in connection with any product or service that is not Walknshines, in any manner that is likely to cause confusion among customers, or in any manner that disparages or discredits Walknshine. All other trademarks not owned by Walknshine or its subsidiaries that appear on this site are the property of their respective owners, who may or may not be affiliated with, connected to, or sponsored by Walknshine or its subsidiaries.
</section>
<section>
<h2>LICENSE AND SITE ACCESS</h2>
Walknshine grants you a limited license to access and make personal use of this site and not to download (other than page caching) or modify it, or any portion of it, except with express written consent of Walknshine. This license does not include any resale or commercial use of this site or its contents: any collection and use of any product listings, descriptions, or prices: any derivative use of this site or its contents: any downloading or copying of account information for the benefit of another merchant: or any use of data mining, robots, or similar data gathering and extraction tools. This site or any portion of this site may not be reproduced, duplicated, copied, sold, resold, visited, or otherwise exploited for any commercial purpose without express written consent of Walknshine. You may not frame or utilize framing techniques to enclose any trademark, logo, or other proprietary information (including images, text, page layout, or form) of Walknshine and our associates without express written consent. You may not use any meta tags or any other "hidden text" utilizing Walknshines name or trademarks without the express written consent of Walknshine. Any unauthorized use terminates the permission or license granted by Walknshine. You are granted a limited, revocable, and nonexclusive right to create a hyperlink to the home page of Walknshine so long as the link does not portray Walknshine, its associates, or their products or services in a false, misleading, derogatory, or otherwise offensive matter. You may not use any Walknshine logo or other proprietary graphic or trademark as part of the link without express written permission.
</section>
<section>
<h2>YOUR MEMBERSHIP ACCOUNT</h2>
If you use this site, you are responsible for maintaining the confidentiality of your account and password and for restricting access to your computer, and you agree to accept responsibility for all activities that occur under your account or password. If you are under 18, you may use our website only with involvement of a parent or guardian. Walknshine and its associates reserve the right to refuse service, terminate accounts, remove or edit content, or cancel orders in their sole discretion.
</section>
<section>
<h2>REVIEWS, COMMENTS, EMAILS, AND OTHER CONTENT</h2>
Visitors may post reviews, comments, and other content: and submit suggestions, ideas, comments, questions, or other information, so long as the content is not illegal, obscene, threatening, defamatory, invasive of privacy, infringing of intellectual property rights, or otherwise injurious to third parties or objectionable and does not consist of or contain software viruses, political campaigning, commercial solicitation, chain letters, mass mailings, or any form of "spam." You may not use a false e-mail address, impersonate any person or entity, or otherwise mislead as to the origin of a card or other content. Walknshine reserves the right (but not the obligation) to remove or edit such content, but does not regularly review posted content.
If you do post content or submit material, and unless we indicate otherwise, you grant Walknshine and its associates a nonexclusive, royalty-free, perpetual, irrevocable, and fully sublicensable right to use, reproduce, modify, adapt, publish, translate, create derivative works from, distribute, and display such content throughout the world in any media. You grant Walknshine and its associates and sublicensees the right to use the name that you submit in connection with such content, if they choose. You represent and warrant that you own or otherwise control all of the rights to the content that you post: that the content is accurate: that use of the content you supply does not violate this policy and will not cause injury to any person or entity: and that you will indemnify Walknshine or its associates for all claims resulting from content you supply. Walknshine has the right but not the obligation to monitor and edit or remove any activity or content. Walknshine takes no responsibility and assumes no liability for any content posted by you or any third party.
</section>
<section>
<h2>RISK OF LOSS</h2>
All items purchased from Walknshine are made pursuant to a shipment contract. This basically means that the risk of loss and title for such items pass to you upon our delivery to the carrier.
</section>
<section>
<h2>PRODUCT DESCRIPTIONS</h2>
Walknshine and its associates attempt to be as accurate as possible. However, Walknshine does not warrant that product descriptions or other content of this site is accurate, complete, reliable, current, or error-free. If a product offered by Walknshine itself is not as described, your sole remedy is to return it in unused condition.
</section>
<section>
DISCLAIMER OF WARRANTIES AND LIMITATION OF LIABILITY
THIS SITE IS PROVIDED BY Walknshine ON AN "AS IS" AND "AS AVAILABLE" BASIS. Walknshine MAKES NO REPRESENTATIONS OR WARRANTIES OF ANY KIND, EXPRESS OR IMPLIED, AS TO THE OPERATION OF THIS SITE OR THE INFORMATION, CONTENT, MATERIALS, OR PRODUCTS INCLUDED ON THIS SITE. YOU EXPRESSLY AGREE THAT YOUR USE OF THIS SITE IS AT YOUR SOLE RISK.
TO THE FULL EXTENT PERMISSIBLE BY APPLICABLE LAW, Walknshine DISCLAIMS ALL WARRANTIES, EXPRESS OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. Walknshine DOES NOT WARRANT THAT THIS SITE, ITS SERVERS, OR E-MAIL SENT FROM Walknshine ARE FREE OF VIRUSES OR OTHER HARMFUL COMPONENTS. Walknshine WILL NOT BE LIABLE FOR ANY DAMAGES OF ANY KIND ARISING FROM THE USE OF THIS SITE, INCLUDING, BUT NOT LIMITED TO DIRECT, INDIRECT, INCIDENTAL, PUNITIVE, AND CONSEQUENTIAL DAMAGES.
CERTAIN STATE LAWS DO NOT ALLOW LIMITATIONS ON IMPLIED WARRANTIES OR THE EXCLUSION OR LIMITATION OF CERTAIN DAMAGES. IF THESE LAWS APPLY TO YOU, SOME OR ALL OF THE ABOVE DISCLAIMERS, EXCLUSIONS, OR LIMITATIONS MAY NOT APPLY TO YOU, AND YOU MIGHT HAVE ADDITIONAL RIGHTS.
</section>
<section>
<h2>APPLICABLE LAW</h2>
By visiting Walknshine, you agree that the laws of the state of DEFINE_STATE, DEFINE_COUNTRY, without regard to principles of conflict of laws, will govern these Conditions of Use and any dispute of any sort that might arise between you and Walknshine or its associates.
</section>
<section>
<h2>DISPUTES</h2>
Any dispute relating in any way to your visit to Walknshine or to products you purchase through Walknshine shall be submitted to confidential arbitration in DEFINE_STATE, DEFINE_COUNTRY, except that, to the extent you have in any manner violated or threatened to violate Walknshines intellectual property rights, Walknshine may seek injunctive or other appropriate relief in any state or federal court in the state of DEFINE_STATE, DEFINE_COUNTRY, and you consent to exclusive jurisdiction and venue in such courts. Arbitration under this agreement shall be conducted under the rules then prevailing of the American Arbitration Association. The arbitrators award shall be binding and may be entered as a judgment in any court of competent jurisdiction. To the fullest extent permitted by applicable law, no arbitration under this Agreement shall be joined to an arbitration involving any other party subject to this Agreement, whether through class arbitration proceedings or otherwise.
</section>
<section>
<h2>SITE POLICIES, MODIFICATION, AND SEVERABILITY</h2>
Please review our other policies, such as our Shipping and Returns policy, posted on this site. These policies also govern your visit to Walknshine. We reserve the right to make changes to our site, policies, and these Conditions of Use at any time. If any of these conditions shall be deemed invalid, void, or for any reason unenforceable, that condition shall be deemed severable and shall not affect the validity and enforceability of any remaining condition.
</section>
<section>
<h2>QUESTIONS:</h2>
Questions regarding our Conditions of Usage, Privacy Policy, or other policy related material can be directed to our support staff by clicking on the "Contact Us" link in the side menu. Or you can email us at: info@Walknshine.com
</section>
</article>

<footer>
<table class="footerTable"><tbody>
<tr><td>About Us</td>
<td>Terms of Use</td><td>Privacy Policy</td><td>Contact Us</td>
</tr>
</tbody></table> <br />
Copyright 2011  Walknshine.come - All Rights Reserved.
</footer>

</body>
</html>

I am sure it could be made a lot prettier - but this is based off of an existing practice page I already had.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.