SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Jul 2004
    Location
    Jed.
    Posts
    243
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    PMOB's 2 col layout

    Dear,

    I used Paul's 2 col layout I then tried to switch everything around but I could not. I also tried to change the width of the side content. The site I am developing requires direction:rtl. The problem that I am facing are:

    1. Footer is not centered.
    2. Side content does not extend all the way down
    3. Content does not extend all the way down

    Note: the footer is not centered b/c I used :rtl

    Paul's Link
    http://www.pmob.co.uk/temp/2col_main.htm

    You can see my layout here
    http://codg.bjaili.com/20/

    HTML
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta name="generator" content=
      "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    
      <title>TEST 2COL LAYOUT</title>
      <link rel="stylesheet" type="text/css" href="a.css" />
    </head>
    
    <body>
      <div id="Container">
        <div id="Main_Header">
         
        </div>
    
        <div id="Header">
     			<p>HEADER</p>
        </div>
    
        <div id="Main_Nav">
          <p>Navigation</p>
        </div>
    
        <div id="Sidebar">
          <p>Sidebar content goes here : Sidebar content goes here :
          Sidebar content goes here : Sidebar content goes here :
          Sidebar content goes here : Sidebar content goes here :
          Sidebar content goes here : Sidebar content goes here :
          Sidebar content goes here : Sidebar content goes here :
          Sidebar content goes here : Sidebar content goes here :</p>
        </div>
    
        <div id="Content">
          <p>Footer stays at the bottom of the window unless the
          content is longer then it stays at the bottom of the
          document.</p>
    <p>
      		CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT 
    CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT </p>
        </div>
    
        <div id="clearfooter"></div><!-- to clear footer -->
    
        <div id="Footer">
          <div class="divider1"></div>
    
          <div class="blank"></div><!-- for decoration only -->
    
          <p>Footer Content</p>
        </div>
      </div>
    </body>
    </html>
    CSS
    Code:
    /* commented backslash hack v2 \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    html,body {
    		margin: 0;
    		padding: 0;
    }
    body {		
    		font: x-small arial, hevetica, sans-serif;
    		text-align: center;
    		color: #505367;
    		background-color: #e0e0e0;
    }
    
    html {direction:rtl;}
    
    #Container {
    	margin-left:auto;
    	margin-right:auto;
    	width: 770px; 
    	min-height:100%;
    	text-align: left;
    	background: #FFF;
    	border-left: 1px solid #a1a1a1;
    	border-right: 1px solid #a1a1a1;
    	position:relative;
    		}
    /* commented backslash hack v2 \*/ 
    * html #Container {height:100%;}		
    * html #Container {width:732px;w\idth:730px;}
    * html body{font-size:xx-small;f\ont-size:x-small}
    /* end hack */ 
    
    #Main_Header {
    		position:absolute;
    		left:0;top:0;
    		height: 160px;
    		width:100%;
    		background-color: green;
    /* 		border-bottom: 1px solid #e6e6e6; */
    		z-index:1;
    }
    #Header {
    		height: 125px;
    		width:100%;
    		background-color: #CCFF99;
    /* 		margin: 0px 0px 5px 0px; */
    		border-top: 1px solid #e6e6e6;
    		border-bottom: 1px solid #e6e6e6;
    		position:relative;
    		z-index:2;
    		overflow:hidden;
    }
    
    * html #Main_Header {height:161px;he\ight:160px}
    * html #Header {height:127px;he\ight:127px}
    
    #Main_Nav {
    		width:100%;
    		height: 20px;
    /* 		background-color: red; */
    /* 		border-top: 1px solid #e6e6e6; */
    /* 		border-bottom: 1px solid #e6e6e6; */
    		position:relative;
    		z-index:2;
    }
    * html #Main_Nav{height:22px;he\ight:20px}		
    #Sidebar {
    	float: left;
    	width: 315px;
    	padding:5px 0;
    	background-color:#996666;
    }
    #Content {
    	width: 553px;
    	padding:5px 0;
    	background-color:#996699
    		}
    #Content p, #Sidebar p, #Main_Nav1 p, #Header p,#Footer p  {margin:0 5px 5px 5px}		
    #Footer	{
    	position:absolute;
    	bottom:0;
    	width:100%;
    	height: 24px;
    	background-color: yellow;
    	border-top: 1px solid #e9e9e9; 
    }
    #Footer p {margin:0;padding:0}
    * html #Footer {height:25px;he\ight:24px;}
    
    .divider1 {
    	width:100%;
    	height:5px;
    	overflow:hidden;
    	background:#fff;
    	position:relative;
    	border-bottom: 1px solid #e6e6e6;
    }
    
    #clearfooter {height:27px;width:100%;clear:both}
    /*.blank , . {
    	position:absolute;
    	right:547px;
    	width:7px;
    	height:0px;
    	overflow:hidden;
    	border-top:	1px solid #fff;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #fff;
    }*/

  2. #2
    SitePoint Wizard rbutler's Avatar
    Join Date
    Jul 2003
    Location
    Springfield, MO
    Posts
    1,867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post this in the CSS forum or contact Paul through PM and he'll straighten you out.
    Ryan Butler

    Midwest Web Design

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    The full length columns should be catered for with a background image repeated on the main container.

    This example shows what I mean :

    You need to set the left position on your footer and you have a few other errors with your dimensions.

    Here is the code tidied up a bit.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta name="generator" content=
      "HTML Tidy for Linux/x86 (vers 1 September 2005), see www.w3.org" />
    <title>TEST 2COL LAYOUT</title>
    <link rel="stylesheet" type="text/css" href="a.css" />
    <style type="text/css">
    /* commented backslash hack v2 \*/ 
    html, body{height:100&#37;;} 
    /* end hack */ 
    html,body {
            margin: 0;
            padding: 0;
    }
    body {        
            font: x-small arial, hevetica, sans-serif;
            text-align: center;
            color: #505367;
            background-color: #e0e0e0;
    }
    html {direction:rtl;}
    
    #Container {
        margin-left:auto;
        margin-right:auto;
        width: 770px; 
        min-height:100%;
        text-align: left;
        background: #FFF;
        border-left: 1px solid #a1a1a1;
        border-right: 1px solid #a1a1a1;
        position:relative;
            }
    /* commented backslash hack v2 \*/ 
    * html #Container {height:100%;}        
    * html body{font-size:xx-small;f\ont-size:x-small}
    /* end hack */ 
    
    #Main_Header {
            height: 160px;
            width:770px;
            background-color: green;
    /*         border-bottom: 1px solid #e6e6e6; */
            z-index:1;
    }
    #Header {
            height: 125px;
            width:770px;
            background-color: #CCFF99;
    /*         margin: 0px 0px 5px 0px; */
            border-top: 1px solid #e6e6e6;
            border-bottom: 1px solid #e6e6e6;
            position:relative;
            z-index:2;
    }
    
    * html #Header {height:127px;he\ight:125px}
    
    #Main_Nav {
            width:770px;
            height: 20px;
    /*         background-color: red; */
    /*         border-top: 1px solid #e6e6e6; */
    /*         border-bottom: 1px solid #e6e6e6; */
            position:relative;
            z-index:2;
    }
    #Sidebar {
        float: left;
        width: 315px;
        padding:5px 0;
        background-color:#996666;
    }
    #Content {
        width: 455px;
        padding:5px 0;
        background-color:#996699;
     float:right;
    }
    #Content p, #Sidebar p, #Main_Nav1 p, #Header p,#Footer p  {margin:0 5px 5px 5px}        
    #Footer    {
        position:absolute;
        bottom:0;
        left:0;
        width:770px;
        height: 24px;
        background-color: yellow;
        border-top: 1px solid #e9e9e9; 
    }
    #Footer p {margin:0;padding:0}
    * html #Footer {height:25px;he\ight:24px;}
    
    .divider1 {
        width:100%;
        height:5px;
        overflow:hidden;
        background:#fff;
        position:relative;
        border-bottom: 1px solid #e6e6e6;
    }
    
    #clearfooter {height:27px;width:100%;clear:both}
    /*.blank , . {
        position:absolute;
        right:547px;
        width:7px;
        height:0px;
        overflow:hidden;
        border-top:    1px solid #fff;
    }
    .blank {top:-1px;}
    .blank2 {bottom:-1px;border-top:1px solid #fff;
    }*/
    
    </style>
    </head>
    <body>
    <div id="Container">
        <div id="Main_Header"> </div>
        <div id="Header">
            <p>HEADER</p>
        </div>
        <div id="Main_Nav">
            <p>Navigation</p>
        </div>
        <div id="Sidebar">
            <p>Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here : Sidebar content goes here :</p>
        </div>
        <div id="Content">
            <p>Footer stays at the bottom of the window unless the content is longer then it stays at the bottom of the document.</p>
            <p> CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT </p>
        </div>
        <div id="clearfooter"></div>
        <!-- to clear footer -->
        <div id="Footer">
            <div class="divider1"></div>
            <div class="blank"></div>
            <!-- for decoration only -->
            <p>Footer Content</p>
        </div>
    </div>
    </body>
    </html>

    Now make yourself a background image to imitate the 2 full length columns and repeat it on the main container.


Bookmarks

Posting Permissions

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