Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts

    Exclamation Why will it not produce. 3 vertical columns and header and footer.

    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

    Code:
    <!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>
    Last edited by effpeetee; 01-03-2008 at 02:24 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    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.

    Code:
    <!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>
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Senior Coder ahallicks's Avatar
    Join Date
    May 2006
    Location
    Lancaster, UK
    Posts
    1,134
    Thanks
    1
    Thanked 57 Times in 55 Posts
    Missed one:

    Code:
    *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?
    "write it for FireFox then hack it for IE."
    Quote Originally Posted by Mhtml View Post
    Domains are like women - all the good ones are taken unless you want one from some foreign country.
    Reputation is your friend

    Development & SEO Tools

  • #4
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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.

    The original code does not have a space between # and html. I didn;t know that it was becessary. Am I wrong?
    #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
    Attached Thumbnails Attached Thumbnails Why will it not produce. 3 vertical columns and header and footer.-screenhunter_01-jan.-03-15.14.jpg  
    Last edited by effpeetee; 01-03-2008 at 04:27 PM.
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.

  • #5
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    yeah I know it's a tutorial of sorts but for the footer to be under (oops )

    Code:
    <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.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #6
    Senior Coder effpeetee's Avatar
    Join Date
    Feb 2007
    Location
    Clapham Junction - London SW
    Posts
    4,885
    Thanks
    228
    Thanked 204 Times in 203 Posts
    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

    Code:
    <!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>
    * Sources (updated: 21.11.2012.
    Using Windows 8 Professional. 64bit with HP Photosmart 5510 printer Very useful site here.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •