•
•
•
•
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 373,477 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,982 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 5566 | Replies: 39 | Solved
 |
•
•
Join Date: Feb 2005
Posts: 427
Reputation: 
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
Okay,
- Revision 1 - better placement of footer -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>
<body>
<div id="pagewrap">
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>
<!-- Main Section -->
<div id="container">
<div id="content">
<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->
<p>
Test content goes here.
</p>
<p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p>
</div> <!-- content -->
<div class="clear"> </div>
</div> <!-- container -->
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>
<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>
<div class="clear"> </div>
<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->
<div class="clear"> </div>
</div> <!--pagewrap-->
</body>
</html>
/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}
body
{
MARGIN: 0;
padding: 0;
background-color: #abcdef;
}
#pagewrap
{
background-color: #ffffff;
/* Standard compliant (Non-IE) Browsers only - MFF, NN, Opera etc. */
min-width: 770px;
}
#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}
#container
{
/* This is a Variable figure - it should be equal to the size of your footer content and the height of #pagefooter! */
margin: 0 0 2em 0;
padding: 0;
clear: both;
float: left;
width: 100%;
height: auto;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}
#content
{
height: 100%;
margin-left: 150px;
padding: 0;
position: relative;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}
#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}
#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}
#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}
/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.
#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/
#pagefooter
{
border-top: 2px solid #abcdef;
/* This is a Variable figure - it should be equal to the size of it's content and matchthe bottom margin in #container! */
height: 2em;
}
img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}
.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch"
*/
{
clear: both;
font-size: 1px;
line-height: 1px;
}
p
{
margin: 0;
padding: 5px 0;
}
- Revision 1 - better placement of footer -
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0021)http://test.eezs.com/ -->
<html>
<head>
<title>test</title>
<meta http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<link href="test_files/main.css" type=text/css rel=stylesheet>
<meta content="MSHTML 6.00.2900.3157" name=GENERATOR>
</head>
<body>
<div id="pagewrap">
<!-- Header Section -->
<div id=header>
<img height=100 src="test_files/head.gif" />
</div>
<!-- Main Section -->
<div id="container">
<div id="content">
<div id="leftcol">
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
<ul>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
<li>
<a href="#" title="whatever">Link</a>
</li>
</ul>
</div> <!-- leftcol -->
<p>
Test content goes here.
</p>
<p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p><p>
Test content goes here.
</p>
</div> <!-- content -->
<div class="clear"> </div>
</div> <!-- container -->
<!-- text below generated by server. PLEASE REMOVE -->
<!-- Counter/Statistics data collection code -->
<script language="JavaScript" src="test_files/geov2_001.js"></SCRIPT>
<script language="javascript">geovisit();</SCRIPT>
<noscript>
<IMG height=1 alt=setstats src="test_files/visit.gif" width=1 border=0>
</noscript>
<div class="clear"> </div>
<!-- Footer Section -->
<div id="pagefooter">
Page Footer content
</div> <!--pagefooter-->
<div class="clear"> </div>
</div> <!--pagewrap-->
</body>
</html>
/* You didn't include HTML */
html
{
margin: 0;
padding: 0;
height: 100%;
/* Font-size set in PX will not Resize in IE! */
/* Instead, you could go for text-size: 75%; */
font-size: 11px;
/* helvetica goes before arial, as arial is the more common modern font */
font-family: helvetica, arial, sans-serif;
}
body
{
MARGIN: 0;
padding: 0;
background-color: #abcdef;
}
#pagewrap
{
background-color: #ffffff;
/* Standard compliant (Non-IE) Browsers only - MFF, NN, Opera etc. */
min-width: 770px;
}
#header
{
height: 100px;
background-color: #abcdef;
text-align: left;
float: left;
width: 100%;
}
#container
{
/* This is a Variable figure - it should be equal to the size of your footer content and the height of #pagefooter! */
margin: 0 0 2em 0;
padding: 0;
clear: both;
float: left;
width: 100%;
height: auto;
/* IE Bug Fix - # Hack may only work for IE 5/6 - 7 doesn't need it */
#zoom: 1;
}
#content
{
height: 100%;
margin-left: 150px;
padding: 0;
position: relative;
/* IE Bug Fix - prevents 3px Jog */
#display: inline-block;
}
#leftcol
{
float: left;
margin: 0 -1px 0 -150px;
padding: 0;
width: 150px;
background-color: #EEEEEE;
text-align: center;
/* IE Bug Fixes - # Hack may only work for IE 5/6 - 7 doesn't need it */
#display: inline; /* Stops IE implimenting the Double MArgin Float Bug */
#position: relative; /* Stops IE from botching negative placement */
}
#leftcol ul
{
/* Wheres the other value ??? you have three... which means T R B... no Left! */
margin: 5px;
padding: 0;
border: #cccccc 1px solid;
list-style: none;
background-color: #ffffff
}
#leftcol a, #leftcol a:visited
/* As there is no difference between a Link and a Visited:Link, you can put them together! */
{
margin: 0;
padding: 0;
color: #000000;
text-decoration: none;
display: block;
width: 138px;
vertical-align: bottom;
line-height: 2em;
}
/*
There really should be a difference when interacting with a Link.
This permits people to "know" that they are workig with a Link.
Though changing BG is okay... you may want to think about those with color-vision issues.
- Focus is used so that keyboard-users can use the "Tab Key".
- Active is used as IE doesn't work with Focus.
#leftcol a:active, #leftcol a:hover, #leftcol a:focus
{
background-color: #abcdef;
text-decoration: underline;
}
*/
#pagefooter
{
border-top: 2px solid #abcdef;
/* This is a Variable figure - it should be equal to the size of it's content and matchthe bottom margin in #container! */
height: 2em;
}
img
/* IE Bug Fix - Images in the markup withany space after results in a "gap" in IE */
{
display: block;
}
.clear
/* This is to handle floats being contained.
Thechnically, a float is no longer part of the normal document flow - so they can overlap!
By placing a div within the parent, after the floated children - and making it clear:both, it forces the parent to "stretch"
*/{
clear: both;
font-size: 1px;
line-height: 1px;
}
p
{
margin: 0;
padding: 5px 0;
}
•
•
Join Date: Jan 2007
Posts: 2,410
Reputation:
Rep Power: 6
Solved Threads: 99
Actually, the screen height is not defined in all browsers in that manner. The height attribute of the body tag is the height of the document, not the height of the browser window.
You can use JavaScript to get the pixel size from document.body.clientHeight as the browser sees it, and then poke these values into the height or minHeight attributes of an object on the page
You can use JavaScript to get the pixel size from document.body.clientHeight as the browser sees it, and then poke these values into the height or minHeight attributes of an object on the page
Last edited by MidiMagic : Aug 17th, 2007 at 1:32 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: Jan 2007
Posts: 2,410
Reputation:
Rep Power: 6
Solved Threads: 99
By "pixel size", I mean the number of pixels in the height of the current browser window. I got clobbered by a phone call while editing, saved out, and was unable to change it afterwards it due to the stupid half-hour rule.
Last edited by MidiMagic : Aug 17th, 2007 at 2:27 pm.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2005
Location: USA
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 1
Junior Poster
Java Script method is bad either its just that diffrent browsers need diffrent commands.
•
•
Join Date: Jan 2007
Posts: 2,410
Reputation:
Rep Power: 6
Solved Threads: 99
The answer is to not expect the page to exactly fill the screen.
Daylight-saving time uses more gasoline
•
•
Join Date: Jun 2005
Location: USA
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 1
Junior Poster
well for the time being I now dont care about the height.
Almost all of my problems are solved so I am happy.
though I will look into how I can set the size of the container to the size of the screen without over flowing later.
Enough with the layout. Got to make the website now.
Almost all of my problems are solved so I am happy.
though I will look into how I can set the size of the container to the size of the screen without over flowing later.
Enough with the layout. Got to make the website now.
Last edited by ashneet : Aug 17th, 2007 at 6:00 pm.
•
•
Join Date: Feb 2005
Posts: 427
Reputation:
Rep Power: 4
Solved Threads: 12
Posting Pro in Training
good luck
•
•
Join Date: Jun 2005
Location: USA
Posts: 147
Reputation:
Rep Power: 4
Solved Threads: 1
Junior Poster
Thanks to all. I could not have done this without you all.
•
•
Join Date: Jan 2008
Posts: 4
Reputation:
Rep Power: 0
Solved Threads: 0
Newbie Poster
It works, thanks guys... exactly what i was looking for..
•
•
Join Date: Jan 2007
Posts: 2,410
Reputation:
Rep Power: 6
Solved Threads: 99
•
•
•
•
Originally Posted by autocrat 
...MidiMagic...
I think you "overead" into what he seems to want - a simple two column layout with Header and Footer... nothing complicated nor impossible with that.
He wanted it to touch the bottom of the screen. That is the impossible part.
Daylight-saving time uses more gasoline
|
•
•
•
•
Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
•
•
•
•
•
•
•
•
DaniWeb HTML and CSS Marketplace
Linear Mode
- CSS not for FIREFOX? (HTML and CSS)
- Part time PHP+HTML/CSS working at home (Web Development Job Offers)
- CSS not working in FireFox (HTML and CSS)
- css menu in ie7 : a:hover behaviour only on text not on the whole box (HTML and CSS)
- CSS Working in FF, not in IE problem :) (HTML and CSS)
- Css Fixed Background Attachment (Site Layout and Usability)
Other Threads in the HTML and CSS Forum
- Previous Thread: CSS Template Edit Problem
- Next Thread: LogicWeb / CSS Question
