HTML/CSS/Box Model/div table — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
Admin (обсуждение | вклад) м (1 версия) |
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
A table but pure css
<!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>
<title>CSS Table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
.cell4 {
width:100%;
background:blue;
float:left;
margin:1px 0 0;
}
.cell3 {
width:75%;
background:red;
float:left;
}
.cell2 {
width:66%;
background:yellow;
float:left;
}
.cell1 {
width:50%;
background:pink;
float:left;
}
.cell2a, .cell3a, .cell4a {
width:100%;
float:right;
margin-right:-100%;
position:relative;
margin-left:2px;
}
.cell4a {
margin-right:-103%;
position:relative;
margin-left:8px;
}
p {padding:2px;margin:0}
</style>
</head>
<body>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 with the most text: This is cell 4 with the most
text: </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is cell 1 : This is cell 1 :</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is cell 3 with the most text: This is cell 3 with the most
text:</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is Cell 1 : This is Cell 1 :</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 with the most text: This is cell 2 with the most text</p>
</div>
<p>This is cell 1 : This is cell 1</p>
</div>
</div>
</div>
</div>
<div class="cell4">
<div class="cell3">
<div class="cell2">
<div class="cell1">
<div class="cell2a">
<div class="cell3a">
<div class="cell4a">
<p>This is cell 4 : This is cell 4 : </p>
</div>
<p>This is Cell 3 : This is Cell 3 :</p>
</div>
<p>This is cell 2 : This is cell 2</p>
</div>
<p>This is cell 1 with the most text: This is cell 1 with the most text</p>
</div>
</div>
</div>
</div>
</body>
</html>
Create DIV to create a table
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div#container {
border: thick black;
margin: 0 20px;
background: #aaa;
}
a:hover {
background: orange;
}
div#float {
text-align: center;
float: left;
border: 1px solid black;
width: 150px;
height: 150px;
}
div.content {
background: lightyellow;
border: 1px solid black;
}
div#clear {
border: 1px solid black;
background: lightgreen;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="float">
Float text. <a href="#">Link text</a>.
</div>
Content text. <a href="#">Link text</a>.
<div class="content">
Content text. <a href="#">Link text</a>.
</div>
Content text. <a href="#">Link text</a>.
<div class="content">
Content text. <a href="#">Link text</a>.
</div>
Content text. <a href="#">Link text</a>.
<div class="content">
Content text. <a href="#">Link text</a>.
</div>
Content text. <a href="#">Link text</a>.
<div id="clear">
Clear text. <a href="#">Link text</a>.
</div>
<div>
Another div.
</div>
</div>
</body>
</html>
CSS table
<!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>
<title>css table</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
* {
margin: 0;
padding: 0
}
.container {
background-color: #FFFFCC;
width: 760px;
border: 1px solid #000;
}
* html .container {
width: 762px;
}
.header {
width: 760px;
border-bottom: 1px solid #000;
}
.header ul {
list-style: none
}
.header ul li {
width: 148px;
border-left: 1px solid #000;
float: left;
font-weight: bold;
padding-left: 2px;
}
* html .header ul li {
width: 151px;
}
.data {
width: 150px;
float: left;
padding-left: 2px;
}
* html .data {
width: 152px;
}
.rowodd,.roweven {
position: relative;
width: 760px;
border-top: 1px solid #000;
background-color: #E8E8E8;
}
.roweven {
background-color: #D1DCE9;
}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="header clearfix">
<ul>
<li>Column 1</li>
<li>Column 2</li>
<li>Column 3</li>
<li>Column 4</li>
<li>Column 5</li>
</ul>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>0</p></div>
<div class="data"><p>1</p></div>
<div class="data"><p>s@h.ru</p></div>
<div class="data"><p>www.w.ru</p></div>
</div>
<div class="roweven clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>1</p></div>
<div class="data"><p>3</p></div>
<div class="data"><p>s@h.ru</p></div>
<div class="data"><p>www.w.ru</p></div>
</div>
<div class="rowodd clearfix">
<div class="data">
<p>Company 1</p>
<p>A</p>
<p>B</p>
<p>C</p>
<p>D</p>
</div>
<div class="data"><p>2</p></div>
<div class="data"><p>0</p></div>
<div class="data"><p>s@h.ru</p></div>
<div class="data"><p>www.w.ru</p></div>
</div>
</div>
</body>
</html>
Gallary layout
<!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" />
<title>Gallery</title>
<style rel="stylesheet" type="text/css">
body {
font-size: 62.5%;
margin: 0px;
padding: 0px;
}
#content {
margin-left: 15px;
margin-top: 15px;
border: 1px dashed #999;
border-right: none;
border-bottom: none;
}
p.intro {
font-size: 1.3em;
line-height: normal;
margin-bottom: 15px;
}
h1 {
font: normal 2.4em Verdana, Arial, Helvetica, sans-serif;
margin: 0;
border-bottom: 1px dashed #999;
padding: 5px 0 5px 8px;
color: #14556b;
}
p {
font: 1.6em/160% Georgia, "Times New Roman", Times, serif;
margin: 10px 8px;
}
.copyright {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 1em;
text-transform: uppercase;
color: #666666;
margin-left: 0px;
padding-left: 8px;
border-top: 1px dashed #999;
clear: both;
}
.figure {
width: auto;
float: left;
width: 210px;
margin: 0 10px 10px 10px;
}
.photo img {
border: 1px solid #666;
background-color: #FFF;
padding: 4px;
position: relative;
top: -5px;
left:-5px;
}
.figure p {
font: 1.1em/normal Arial, Helvetica, sans-serif;
text-align: center;
margin: 10px 0 0 0;
height: 5em;
}
</style>
</head>
<body>
<div id="content">
<h1>Gallery </h1>
<p class="intro">this is a test. this is a test. </p>
<div id="gallery">
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 1: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 2: .</p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 3: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 4: </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 5: this is a test. </p>
</div>
<div class="figure">
<div class="photo">
<img src="http://www.wbex.ru/style/logo.png" alt="" width="200" height="200" /> </div>
<p>Figure 6: . </p>
</div>
</div>
<p class="copyright">Copyright 2006</p>
</div>
</body>
</html>
Use DIV to create a table cell
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<style type="text/css">
html {
display: table;
border-spacing: 5px;
}
body {
display: table-row;
}
div {
display: table-cell;
padding: 5px;
border: thin solid black;
}
</style>
<title> HTML display property </title>
</head>
<body>
<div> table cell </div>
<div> table cell </div>
</body>
</html>
Use div to create a table layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
div#container {
border: thick dotted black;
margin: 0 20px;
background: red;
}
div#float {
text-align: center;
float: left;
border: 1px solid black;
width: 150px;
height: 150px;
}
div.content {
background: lightyellow;
border: 1px solid black;
}
div#clear {
border: 1px solid black;
background: lightgreen;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="float">
Float text.
</div>
Content text.
<div class="content">
Content text.
</div>
Content text.
<div class="content">
Content text.
</div>
Content text.
<div class="content">
Content text.
</div>
Content text.
<div id="clear">
Clear text.
</div>
<div>
Another div.
</div>
</div>
</body>
</html>