Forum Moderators: not2easy
Bellow is the simplest yet cross browser compatible and works with any screen resolution pure anti-css setup.
As am trying to go anti-tables this seems to pause my workflow, I am stuck with this issue for 3 days now, I tried every possible option I mean people have some solutions but these solutions are ignoring some rules set by using tables only.
Heh, I know a lot of tricks with css, but this one sucked the most of my brains out, I just keep on telling myself that - yes it should be possible with css only.
Please help, I hate to back to tables.
<html>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr bgcolor="#FFCC00">
<td height="200" align="center">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" bgcolor="#666666"><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></td>
</tr>
</table>
</td>
</tr>
<tr align="center" bgcolor="#CC3300">
<td>
<table width="900" height="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="300" align="center" bgcolor="#999999"><h2>beautiful contents will go here, this is set to 300px minimum height<br>and stratches 100% depending on the screen<br></h2>
<h1>Is this simple setup doable? tables-free, pure 100% lovely css?</h1></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#003399">
<td height="200" bgcolor="#003399">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="200" align="center" bgcolor="#666666"><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Start with a valid document type. An invalid doctype will throw the document into quirks mode as opposed to standards compliance mode. Quirks mode will cause your CSS to fail and present many cross browser issues.
This is a valid doctype:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
This is not:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Choosing a doctype for your site [webmasterworld.com]
Next, you pull out ALL your markup and put it into CSS. Leave it in tables for now. Get rid of the attributes in the body tag (proprietary and deprecated,) and move all the color assignments to CSS. ELIMINATE the nested tables.
Next, validate [validator.w3.org] the document. This is critical. If it doesn't pass validation, it may still not display correctly.
So let's see what we have, still in a main table structure:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<style type="text/css">
body,h2 { margin: 0; padding:0; }
h2 {padding-top:75px;}
#main_container { width: 100%; }
#row1 { background-color: #FFCC00; }
#row2 { background-color: #CC3300; }
#footer { background-color: #003399; }
#row1 div, #row2 div, #footer div {
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
}
#row1 div { height: 200px; background-color: #666666; }
#row2 div { min-height: 300px; background-color: #999999; }
#footer div { height: 200px; background-color: #666666; }
</style>
</head>
<body>
<table id="main_container" cellpadding="0" cellspacing="0">
<tr>
<td id="row1">
<div><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></div>
</td>
</tr>
<tr>
<td id="row2">
<div>
<h2>beautiful contents will go here, this is set to 300px minimum
height and stratches 100% depending on the screen<br></h2>
<h1>Is this simple setup doable? tables-free, pure 100% lovely css?</h1>
</div>
</td>
</tr>
<tr>
<td id="footer">
<div><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></div>
</td>
</tr>
</table>
</body>
</html>
OKAY! Not exactly the same, but very close I'll let you work out the details. :-)
So we only have one task left: kill the tables. Using the exact same CSS used above,
<div id="main_container">
<div id="row1">
<div><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></div>
</div>
<div id="row2">
<div>
<h2>beautiful contents will go here, this is set to 300px minimum
height and stratches 100% depending on the screen<br></h2>
<h1>Is this simple setup doable? tables-free, pure 100% lovely css?</h1>
</div>
</div>
<div id="footer">
<div><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></div>
</div>
</div> <!-- end main_container -->
And there you go. You don't need to be a guru, you just have to be persistent.
The major problem you will encounter is valign does not have a coinciding selector in CSS. But IMO that's not a big deal in most contexts.
I'll try to explain what I am trying to achieve.
1. There is a background stripe that goes across the screen left to right directly on the top. In that stripe there is top navigation menu that has to be always centered and compatible with 1024px minimum screen resolution.
2. Contents are also centered compatible with 1024px minimum screen resolution. Minimum height for contents should be at least 300px. No maximum all depends on the screen size and should stretch top to bottom, pushing the footer to the very bottom.
3. There is a background stripe that goes across the screen left to right directly on the bottom. In that stripe there is bottom navigation menu that has to be always centered and compatible with 1024px minimum screen resolution. It has to be stuck to the very bottom of the window.
Bellow it is not doing all of it.
IE6 it is ignoring 300px min-height and doesn't align footer to bottom
FF2 & FF3 doesn't align footer to bottom
I can post version 2 if you want but there I have everything working perfect except for one huge point, my footer is overlapping my contents and header if there is much of contents or screen isn't maximized, forget about scrolling.. heh..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title> <style type="text/css">
body,h2 { margin: 0; padding:0; }
h2 {padding-top:25px;}
#main_container {
width: 100%;
height: 100%;
}
#header { background-color: #FFCC00; }
#contents { background-color: #CC3300; }
#footer { background-color: #003399; }
#header div {
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
}
#contents div {
width: 900px;
height: 100%;
min-height: 100%;
margin: 0 auto 0 auto;
text-align: center;
}
#footer div {
width: 900px;
margin: 0 auto 0 auto;
text-align: center;
}
#header div { height: 200px; background-color: #666666; }
#contents div { min-height: 300px; background-color: #999999; }
#footer div { height: 200px; background-color: #666666; }
</style>
</head>
<body>
<div id="main_container">
<div id="header">
<div><h2>beautiful header will go here, 200px fixed height and stuck to the top</h2></div>
</div>
<div id="contents">
<div><h2>beautiful contents will go here, this is set to 300px minimum height and stratches 100% depending on the screen<br></h2><h1>Is this simple setup doable? tables-free, pure 100% lovely css?</h1></div>
</div>
<div id="footer">
<div><h2>beautiful footer will go here, 200px fixed height and stuck to the bottom</h2></div>
</div>
</div>
</body>
</html>
You do need to:
I think the best you can do is to read through and try to follow some of the thinking process involved in creatign pages with separated content and layout.
I've done a few in the past out here that show the steps, not the result.
As for translating tables into css: I'm not interested in playing that game, it can be done, with varying degrees of cleanliness, but what's the point to continue to do it. If you want to achieve a visual effect: example code is out there en-masse. If you run into an IE bug: dito. Google is your friend when doing this, use it's help.
So instead of a asking how to change a table into css, ask how to do footers and headers with a menu in them.
And then we'll have for more advanced menus in stock than you could imagine with a table, we'll have footers and headers that can either scroll with the page or stay put at the top or bottom of the page, ...
The possibilities of imagination are much less limited with CSS.
If you have data to render that is a table, then you really ought to use a table. It can be styled appropriately with CSS as needed.
Table-free: should be without abuse of tables to do layout, instead of not using tables.
As to the abuse of divs: well (x)html 5 might give us a few more tags (like for menus), but I've far too often seen designs going overboard on divs just like we used to go overboard on tables. So I can see a movement to go "div-free" in a dozen years or so.
It (footer) has to be stuck to the very bottom of the window.
You will find this difficult to do without using absolute positioning. The problem with absolute positioning is it often will work in one environment but not another. I don't work with absolute positioning much, but this search [google.com] will reveal many approaches.
In truth, you can't get this with tables anyway, so it's a wash. :-) My solution has always been to fill up those pages with content, if it's too short to force the footer to the bottom or beyond, it's not enough content to publish.
except for one huge point, my footer is overlapping my contents and header...
Without investigating further, I'll take a guess: what is not in my quick example is a clearing element. A clearing element will probably solve overlaps in this simple layout:
.clr { clear: both; }
<div id="row2">
<h2>some div</h2>
<div class="clr"></div>
</div>
Thanks for the PM Anton, for the benefit of other members I'll address here as best I can . . . .
rocknbil, no intention to gate-crash your party, but this thread has been running in parallel with Can't align css vertically please help [webmasterworld.com]. Fixed the "stretchy" contents issue, but thought I'd come over here for the "sticky footer" to try to keep things together for later readers. I agree with you this effect is not automatically produced by using tables-for-layout. (Thank goodness). And I think quite sophisticated - which shows just how powerful css can be.
You will find this difficult to do without using absolute positioning. The problem with absolute positioning is it often will work in one environment but not another. I don't work with absolute positioning much, but this search will reveal many approaches.
Also because (as I figure it) this is comparing two different things. The desired outcome is that "stretchy contents" expands according to the amount of content in the page, while "sticky footer" is drawn at the bottom of the viewport even if "stretchy contents" has too little copy to expand that far. Positioning the footer by reference to the viewport while wanting it to respond to the page length created by "stretchy contents" is demanding elements be positioned according to two different measurements of two different things that are not automatically related.
Plus, absolute positioning removes the element from the flow, so when it is obediently drawn at the bottom of the viewport regardless of the size of the "page" the undesirable overlap problem is produced. Search on "sticky footer" (as well as above suggestion) for the challenges and other solutions.
That said, the following works for ie6, ie7, ff2, ff3 and safari for windows using Anton's existing html structure.
Anton, thanks for the "thanks" in the other thread. I expect you don't want qualifications, but they're there for a reason, so please consider them. At worst they provide ideas for continued improvement.
Qualifications for this code
1. Conditional comments are required to send heights to ie6. Without them the contents div will take its dimensions from the smallest amount of copy so it won't appear to "fill" the page. They are not ideal, but conditional comments will validate.
2. Measurements have been converted to ems. A flexible measurement allowed #footer to be absolutely positioned at the viewport bottom as desired, while resolving the overlap - that wasn't.
3. Heights/min-heights for #content div are excessive. This makes the div "fill" the space between the header and footer even when the amount of copy is very small. The background colour set on the main_container shows what happens if the excessive dimension is reduced to the smaller desired dimension of 300px. ems also seemed a way to avoid the additional clearing or padding element used in other examples.
4. FF does not produce scrollbars if the viewport is very small although the page can be scrolled and there is no overlap. This is a known issue with ff, but I haven't yet researched to see if a fix is available.
Mods please excuse the amount of code, intention was to bring the threads together and also show why this feels inelegant and maybe prompt suggestions please!
Modified css
html, body {height:100%;}
html, body, h2 { margin: 0; padding:0; }
h2 {padding-top:20px; padding-left:25px;}#main_container {
margin:0 auto;
width: 100%;
min-height: 100%;
height: auto !important;
height:100%; /* for IE */
background-color: #3ff;/*set to highlight behaviour of "contents div*/
position:relative;
}#header { background-color: #F0C000;}
#contents { background-color: #BB2F00;}
#footer {background-color: #269700; position:absolute;bottom:0 !important;width:100%;}#header div, #contents div, #footer div {text-align:left; margin:0 auto;width:50em}/* ems for width avoid the nasty space for a horizontal scrollbar in ie7 */
#header div {
height: 9.4em; /* ems avoid the overlap */
background-color: #FFCC00;
}#contents div {
min-height: 22em;/* large measurement so div appears to fill the gap between #content and #footer when there is very little copy. Note ie6 receives a height from conditional comments*/
background-color: #CC3300;
}#footer div {
height: 9.4em;
background-color: #2DB000;
}
Modified HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="trya.css" /><!--[if lte IE 6 ]>
<style type="text/css">
#contents div {height:22em;}<!-- a dimension for ie - larger than required so the div appears to fill the gap between #content and #footer when there is very little content.-->
</style>
<![endif]--></head>
<body>
<div id="main_container">
<div id="header">
<div>
<h2>beautiful header will go here...<br><br>
* header is set to 150px fixed height (ok, works)<br>
* header should align to the top (and it does! perfect header!)</h2>
</div>
</div>
<div id="contents">
<div>
<h2>beautiful contents will go here...<br><br>
* content is set to 300px minimum height (ok, works)<br>
* content should stratch 100% top to bottom depending on the screen resolution and the amount of actual contents (and it <u>doesn't</u> stratch if there are not much contents!)</h2>
</div>
</div>
<div id="footer">
<div><h2>beautiful footer will go here...<br><br>
* footer is set to 150px fixed height (ok, works)<br>
* footer should align to the bottom (and it <u>doesn't</u>)</h2>
</div>
</div>
</div>
</body>
</html>
Anton, hope this provides some ideas.
