Согласен, таблицами все просто. Имелась ввиду блочная верстка, извините, что не отметил это. Спасибо за вариант. Вроде наше вариант блоками:
| Код |
body {
margin:10px;
padding:0;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:16px;
line-height:18px;
color:#000;
background-color:#fff;
}
p {
margin:4px 0 6px 0;
}
strong {
font-weight:bold;
}
em {
font-style:italic;
}
h1, h2, h3, h4 {
font-weight:bold;
margin:10px 0 0 0;
}
h1 {
font-size:26px;
}
h2 {
font-size:23px;
}
h3 {
font-size:20px;
}
h4 {
font-size:17px;
}
a:link, a:visited {
color:#cc0000;
text-decoration:underline;
}
a:hover, a:active {
color:#999999;
text-decoration:none;
}
ul {
margin:5px 0 5px 20px;
padding:0;
list-style-type:disc;
}
ol {
margin:5px 0 5px 30px;
padding:0;
list-style-type:decimal;
}
ul li, ol li {
margin:0 0 4px 0;
padding:0;
}
/* << ----------------// Outer container that holds all the columns //---------------->> */
#mainContainer {
margin:0 auto;
padding:0;
width:1000px;
border:1px dashed #454545;
}
/* << ----------------// Header //---------------->> */
#header {
margin:0;
padding:5px;
width:990px;
height:90px;
color:#ffffff;
background-color:#000000;
}
/* << ----------------// Left column //---------------->> */
#columnOne {
float:left;
margin:0;
padding:0 5px 0 5px;
width:230px;
background-color:#cccccc;
display:inline;
}
#columnOneIn {
float:left;
margin:0 -5px;
padding:5px;
width:250px !important;
width:240px;
height:250px;
background-color:#ffffee;
display:inline;
}
#columnOne p, #columnThree p, #columnOne ul li, #columnOne ol li, #columnThree ul li, #columnThree ol li {
font-size:13px;
}
#columnOne h2, #columnThree h2 {
font-size:16px;
}
/* << ----------------// Middle column //---------------->> */
#columnTwo {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:490px;
background-color:#fff;
display:inline;
}
#columnTwoIn {
float:left;
margin:0 0 0 -5px;
padding:5px;
width:500px !important;
width:490px;
height:250px;
background-color:#eeeeee;
display:inline;
}
#columnTwoIn2 {
float:left;
margin:0 0 0 -5px;
padding:5px;
width:240px;
background-color:#eeffee;
display:inline;
}
#columnTwoIn3 {
float:left;
margin:0 -5px 0 0;
padding:5px;
width:240px;
background-color:#ffeeee;
display:inline;
}
/* << ----------------// Right column //---------------->> */
#columnThree {
float:left;
margin:0;
padding:0 5px 10px 5px;
width:250px !important;
width:240px;
background-color:#cccccc;
display:inline;
}
/* << ----------------// Footer //---------------->> */
#footer {
margin:0;
padding:5px 5px 5px 10px;
width:985px;
height:20px;
font-size:10px;
color:#cccccc;
background-color:#000000;
clear:both;
}
#footer a:link, #footer a:visited {
color:#999999;
text-decoration:none;
}
#footer a:hover, #footer a:active {
color:#ffffff;
text-decoration:underline;
}
/* << ----------------// Fix so that the outer DIV will wrap around all floated DIVs within //---------------->> */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-table;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */
|
| Код |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="style.css" media="screen,print" />
<title>the css tinderbox: fixed 3-column layout</title>
</head>
<body>
<div id="mainContainer" class="clearfix">
<div id="header">
<h1>site title</h1>
<p>fixed 3-column layout</p>
</div><!--// end #header //-->
<div id="columnOne">
<div id="columnOneIn">
<h2>column 1</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
<p>Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum.</p>
<h3>heading h3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus.</p>
</div><!--// end #columnOne //-->
<div id="columnTwo">
<div id="columnTwoIn">
<h1>column 2</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
</div>
<div id="columnTwoIn2">
<h1>column 2</h1>
<p>Lorem ipsum dolor sit amet, <strong>consectetuer adipiscing elit</strong>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h4>heading h4</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
</ul>
</li>
</ul>
</div>
<div id="columnTwoIn3">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h2>heading h2</h2>
<p>Lorem ipsum dolor sit amet, <em>consectetuer adipiscing elit</em>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
<h3>heading h3</h3>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
</div><!--// end #columnTwo //-->
</div>
<div id="columnThree">
<h2>column 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
</ul>
</li>
</ul>
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
<li>Numbered List Item
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
</ol>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
<li>Bullet List Item
<ul>
<li>Bullet List Item</li>
<li>Bullet List Item</li>
</ul>
</li>
</ul>
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
<li>Numbered List Item
<ol>
<li>Numbered List Item</li>
<li>Numbered List Item</li>
</ol>
</li>
</ol>
<p>Lorem ipsum dolor sit amet, <a href="#">consectetuer adipiscing elit</a>. Pellentesque hendrerit tellus mollis dolor. Cras urna. Sed tellus. Aenean in nisi nec dui pretium bibendum. Praesent a sapien at dolor feugiat volutpat.</p>
</div><!--// end #columnThree //-->
<div id="footer">
<p><a href="#" title="footer link">Copyright</a> | <a href="#" title="footer link">Privacy Policy</a> | <a href="#" title="footer link">Contact Us</a></p>
</div><!--// end #footer //-->
</div><!--// end #mainContainer //-->
</body>
</html>
|
|
