Zocode
EXAMPLE:
[img]/img/1702/1702921_df70c27e67.png[/img]
BODY:
<body>
<div id="page_wrapper">
<div id="header_wrapper">
<div id="header">
<h2><a href="http://www.zocode.tk/site_home.xhtml"><img src="http://images.cooltext.com/4322313.png" width="215" height="44" alt="Zocode.Tk" /></a></h2>
</div>
<p>
<div id="navcontainer">
<ul class="bevelmenu" align="center">
<li id="active">
<a href="/site_home.xhtml" id="current">Home</a></li>
<li><a href="/site_forum.xhtml">Forum</a></li>
<li><a href="/site_downloads.xhtml">Download</a></li>
<li><a href="/site_profile.xhtml">Profile</a></li>
<li><a href="/site_chatroom.xhtml">Chatroom</a></li>
</ul>
</div>
</p>
</div>
</div>

<div class="colmask threecol">
<div class="colmid">
<div class="colleft">
<div class="col1">

<h2>Percentage dimensions of the holy grail layout</h2>
<p align="left">All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not s the content.</p>
<h3>Maximum column content widths</h3>
<p align="left">To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) are the figures:</p>
<dl align="left">
<dt><strong>800 x 600</strong></dt>
<dd>Left &amp; right columns: 162 pixels</dd>
<dd>Center page: 357 pixels</dd>
<dt><strong>1024 x 768</strong></dt>
<dd>Left &amp; right columns: 210 pixels</dd>
<dd>Center page: 459 pixels</dd>
</dl>

<h2>The nested div structure</h2>
<p align="left">I've colour coded each div so i</p>

<p align="left">The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colmid is before the other columns.</p>

</div>
<div class="col2">

<div class="phdr">No CSS hacks</div>
<p align="left">The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no relative positioning.</p>
<div class="phdr">SEO friendly 2-1-3 column ordering</div>
<p align="left">The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on <a href="#">link source ordering</a> for more details on how this affects links). To make your website as optimised as .</p>
<div class="phdr">Full length column background colours</div>
<p align="left">In this layout the background colours of each column will always stretch to the length of the longest <a href="#">equal height columns</a> if you want to see how this is done.</p>

<div class="phdr">No Images</div>
<p align="left">This layout requires no images. Many CSS website designs need images to colopure CSS and XHTML?</p>


<div class="phdr">No JavaScript</div>
<p align="left">JavaScript is not required. Some website layouts rely on JavaScript hacks the layout.</p>


<div class="phdr">Resizable text compatible</div>
<p align="left">This layout is fully compatible with resizable text. Resizable text text-resizing compatible?</p>

<div class="phdr">No Quirks Mode</div>
<p align="left">This liquid layout does not require the XML declaration for it to display correctly in ol mode.</p>

<div class="phdr">No IE Conditional Comments</div>
<p align="left">Only one stylesheet is used with</p>
</div>

<div class="col3">
<div id="ads">
<a href="#">
<img src="mjt-125x125.gif" width="125" border="0" height="125" alt="Art and Design by Matthew James Taylor" />
</a>
</div>

<div class="phdr">Browser Compatibility</div>
<p align="left">This 3 column liquid Layout has been tested on the following browsers:</p>
<div class="phdr">iPhone &amp; iPod Touch</div>
<ul>
<li>Safari</li>
</ul>
<div class="phdr">Mac hi hi hi hi </div>
<ul>
<li>Safari</li>
<li>Firefox</li>
<li>Opera 9.25</li>
<li>Netscape 9.0.0.5 &amp; 7.1</li>
</ul>
<div class="phdr">Windows</div>
<ul>
<li>Firefox 1.5, 2 &amp; 3</li>
<li>Safari</li>
<li>Opera 8.1 &amp; 9</li>
<li>Google Chrome</li>
<li>Explorer 5.5, 6 &amp; 7</li>
<li>Netscape 8</li>
</ul>
<div class="phdr">Valid XHTML strict markup</div>
<p align="left">The HTML in this layout validates as XHTML 1.0 strict.</p>
<div class="phdr">This layout is FREE for anyone to use</div>
<p align="left">That's right, you don't have to pay anything. If you are feeling generous however, link back to this page so other people can find and use this layout too.</p>
<div class="phdr">Centered menus compatible</div>
<p align="left">This layout is fully compatible with my <a href="#">cross-browser compatible centered menus</a>.</p>
</div>
</div>
</div>
</div>
<div id="footer">
<p>This page uses the <a href="#">Perfect 'Holy Grail' 3 Column Liquid Layout</a> by <a href="#">Matthew James Taylor</a>. View more <a href="#">website layouts</a> and <a href="#">web design articles</a>.</p>
</div>
</body>

Like Quote
290 Likes

Zocode
CSS CODE:
<style type="text/css">body {
margin:0;
padding:0;
border:0;
/* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;}
a {color: navy;}
a:hover {
color:#fff;
background:#369;
text-decoration:none;}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;}
p {margin:.4em 0 .8em 0;
padding:0; text-align: left;}
img {
margin:10px 0 5px;}
#ads img {
display:block;
padding-top:10px;}

/* Header styles */
#header {
clear:both;
float: none;
width:100%;}

#header p,#header h1,#header h2 {
padding:.4em 15px 0 15px; margin:0;}
#header ul {
clear: center;
float: none;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;}
#header ul li {
display: inline;
list-style:none;
margin:0;
padding:0;}
#header ul li a {
display:block;
float: none;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;}
#header ul li a:hover {
background:#369;
color:#fff;}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;}
#header ul li a span {
display:block;}

/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;}

/* column container */
.colmask {position:relative;

/* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;

/* width of whole page */
overflow:hidden;

/* This chops off any overhanging divs */}
/* common column settings */
.colright,.colmid,.colleft {
float:left;
width:100%;

/* width of page */
position:relative;}
.col1, .col2, .col3 {
float:left;
position:relative;
padding:0 0 1em 0;
/* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;}

/* 3 Column settings */
.threecol {
background:#eee;
/* right column background colour */}
.threecol .colmid {
right:25%;
/* width of the right column */
background:#fff;
/* center column background colour */}
.threecol .colleft {right:50%;
/* width of the middle column */
background:#f4f4f4;
/* left column background colour */}
.threecol .col1 {width:46%;
/* width of center column content (column width minus padding on either side) */
left:102%;
/* 100% plus left padding of center column */}
.threecol .col2 {width:21%;
/* Width of left column content (column width minus padding on either side) */
left:31%;
/* width of (right column) plus (center column left and right padding) plus (left column left padding) */}
.threecol .col3 {width:21%;
/* Width of right column content (column width minus padding on either side) */
left:85%;
/* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */}

/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;}
#footer p {
padding:10px;
margin:0;}</style>
Like Quote
228 Likes

smith
Originally posted by Zocode
CSS CODE:
<style type="text/css">body {
margin:0;
padding:0;
border:0;
/* This removes the border around the viewport in old versions of IE */
width:100%;
background:#fff;
min-width:600px; /* Minimum width of layout - remove line if not required */
/* The min-width property does not work in old versions of Internet Explorer */
font-size:90%;}
a {color: navy;}
a:hover {
color:#fff;
background:#369;
text-decoration:none;}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;}
p {margin:.4em 0 .8em 0;
padding:0; text-align: left;}
img {
margin:10px 0 5px;}
#ads img {
display:block;
padding-top:10px;}

/* Header styles */
#header {
clear:both;
float: none;
width:100%;}

#header p,#header h1,#header h2 {
padding:.4em 15px 0 15px; margin:0;}
#header ul {
clear: center;
float: none;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;}
#header ul li {
display: inline;
list-style:none;
margin:0;
padding:0;}
#header ul li a {
display:block;
float: none;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;}
#header ul li a:hover {
background:#369;
color:#fff;}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;}
#header ul li a span {
display:block;}

/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;}

/* column container */
.colmask {position:relative;

/* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%;

/* width of whole page */
overflow:hidden;

/* This chops off any overhanging divs */}
/* common column settings */
.colright,.colmid,.colleft {
float:left;
width:100%;

/* width of page */
position:relative;}
.col1, .col2, .col3 {
float:left;
position:relative;
padding:0 0 1em 0;
/* no left and right padding on columns, we just make them narrower instead
only padding top and bottom is included here, make it whatever value you need */
overflow:hidden;}

/* 3 Column settings */
.threecol {
background:#eee;
/* right column background colour */}
.threecol .colmid {
right:25%;
/* width of the right column */
background:#fff;
/* center column background colour */}
.threecol .colleft {right:50%;
/* width of the middle column */
background:#f4f4f4;
/* left column background colour */}
.threecol .col1 {width:46%;
/* width of center column content (column width minus padding on either side) */
left:102%;
/* 100% plus left padding of center column */}
.threecol .col2 {width:21%;
/* Width of left column content (column width minus padding on either side) */
left:31%;
/* width of (right column) plus (center column left and right padding) plus (left column left padding) */}
.threecol .col3 {width:21%;
/* Width of right column content (column width minus padding on either side) */
left:85%;
/* Please make note of the brackets here:
(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */}

/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;}
#footer p {
padding:10px;
margin:0;}</style>
Like Quote
305 Likes


Comment Box
Your Name:

Your Text here:

Color


VidMate
Download Android Game for Free
Teen Patti  IMO  9Apps  more