в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:17Z

1 версия

Новая страница

==Float Divider with clear both==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .float {
float: left;
background: red;
}
* .float-divider {
clear: both;
height: 20px;
margin-bottom: 20px;
border-bottom: 5px solid black;
font-size: 1px;
line-height: 1px;
background: pink;
}
</style>
</head>
<body>
<h2>First Row of Floats</h2>
<div class="float">Float 1</div>
<div class="float">Float 2</div>
<div class="float">Float 3</div>

<div class="float-divider"></div>

<h2>Second Row of Floats</h2>
<div class="float">Float 4</div>
<div class="float">Float 5</div>
<div class="float">Float 6</div>
</body>
</html>
</source>

==float highlighted dimensions with multiple paragraphs==



<source lang="html4strict">

<!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">
p#floated {
float: left;
border: 1px solid black;
padding: 10px;
width: 100px;
background: gold;
margin: 10px;
}
p.normal {
border: 1px solid black;
background: red;
}
</style>
</head>
<body>
<p id="floated">
This paragraph is floated left.
</p>
<p class="normal">
The text if this paragraph is beside the floated paragraph.
</p>
<p class="normal">
The text if this paragraph is beside the floated paragraph.
</p>
</body>
</html>
</source>

==Floating around table==



<source lang="html4strict">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> Doctype Sniffing </title>
<style type="text/css" media="all">
table {
margin: auto;
}
td {
background: red;
margin: 10%;
border: 5px solid black;
padding: 10%;
width: 100%;
color: black;
font-size: 200%;
text-align: center;
}
div {
background: green;
border: 5px solid black;
font-size: 200%;
padding: 1%;
}
#div1 {
float: left;
width: 30%;
}
#div2 {
margin-left: 34%;
width: auto;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Some content.
</td>
</tr>
</table>
<div id="div1">
This div smells funny.
</div>
<div id="div2">
This div has a <em>strange</em>
and rather pleasing about it.
</div>
</body>
</html>
</source>

==Floating Positioning==



<source lang="html4strict">

<?xml version="1.0" ?>
<!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" lang="en" xml:lang="en">
<head>
<title>Floating Positioning</title>
<style rel="stylesheet" type="text/css">
body {
color: #000000;
background-color: #ffffff;
font-family: arial, verdana, sans-serif;
font-size: 12px;
margin: 10px;
border-style: solid;
border-width: 1px;
border-color: #000000;
}
p {
border-style: solid;
border-color: #000000;
border-width: 2px;
padding: 5px;
background-color: #FFFFFF;
width: 500px;
}
.pullQuote {
float: right;
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
width: 150px;
}
</style>
</head>
<body>
<h1>Floating</h1>
<p><span class="pullQuote">the page.</span>
This will be at the top of the page. </p>
<p>Here is paragraph.</p>
</body>
</html>
</source>

==Float-left clear-left shrunk==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .float-left {
float: left;
background: gold;
}
* .clear-left {
clear: left;
background: yellow;
}
* .shrunk {
margin: 3px;
padding: 1px;
background-color: pink;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-left clear-left shrunk">Float</p>
</div>
</body>
</html>
</source>

==Float left shrunk==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .shrunk {
margin: 3px;
padding: 1px;
background-color: yellow;
}
* .float-left {
float: left;
background: gold;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-left shrunk">Float</p>
</div>
</body>
</html>
</source>

==float multiple blocks==



<source lang="html4strict">

<!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">
p {
float: left;
border: 1px solid black;
padding: 10px;
background: pink;
margin: 10px;
}
</style>
</head>
<body>
<p>
This is the text of the first paragraph.
</p>
<p>
This is the text of the second paragraph.
</p>
<p>
This is the text of the third paragraph.
</p>
</body>
</html>
</source>

==Float-right clear-right shrunk==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .clear-right {
clear: right;
background: purple;
}
* .shrunk {
margin: 3px;
padding: 1px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-right clear-right shrunk">Float</p>
</div>
</body>
</html>
</source>

==Float right shrunk==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .float-right {
float: right;
background: pink;
}
* .shrunk {
margin: 3px;
padding: 1px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-right shrunk">Float</p>
</div>
</body>
</html>
</source>

==float with default margin padding==



<source lang="html4strict">

<!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">
body {
margin: 0;
padding: 8px;
}
p#floated {
float: left;
}
p {
border: thin solid black;
}
</style>
</head>
<body>
<p id="floated">
This paragraph is floated left.
</p>
<p id="normal">
The text of this paragraph is beside the floated paragraph.
</p>
</body>
</html>
</source>

==Left-retracted Float==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .float-right {
float: right;
background: pink;
}
* .left-retracted {
margin-left: -185px;
background: blue;
color: white;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-right left-retracted">Left-retracted Float</p>
</div>
</body>
</html>
</source>

==Opposing Floats==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">

#title {
float: left;
min-width: 280px;
max-width: 350px;
margin-left: 0;
background: pink;
}
#search {
float: right;
min-width: 280px;
max-width: 350px;
margin-right: 0;
background:red;
}
</style>
</head>
<body>
<h1 id="title">left</h1>
<div id="search">
right

</div>
</body>
</html>
</source>

==Relative Float==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .parent {
position: relative;
padding: 20px;
background: red;
}
* .relative1 {
position: relative;
z-index: 3;
top: 10px;
left: 10px;
background: pink;
}
* .float {
float: left;
width: 100px;
height: 50px;
margin-right: 25px;
margin-bottom: 40px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="relative1 float">Relative Float 1</div>
</div>
</body>
</html>
</source>

==Relative parent and abolute child==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .parent {
position: relative;
padding: 20px;
background: red;
}
* .relative2 {
position: relative;
z-index: 2;
top: 20px;
left: -30px;
background: gold;
}
* .absolute {
position: absolute;
z-index: 1;
top: 102px;
left: 215px;
background: gray;
}
</style>
</head>
<body>
<div class="parent">
<span class="absolute">absolute</span>
</div>
</body>
</html>
</source>

==Relative parent and relative child==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .parent {
position: relative;
padding: 20px;
background: red;
}
* .relative2 {
position: relative;
z-index: 2;
top: 20px;
left: -30px;
background: gold;
}
* .float {
float: left;
width: 100px;
height: 50px;
margin-right: 25px;
margin-bottom: 40px;
background: yellow;
}
</style>
</head>
<body>
<div class="parent">
<div class="relative2 float">Relative Float 2</div>
</div>
</body>
</html>
</source>

==Right-extended and Top-extended Float==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .float-right {
float: right;
background: yellow;
}
* .widened {
width: 175px;
background: gold;
}
* .top-extended {
margin-top: 20px;
background: purple;
}
* .right-extended {
margin-right: 120px;
background: pink;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-right widened right-extended top-extended">
Right-extended and Top-extended Float</p>
</div>
</body>
</html>
</source>

==Right-retracted Float==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .right-retracted {
margin-right: -55px;
background: gray;
}
* .float-left {
float: left;
background: gold;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-left right-retracted">Right-retracted Float</p>
</div>
</body>
</html>
</source>

==Sized float right==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .sized {
width: 70px;
height: 60px;
margin: 10px;
background: red;
}
* .float-right {
float: right;
background: pink;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-right sized">Sized Float</p>
</div>
</body>
</html>
</source>

==Sized left float==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
.parent{
width: 800px;
height: 800px;
background: black;
}
* .sized {
width: 70px;
height: 60px;
margin: 10px;
background: red;
}
* .float-left {
float: left;
background: gold;
}
</style>
</head>
<body>
<div class="parent" >
<p class="float-left sized">Sized Float</p>

</div>
</body>
</html>
</source>

==Two childred Floating left==



<source lang="html4strict">

<!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: lightyellow;
}
div#float {
background: lightgrey;
float: left;
border: 1px solid black;
width: 150px;
height: 150px;
}
ul {
margin: 0;
list-style: none;
}
</style>
</head>
<body>
<div id="container">
<div id="float">
<p>
Float text.
Float text. Float text. Float text. Float text.
Float text. Float text. Float text. Float text.
</p>
<p>
This text is chopped off!
This text is chopped off!
</p>
</div>
<ul>
<li><a href="#">Content on.</a></li>
<li><a href="#">Content on.</a></li>
<li><a href="#">Content off.</a></li>
<li><a href="#">Content off.</a></li>
<li><a href="#">Content off.</a></li>
</ul>
</div>
</body>
</html>
</source>

==Two Floating Sections: 25% of container"s width, 55% of container"s width minus left margin, left border, left border, and left padding==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
#nav {
float: left;
width: 25%;
background: yellow;
min-height: 150px;
margin: 0;
padding: 5px;
}
#main {
float: left;
width: 55%;
min-width: 170px;
min-height: 150px;
margin-left: 80px;
padding: 5px;
padding-left: 80px;
background: red;
}
</style>
</head>
<body>
<div id="nav">
<h2>Navigation Section</h2>
</div>
<div id="main">
<h2>Main Section</h2>
</div>
</body>
</html>
</source>

==Two floats with 45% width and 5% left margin==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
max-width: 800px;
}
div {
min-width: 100px;
}
* .ex3 {
float: left;
width: 45%;
margin-left: 5%;
background: yellow;
}

</style>
</head>
<body>
<div class="ex3"> Float1 </div>
<div class="ex3"> Float2 </div>
<hr />
</body>
</html>
</source>

==Two floats with 49.5% width and 5px left margin==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
max-width: 800px;
}
div {
min-width: 100px;
}
* .ex4 {
float: left;
width: 49.5%;
margin-left: 5px;
background: red;
}

</style>
</head>
<body>

<div class="ex4"> Float1 </div>
<div class="ex4"> Float2 </div>
</body>
</html>
</source>

==Two floats with 50% width and 1px border==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
max-width: 800px;
}
div {
min-width: 100px;
}
* .ex2 {
float: left;
width: 50%;
border: 1px solid;
background: blue;
}

</style>
</head>
<body>

<div class="ex2"> Float1 </div>
<div class="ex2"> Float2 </div>
</body>
</html>
</source>

==Two floats with 50% width and no margins, borders, or padding==



<source lang="html4strict">

<!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=utf-8" />
<title></title>
<style type="text/css" media="Screen">
body {
max-width: 800px;
}
div {
min-width: 100px;
}
* .ex1 {
float: left;
width: 50%;
background: menu;
}

</style>
</head>
<body>

<div class="ex1"> Float1 </div>
<div class="ex1"> Float2 </div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/Layout/float and position - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия