...

View Full Version : Why will it not produce. 3 vertical columns and header and footer.



effpeetee
01-03-2008, 12:46 PM
This code is part of a teaching package which I cannot make work.
I have gone over it time and time again, but can find no deviation from the given code. Why will it not produce. 3 vertical columns and header and footer.

From this article.
http://pmob.co.uk/temp/3colfixedtest_explained.htm

Frank


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Enter_Title_Here</title>
<style type="text/css">

html,body{height:100&#37;}

body{
margin:0;
padding:0;
Border:0;
background:pink;
color:white;
}


#outer{min-height:100%;
margin-right:130px;
margin-left:130px;
background:#f8e7ec;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color:#000;
}

*html #outer{height:100%;}/*IE6 and under treat height as min-height antway*/}

#header{
background:#ff0000;
border-top:1px solid #000;
border-bottom:1px solid #000
color:#000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top;56px;
min-height:0;/*ie7 haslayout fix */
}

#left{
position:relative;
width:130px;
float:left;
margin-left:-129px;
left:-2px;
}

#right{
position:relative;
width:130px;
float:right;
margin-right:-129px;
left:2px;
}

#left p {
padding-left:2px;
padding-right:2px;
}

#right p {
padding-left:2px;
padding-right:2px;
}

#footer{
width:100%;
clear:both;
height:50px;
border-top:1px solid #000
border-bottom:1px solid #000;
background-color:#ff8080;
color:000000;
text-align:center;
position-relative;
}

*html#footer (
\height:52px;
he\ight:50px;
}

#clearfooter {
clear:both;
height:40px;
}

*html#centrecontent {
height:1%;
margin-bottom:12px;
}

</style>
<meta name="generator" content="BestAddress HTML Editor Professional">
</head>
<body>

<div id="outer"><p>OUTER.</p></div>

<div id ="header"><p>HEADER.</p></div>

<div id="centrecontent><p>Centre</p></div>

<div id = "left"><p>LEFT.</p></div>

<div id = "right"><p>RIGHT .</p></div>

<div id="clearfooter"></div>

<div id="footer"><p>FOOTER.</p>
</div>



</body>
</html>

harbingerOTV
01-03-2008, 03:24 PM
Hey Frank,

You must have stayed up late ;)

There are quite a few errors in the css actually. Missing #'s, extra }'s, ( instead of { and some of the * html #'s don't have spaces.

in your html there are missing quotes, and the "outer div ends before any of the content starts.

here's a cleaned up code. I took the css step by step through the validator to make corrections so it should be working alright now.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>Enter_Title_Here</title>
<style type="text/css">

html,body{height:100%}

body{
margin:0;
padding:0;
border:0;
background-color:#fc3;
color:white;
}


#outer{min-height:100%;
margin-right:130px;
margin-left:130px;
background:#f8e7ec;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color:#000;
}

*html #outer{height:100%;}/*IE6 and under treat height as min-height antway*/

#header{
background:#ff0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color:#000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:56px;
min-height:0;/*ie7 haslayout fix */
}

#left{
position:relative;
width:130px;
float:left;
margin-left:-129px;
left:-2px;
}

#right{
position:relative;
width:130px;
float:right;
margin-right:-129px;
left:2px;
}

#left p {
padding-left:2px;
padding-right:2px;
}

#right p {
padding-left:2px;
padding-right:2px;
}

#footer{
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color:#ff8080;
color:#000000;
text-align:center;
position:relative;
}

*html #footer {
\height:52px;
he\ight:50px;
}

#clearfooter {
clear:both;
height:40px;
}

*html #centrecontent {
height:1%;
margin-bottom:12px;
}

</style>
<meta name="generator" content="BestAddress HTML Editor Professional">
</head>
<body>

<div id="outer">

<div id="header"><p>HEADER.</p></div>



<div id="left"><p>LEFT.</p></div>

<div id="right"><p>RIGHT .</p></div>

<div id="centrecontent"><p>Centre</p></div>

<div id="clearfooter">clear</div>

<div id="footer"><p>FOOTER.</p>
</div>

</div>

</body>
</html>

ahallicks
01-03-2008, 03:51 PM
Missed one:



*html #outer{height:100&#37;;}/*IE6 and under treat height as min-height antway*/

Should be

* html #outer{height:100%;}/*IE6 and under treat height as min-height antway*/


Or in fact, all of the hacks are still missing the spaces. And if you are using these as hacks for IE why is there still a / in some of the CSS?

I'm also curious as to why there is an extra div called 'clearfooter' when all it is doing is clearing the floats, which can be done perfectly fine in the footer itself?

effpeetee
01-03-2008, 04:09 PM
http://pmob.co.uk/temp/3colfixedtest_explained.htm
Hi there.

Most of the code, I cut and pasted.

/* mac hide \*/
* html #header{height:56px;he\ight:1px}/* height needed for ie to force layout*/
/* end hide*/

The slash here is intentional.:D

The original code does not have a space between # and html. I didn;t know that it was becessary. Am I wrong?:confused:
#html

Screenshot of your code. Very much better but still has the footer halfway up the screen. I can drag it with my editor, but I would rather use code. I find using CSS rather like doing the Lottery. Sometimes you win. More often you lose. I waa trying with this tutorial to get to grips with it. I was pleased in a way that it was faulty, but frustrated that I could not put it right. That is why I wondered whether I had copied the code incorrectly. I do have poor vision. There are quite a few things that I would have done differently, but as it was a tutorial, I went along with it.

Thank you both for your continuing help.

Frank

harbingerOTV
01-03-2008, 05:19 PM
yeah I know it's a tutorial of sorts but for the footer to be under (oops ;) )



<body>
<div id="outer">
<div id="header"><p>HEADER.</p></div>
<div id="left"><p>LEFT.</p></div>
<div id="right"><p>RIGHT .</p></div>
<div id="centrecontent"><p>Centre</p></div>
</div>
<div id="footer"><p>FOOTER.</p></div>
</body>


just move it below the </div> ending the "outer". and yep, you don't need the clear footer as the footer has clear:both applied to it already.

effpeetee
01-03-2008, 05:34 PM
Since my last post, I have found his own code from the demo.

This works fine. I wonder why my copying of the code piecemeal didn't work.

Frank


<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Enter_Title_Here</title>
<meta name="generator" content="BestAddress HTML Editor Professional">
<style type="text/css">
html, body {height:100%}
body {
padding:0;
margin:0;
background:pink url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}
#outer{
min-height:100%;
margin-left:130px;
margin-right:130px;
background:#F8E7EC;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
color: #000000;
}
* html #outer{height:100%;} /* IE6 and under treat height as min-height anyway*/



padding:0;
margin:0;
background:#fff url(leftcolbg.jpg) repeat-y left top;
color: #000000;
}

#Outer{
margin-left:130px;
margin-right:130px;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
}

#header{
background:#FF0000;
border-top:1px solid #000;
border-bottom:1px solid #000;
color: #000;
text-align:center;
position:relative;
margin:0 -131px;
padding-top:56px;
min-height:0;/* ie 7 haslayout fix */
}

#left {
position:relative;/*ie needs this to show float */
width:130px;/* same as the left margin on #outer*/
float:left;
margin-left:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:-2px;/* push column into position*/
}
#left p {padding-left:2px;padding-right:2px}
#right p {padding-left:2px;padding-right:2px}

#right {
position:relative;/*ie needs this to show float */
width:130px;/* same as right margin on #outer*/
float:right;
margin-right:-129px;/*must be 1px less than width otherwise won't push footer down in older mozilla*/
left:2px;/* push column into position*/
}

#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #FF8080;
color: #000000;
text-align:center;
position:relative;
}
* html #footer {/*only ie gets this style*/
\height:52px;/* for ie5 */
he\ight:50px;/* for ie6 */
}

#clearfooter{clear:both;height:40px;}/*needed to make room for footer*/
* html #centrecontent {height:1%;margin-bottom:12px}/* combat IE's 3 pixel jog */





/* mac hide \*/
* html #header{height:56px;he\ight:1px}/* height needed for ie to force layout*/
/* end hide*/
</style>

</head>
<body>
<div id="outer">
<div id="header"> <p>Header - Centre column longest - footer at bottom of document.</p></div>
<div id="left"><p>Left Content goes here : </p></div>
<div id="right"><p>Right content goes here : </p></div>
<div id="centrecontent"><p>Centre Content goes here</p></div>
<div id="clearfooter"></div><!-- to clear footer -->
</div><!-- end outer div -->
<div id="footer"> -Footer -</div>

</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum