Forums

CSS

This topic is locked

CSS Footers

Robert Breitman

Posted 14 May 2005 12:05:53

has voted

Vote

14 May 2005 12:05:53 Robert Breitman posted:

I have followed the tutorial by creating a container for the whole page and putting the footer at the bottom ... this works fine when the window is fully expanded, but seems to have problems in a window that is not... the footer appears at the bottom of the window and the text starts running under it and past it... any suggestions?

This is the .css file (the footer is #siteinfo)
<pre id=code><font face=courier size=2 id=code>
/***********************************************/
/* HTML tag styles */
/***********************************************/
body{
font-family: Arial,sans-serif;
color: #000000;
line-height: 1.166;
margin: 0px;
padding: 0px;
background: #cccccc url("images/page_background.png"

fixed;
}

html, body, #contents {
min-height: 100%;
width: 100%;
height: 100%;
}

html>body, html>body #contents {
height: auto;
}

#contents {
position: absolute;
left: 0px;
top: 0px;
}

/******* hyperlink and anchor tag styles *******/

a:link, a:visited{
color: #005FA9;
text-decoration: none;
}

a:hover{
text-decoration: underline;
}

/************** header tag styles **************/

h1{
font: bold 120% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h2{
font: bold 114% Arial,sans-serif;
color: #006699;
margin: 0px;
padding: 0px;
}

h3{
font: bold 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

h4{
font: 100% Arial,sans-serif;
color: #333333;
margin: 0px;
padding: 0px;
}

h5{
font: 100% Arial,sans-serif;
color: #334d55;
margin: 0px;
padding: 0px;
}

/*************** list tag styles ***************/

ul{
list-style-type: square;
}

ul ul{
list-style-type: disc;
}

ul ul ul{
list-style-type: none;
}

/********* form and related tag styles *********/

form {
margin: 0;
padding: 0;
}

label{
font: bold 1em Arial,sans-serif;
color: #334d55;
}

input{
font-family: Arial,sans-serif;
}

/***********************************************/
/* Layout Divs */
/***********************************************/
#pagecell1{
position:absolute;
top: 120px;
left: 2%;
right: 2%;
width:95.6%;
background-color: #ffffff;
}

#tl {
position:absolute;
top: -1px;
left: -1px;
margin: 0px;
padding: 0px;
}

#tr {
position:absolute;
top: -1px;
right: -1px;
margin: 0px;
padding: 0px;
}

#masthead{
position: absolute;
top: 5px;
left: 2%;
right: 2%;
width:95.6%;

}

#pageNav{
float: right;
width:178px;
padding: 0px;
background-color: #F5f7f7;
border-left: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
font: small Verdana,sans-serif;
}

#content{
padding: 0px 10px 0px 0px;
margin:0px 178px 0px 0px;
border-right: 1px solid #ccd2d2;
}

/***********************************************/
/* Component Divs */
/***********************************************/
#siteName{
margin: 0px;
padding: 16px 0px 8px 0px;
color: #ffffff;
font-weight: normal;
}

/************* globalNav styles ****************/

#globalNav{
position: relative;
width: 100%;
min-width: 640px;
height: 22px;
color: #cccccc;
padding: 0px;
margin: 0px;
background-image: url("images/glbnav_background.gif"

;
}

/************** utility styles *****************/

#utility{
font: 125% Times New Roman, Times, serif;
position: absolute;
top: 5px;
right: 0%;
color: #ffffff;
font-style:italic;
font-weight:bold;
}

/************* breadCrumb styles ***************/

#breadCrumb{
padding: 5px 0px 5px 10px;
font: small Verdana,sans-serif;
color: #AAAAAA;
}

#breadCrumb a{
color: #AAAAAA;
}

#breadCrumb a:hover{
color: #005FA9;
text-decoration: underline;
}

/************** feature styles *****************/

.feature{
padding: 0px 0px 10px 10px;
font-size: 80%;
min-height: 200px;
height: 200px;
}
html>body .feature {height: auto;}

.feature h3{
font: bold 175% Arial,sans-serif;
color: #FF0000;
padding: 30px 0px 5px 0px;
}

.feature img{
float: left;
padding: 0px 10px 5px 0px;
}

/*************** story styles ******************/

.story {
padding: 10px 0px 0px 10px;
font-size: 80%;
}

.story h3{
font: bold 125% Arial,sans-serif;
color: #FF0000;
}

.story p {
padding: 0px 0px 10px 0px;
}

td.storyLeft{
padding-right: 12px;
}

/************** siteInfo styles ****************/

#siteInfo{
border-top: 1px solid #cccccc;
font-size: small;
color: #000000;
margin-top: 30px;
background-color: #FFFFFF;
position: absolute;
bottom: 0;
left: 2%;
right: 2%;
width:95.6%;
margin-bottom: 5px;
}

#siteInfo img{
padding: 4px 4px 4px 0px;
vertical-align: middle;
}

/**************** advert styles *****************/

#advert{
padding: 10px;
}

#advert img{
display: block;
}

#onepixel
{
position: absolute;
top: 0px;
left: 0px;
width: 1px;
height: 1px;
}

/****************** misc styles *****************/
.address {font-size: x-small}

/********************* end **********************/
</font id=code></pre id=code>

the code for a sample page is
<pre id=code><font face=courier size=2 id=code>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<title>SER Communications</title>
<META NAME="keywords" content="">
<META NAME="description" content="">

<meta name="robots" content="ALL">
<meta name="resource-type" content="document">
<meta http-equiv="pragma" content="no-cache">
<meta name="revisit-after" content="7 days">
<meta name="classification" content="">
<meta name="distribution" content="Michigan">
<meta name="rating" content="General">
<meta name="author" content="Netspace">
<meta name="language" content="English">
<meta name="doc-type" content="Web Page">
<meta name="doc-class" content="Completed">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/javascript" src="menus/menu_scr.js"></script>
<link rel="stylesheet" href="ser.css" type="text/css">
</head>
<body>
<div id="contents">
<div id="siteInfo">
<table width="100%" border="0" cellpadding="0">
<tr>
<td><a href="index.htm">Home</a> | <a href="ser_communications_service_overview.htm">Services</a> | <a href="ser_communications_industries_overview.htm">Industries</a> | <a href="ser-communications-project-portfolio1.htm">Project
Portfolio</a> | <a href="about_ser_communications.htm">About Us</a> | <a href="contact_ser_communications.htm">Contact
Us</a> <br>
Copyright ©2005 SER Communications, Inc. All rights reserved. </td>
<td align="right"><a href="www.netspace25.com" target="_blank"><img src="images/poweredbynetspace.gif" alt="Netspace of Oakland County – an Internet Consultantcy focused on creating an effective web presence for its clients." border="0"></a></td>
</tr>
</table>
</div>
<div id="onepixel"> <img src="images/blank.gif" width="1" height="1" alt=""> </div>
<div id="masthead"> <img src="images/serlogo_white.gif" alt="">
<div id="utility">“Service begins with SER”</div>
<div id="globalNav">
<table cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img src="./menus/menu_m1_b.png" alt="SER Communications" /></td>
<td><a href="index.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm0',3)" onmouseout="chgBg(m1,'m1tlm0',0,1)"><img border="0" id="m1tlm0" src="./menus/menu_m1_i0.png" alt="SER Communications – Home Page" /></a></td>
<td><img src="./menus/menu_m1_s.png" alt="SER Communications" /></td>
<td><a href="javascript:void(0);" onmouseover="exM(m1,'m1mn1','m1tlm1',event);chgBg(m1,'m1tlm1',3)" onmouseout="coM(m1,'m1mn1','m1tlm1');chgBg(m1,'m1tlm1',0)"><img border="0" id="m1tlm1" src="./menus/menu_m1_i1.png"alt="SER Communications – Services" /></a></td>
<td><img src="./menus/menu_m1_s.png" alt="SER Communications" /></td>
<td><a href="ser_communications_industries_overview.htm" onmouseover="exM(m1,'m1mn2','m1tlm2',event);chgBg(m1,'m1tlm2',3)" onmouseout="coM(m1,'m1mn2','m1tlm2');chgBg(m1,'m1tlm2',0)"><img border="0" id="m1tlm2" src="./menus/menu_m1_i2.png"alt="SER Communications – Industries Served" /></a></td>
<td><img src="./menus/menu_m1_s.png" alt="SER Communications" /></td>
<td><a href="javascript:void(0);" onmouseover="exM(m1,'m1mn3','m1tlm3',event);chgBg(m1,'m1tlm3',3)" onmouseout="coM(m1,'m1mn3','m1tlm3');chgBg(m1,'m1tlm3',0)"><img border="0" id="m1tlm3" src="./menus/menu_m1_i3.png"alt="SER Communications – Project Portfolio" /></a></td>
<td><img src="./menus/menu_m1_s.png" alt="SER Communications" /></td>
<td><a href="javascript:void(0);" onmouseover="exM(m1,'m1mn4','m1tlm4',event);chgBg(m1,'m1tlm4',3)" onmouseout="coM(m1,'m1mn4','m1tlm4');chgBg(m1,'m1tlm4',0)"><img border="0" id="m1tlm4" src="./menus/menu_m1_i4.png"alt="SER Communications – About Us" /></a></td>
<td><img src="./menus/menu_m1_s.png" alt="SER Communications" /></td>
<td><a href="contact_ser_communications.htm" onmouseover="exM(m1,'none','',event);chgBg(m1,'m1tlm5',3)" onmouseout="chgBg(m1,'m1tlm5',0,1)"><img border="0" id="m1tlm5" src="./menus/menu_m1_i5.png"alt="SER Communications – Contact Us" /></a></td>
<td><img src="./menus/menu_m1_e.png" alt="SER Communications" /></td>
</tr>
</table>
</div>

</div>

<div id="pagecell1">

<img alt="" src="images/tl_curve_white.gif" height="6" width="6" id="tl"> <img alt="" src="images/tr_curve_white.gif" height="6" width="6" id="tr">


<div id="breadCrumb" align="right"> <a href="#">Home</a> /</div>

<div id="pageNav">
<div id="advert"> 
<p><img src="images/ser_factoid_box.jpg" alt="" width="150" height="225" /></p>

<div align="center"><span class="address">SER Communications, Inc.<br>
25367 Dequindre Road<br>
Madison Heights, MI<br>
48071<br>
<br>
(248) 398-1009 </span></div>
</div>
</div>
<div id="content"> 
<div class="feature"> <img src="" alt="" width="280" height="200">
<h3>Feature Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec
molestie. Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum
condimentum facilisis nulla. In hac habitasse platea dictumst. Nulla
nonummy. Cras quis libero. Cras venenatis. Aliquam posuere lobortis
pede. Nullam fringilla urna id leo. Praesent aliquet pretium erat.
Praesent non odio. Pellentesque a magna a mauris vulputate lacinia.
Aenean viverra. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos hymenaeos. Aliquam lacus. Mauris magna
eros, semper a, tempor et, rutrum et, tortor. </p>
</div>
<div class="story">
<h3>Story Title</h3>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.
Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum
facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras
quis libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam
fringilla urna id leo. Praesent aliquet pretium erat. Praesent non
odio. Pellentesque a magna a mauris vulputate lacinia. Aenean viverra.
Class aptent taciti sociosqu ad litora torquent per conubia nostra,
per inceptos hymenaeos. Aliquam lacus. Mauris magna eros, semper a,
tempor et, rutrum et, tortor. </p>
</div>
</div>

</div>

</div>
</body>
</html>
</font id=code></pre id=code>

Edited by - breitman on 14 May 2005 12:41:34

Replies

chadmih chad

Replied 20 May 2005 02:16:15

20 May 2005 02:16:15 chadmih chad replied:

Can you send a link to the site so we can see the problem?

Thanks.

<h6>JUXTAFLO_</h6>
<img src="www.juxtaflo.com/images/flashkit_footer.jpg" border=0>

Reply to this topic

Latest Extensions

App Connect Summernote File Upload Upload different files in Summernote Editor
App Connect Summernote Simple, yet powerful and modern WYSIWYG Editor
Bootstrap 4 Dynamic Table Generator 2 Automatically generate dynamic data tables
Bootstrap 4 Dynamic Form Generator 2 Auto generate perfect Bootstrap 4 dynamic forms in seconds
App Connect Bootstrap 4 Dynamic Paging Generator Auto generate awesome dynamic Bootstrap 4 paging in seconds
App Connect Event Calendar The most powerful full-sized event calendar for Dreamweaver
DMXzone App Connect Next generation client side framework for data-driven web sites and apps
DMXzone Database Custom Query Create advanced, complex custom SQL queries with ease

Latest Videos

Using App Connect Autocomplete Learn how to add autocomplete functionality on your page, using the App Connect Autocomplete
Creating Custom SQL Queries Learn how to create custom SQL Queries with DMXzone Database Custom Query
Restricting Access to Your Pages Learn how to restrict access to your pages, using DMXzone Security Provider 2
Adding Log Out Functionality with DMXzone Security Provider 2 Learn how to add log out functionality to your page with DMXzone Security Provider 2
Creating a Log In Page with DMXzone Security Provider 2 Learn how to create a log in page with DMXzone Security Provider 2
Setting Up Site Security Settings Learn how to setup your site security, using DMXzone Security Provider 2
Generating an Update Record Form Learn how to create an update record form, using the Bootstrap 4 Dynamic Form Generator 2
Generating an Insert Record Form Learn how to create an insert record form, using the Bootstrap 4 Dynamic Form Generator 2