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 7 of 7
  1. #1
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts

    would someone explain the usefulness of this code from bonrouge.com

    http://bonrouge.com/2c-hf-fullyfluid.php

    Code:
    <div id="wrap">
      <div id="rightbg"></div>
      <div id="header">Header</div>
        <div id="inner-wrap">
        <div id="content">Content</div>
        <div id="right">Right</div>
      </div>
    </div>
    <div id="footer">Footer</div>
    I'm just wondering what is the next step here... the code as it stands just creates several horizontally stacked divs.

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Hello cyborg360,
    Use your browsers View Source to see the CSS that styles that bit of html.
    Here's the full source quoted below -
    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>
    <title>2 Columns - fully fluid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="layouts-menu.css" rel="stylesheet" type="text/css">
    <style type="text/css"> 
    @import "menu.css";html, body {
    height:100%;
    margin:0; 	/*  it's good to have these  */
    padding:0; 	/*  it's good to have these  */
    background-color:white;  /* you shouldn't forget your background colour. */
    font-family:arial, serif;
    }
    body {
    min-width:600px; 	/*  this is for Firefox  */
    }
    #wrap {
    position:relative;
    min-height: 100%;	/*  this is for Firefox  */
    margin: auto;
    width:90%;	
    border:1px solid gray;
     
    }
    * html #wrap {
    height:100%;	/*  this is for IE  */
    }
    /* the rightbg gives a full-length background to the menu div - 
    the z-index and position:relative of the other elements are important */
    #rightbg {
    position:absolute;
    top:0;
    right:0;
    width:25%;
    min-height:100%;
    background-color:#cc66ff;
    z-index:1;
    }
    p {margin:5px; padding:0;}
    h1 {
    position:relative;
    line-height:80px;
    margin:0; padding-left:20px;
    }
    #header {
    position:relative;
    background:#333333 url(label2.gif) right no-repeat;
    color:#FF00FF;
    margin:0; padding:0;
    height:80px;
    z-index:10;
    }
    #content {
    position:relative;
    width: 75%;
    float: left;
    z-index:4;
    }
    #right {
    position:relative;
    margin-left: 76%;
    z-index:5;
    text-align:center;
    }
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    * html #inner-wrap {
    height:1px;
    }
    #footer {	
    position:absolute;
    bottom:0;
    z-index:6;
    height:40px;
    width:100%;
    background: #333333;
    color:#FF00FF;
    text-align:center;
    font-size:1.5em;
    }
    code {
    font-size:0.8em;
    border:1px solid navy;
    background-color:white;
    color:#333333;
    padding:10px;
    display:block;
    width:80%;
    margin:10px auto;
    overflow:auto;
    font-family: Courier New, Courier, mono;
    }
    ul#layouts {
    width:125px;
    }
    ul#layouts {
    margin:10px auto;
    }
    a:link, a:visited {
    color:#ff00ff;
    }
    a:hover {
    color:red;
    }
    </style><!-- These here are IE conditional comments. They control the minimum width and height -->
    <!--[if gte IE 5]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );
    }
    #rightbg {
    height:expression(document.body.offsetHeight + "px");
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id='wrap'><div id="remove"><a href="/2c-hf-fullyfluid.php?nc">remove content</a></div>
    <div id="rightbg"></div>
    <div id='header'>
    <h1>2 Columns - fully fluid</h1>
    </div>
    <div id="inner-wrap">
    <div id='content'><p>Both of the columns here are fluid and I've used 'background-color' for the background rather than 
    an image. Have a look at the code below - the background colour is in the #rightbg div, which is 
    'position:absolute;' with 'min-height:100%;' ('height:100%' for IE).</p>
    <p>The background div will resize in the same way as the floated right sidebar that's sitting on top of it, so it looks like it's one column.</p>
    <code>&lt;div id=&quot;wrap&quot;&gt;<br />
    &nbsp; &lt;div id=&quot;rightbg&quot;&gt;&lt;/div&gt;<br />
    &nbsp; &lt;div id=&quot;header&quot;&gt;Header&lt;/div&gt;<br />
    &nbsp; &nbsp; &lt;div id=&quot;inner-wrap&quot;&gt;<br />
    &nbsp; &nbsp; &lt;div id=&quot;content&quot;&gt;Content&lt;/div&gt;<br />
    &nbsp; &nbsp; &lt;div id=&quot;right&quot;&gt;Right&lt;/div&gt;<br />
    &nbsp; &lt;/div&gt;<br />
    &lt;/div&gt;<br />
    &lt;div id=&quot;footer&quot;&gt;Footer&lt;/div&gt;<br />
    </code>
    <p>I've given the body a min-width just so that it doesn't look stupid when someone makes the window really small.</p>
    <p>Most of the code for this page is explained on the other layout pages, so please have a look there.</p>
    </div>
    	<div id="right">
    <h2>Layouts</h2>
    <ul id="layouts">
    <li><a href="3c-hf-fluid.php">3 Columns Fluid</a></li>
    <li><a href="3c-hf-fixed.php">3 Columns Fixed</a></li>
    <li><a href="3c-hf-(lc)fluid.php">L/C:Fluid, R:Fixed</a></li>
    <li><a href="2c-hf-fluid.php">2 Columns Fluid(L)</a></li>
    <li><a href="2c-hf-fluid(r).php">2 Columns Fluid(R)</a></li>
    <li><a href="2c-hf-fixed.php">2 Columns Fixed</a></li>
    <li><a href="2c-hf-content1st.php">2Cs Content First</a></li>
    <li><a href="2c-hf-fullyfluid.php">2Cs Fully Fluid</a></li>
    <li><a href="2+2.php">2 Fixed + 2 Fluid Cs</a></li>
    <li><a href="hcf-fluid.php">No Columns Fluid</a></li>
    <li id="last"><a href="3+3.php">Many columns</a></li>
    </ul></div>
    	</div>
    <div id='footer'><a href="br.php">bonrouge.com</a></div>
    </div>
    </body>
    </html>
    Last edited by Excavator; 12-20-2009 at 01:17 AM. Reason: Highlighted CSS in red
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Click on the "Remove Content" button and you get a pretty much empty and ready to use code like this -
    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>
    <title>2 Columns - fully fluid</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style type="text/css">html, body {
    height:100%;
    margin:0; 	/*  it's good to have these  */
    padding:0; 	/*  it's good to have these  */
    background-color:white;  /* you shouldn't forget your background colour. */
    font-family:arial, serif;
    }
    body {
    min-width:600px; 	/*  this is for Firefox  */
    }
    #wrap {
    position:relative;
    min-height: 100%;	/*  this is for Firefox  */
    margin: auto;
    width:90%;	
    border:1px solid gray;
     
    }
    * html #wrap {
    height:100%;	/*  this is for IE  */
    }
    /* the rightbg gives a full-length background to the menu div - 
    the z-index and position:relative of the other elements are important */
    #rightbg {
    position:absolute;
    top:0;
    right:0;
    width:25%;
    min-height:100%;
    background-color:#cc66ff;
    z-index:1;
    }
    p {margin:5px; padding:0;}
    h1 {
    position:relative;
    line-height:80px;
    margin:0; padding-left:20px;
    }
    #header {
    position:relative;
    background:#333333 url(label2.gif) right no-repeat;
    color:#FF00FF;
    margin:0; padding:0;
    height:80px;
    z-index:10;
    }
    #content {
    position:relative;
    width: 75%;
    float: left;
    z-index:4;
    }
    #right {
    position:relative;
    margin-left: 76%;
    z-index:5;
    text-align:center;
    }
    #inner-wrap {
    padding-bottom:80px;
    }
    #inner-wrap:after {
    content:" ";
    display:block;
    clear:both;
    }
    * html #inner-wrap {
    height:1px;
    }
    #footer {	
    position:absolute;
    bottom:0;
    z-index:6;
    height:40px;
    width:100%;
    background: #333333;
    color:#FF00FF;
    text-align:center;
    font-size:1.5em;
    }
    </style>
    <!-- These here are IE conditional comments. They control the minimum width and height -->
    <!--[if gte IE 5]>
    <style type="text/css">
    body {
    width:expression( documentElement.clientWidth < 600 ? (documentElement.clientWidth == 0 ? (body.clientWidth < 600 ? "600px" : "auto") : "600px") : "auto" );
    }
    #rightbg {
    height:expression(document.body.offsetHeight + "px");
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id='wrap'><div id="rightbg"></div>
    <div id='header'>
    <h1>2 Columns - fully fluid</h1>
    </div>
    <div id="inner-wrap">
    <div id='content'>content</div>
    	<div id="right">right</div>
    	</div>
    <div id='footer'><a href="br.php">bonrouge.com</a></div>
    </div>
    </body>
    </html>
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    strange. when i use firefox or chrome and hit remove content i just get some text that says content - thats it.

  • #5
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    Like I said,
    Use your browsers View Source
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #6
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,826 Times in 1,810 Posts
    The layout you see that says "content" is the rendered code. You need the source code that makes that image on your screen.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • Users who have thanked Excavator for this post:

    cyborg360 (12-20-2009)

  • #7
    Regular Coder
    Join Date
    Nov 2009
    Posts
    202
    Thanks
    25
    Thanked 0 Times in 0 Posts
    k, i see now, thanks.


  •  

    Posting Permissions

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