...

View Full Version : would someone explain the usefulness of this code from bonrouge.com



cyborg360
12-20-2009, 01:03 AM
http://bonrouge.com/2c-hf-fullyfluid.php


<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.

Excavator
12-20-2009, 01:14 AM
Hello cyborg360,
Use your browsers View Source to see the CSS that styles that bit of html.
Here's the full source quoted below -
<!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>

Excavator
12-20-2009, 01:16 AM
Click on the "Remove Content" button and you get a pretty much empty and ready to use code like this -
<!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>

cyborg360
12-20-2009, 01:18 AM
strange. when i use firefox or chrome and hit remove content i just get some text that says content - thats it.

Excavator
12-20-2009, 01:21 AM
Like I said,
Use your browsers View Source

Excavator
12-20-2009, 01:22 AM
The layout you see that says "content" is the rendered code. You need the source code that makes that image on your screen.

cyborg360
12-20-2009, 01:23 AM
k, i see now, thanks.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum