в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:40Z

1 версия

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

==Aligned and Offset Absolute==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
div {
position: relative;
width: 600px;
height: 600px;
background: black;
}
#lt {
position: absolute;
width: auto;
left: 0;
margin-left: 8px;
right: auto;
margin-right: auto;
height: auto;
top: 0;
margin-top: 8px;
bottom: auto;
margin-bottom: auto;
background: red;
}
</style>
</head>
<body>
<div>
<p id="lt">Left-top Aligned & Offset</p>
</div>

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

==Aligned Outside with large negative margin value==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .parent {
left: 300px;
top: 300px;
position: relative;
height: 140px;
width: 200px;
background: black;
}
* .negativeMargin {
width: 220px;
margin-left: -234px;
background: red;
}
</style>
</head>
<body>
<div class="parent">Parent
<p class="negativeMargin">Sized Block Outside Left</p>
</div>
</body>
</html>
</source>

==A paragraph with a margin-left set at 20%==



<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>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #808080;
}
p {
background-color: #c0c0c0;
margin-left: 20%;
padding-left: 10%;
}
</style>
</head>
<body>
<p>A paragraph with a margin-left set at 20%.</p>
</body>
</html>
</source>

==A percentage margin refers to a percentage of the containing block"s width.==



<source lang="html4strict">

<!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></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
position: absolute;
margin-left: 10%;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==Left aligned and offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
.grandContainer{
width: 600px;
height: 600px;
background: black;
}
#left-off {
position: static;
width: 200px;
margin-left: 50px;
margin-right: auto;
background: pink;
}
</style>
</head>
<body>
<div class="grandContainer">
<p id="left-off">Left Aligned & Offset</p>
</div>
</body>
</html>
</source>

==Left-bottom Aligned and Offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
div {
position: relative;
width: 600px;
height: 600px;
background: black;
}
#lb {
position: absolute;
width: 240px;
left: 0;
margin-left: 8px;
right: auto;
margin-right: auto;
height: 18px;
top: auto;
margin-top: auto;
bottom: 0;
margin-bottom: 8px;
background: red;
}
</style>
</head>
<body>
<div>
<p id="lb">Left-bottom Aligned and Offset</p>
</div>

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

==LI margin-left: 10%==



<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>
<title>Box Model Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
background-color: #808080;
}
li {
background-color: #ffffff;
}
li p {
margin-left: 10%;
}
</style>
</head>
<body>

<ul>
<li>Item one</li>
<li><p>Paragraph item</p></li>
</ul>
</body>
</html>
</source>

==margin can be positive or negative.==



<source lang="html4strict">

<!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></title>
<style type="text/css">
.container{
position: relative;
width: 800px;
height: 800px;
background: pink;
}
* .box {
float: right;
overflow: auto;
visibility: visible;
width: auto;
height: 100px;
margin: 10px;
padding: 10px;
background: red;
}
* .small {
position: absolute;
margin-left: -100px;
background: yellow;
}
</style>
</head>
<body>
<div class="container">
<div class="small">this is a test. <BR/>this is a test. this is a test. this is a test. </div>
<div class="box">this is a test</div>
</div>
</body>
</html>
</source>

==margin-left: auto==



<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 {
padding: 2em;
margin: 2em;
border: thin solid black;
width: 10em;
margin-left: auto;
}
</style>
</head>
<body>
<p>
This is a test. This is a test.
</p>
</body>
</html>
</source>

==margin-left setting for UL==



<source lang="html4strict">

<?xml version = "1.0"?>
<!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>
<style type = "text/css">
ul { margin-left: 75px }
</style>
</head>
<body>
<h1>Shopping list for <em>Monday</em>:</h1>
<ul>
<li>M</li>
<li>B
<ul>
<li>W</li>
<li>R</li>
<li>W</li>
</ul>
</li>
<li>R</li>
<li>P</li>
<li>P<em>this is a test. </em></li>
</ul>
<p><a class = "nodec" href = "http://www.wbex.ru">
this is a test. </a></p>
</body>
</html>
</source>

==Right aligned and offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
.grandContainer{
width: 600px;
height: 600px;
background: black;
}
#right-off {
position: static;
width: 200px;
margin-left: auto;
margin-right: 50px;
background: blue;
color: white;
}

</style>
</head>
<body>
<div class="grandContainer">
<p id="right-off">Right Aligned & Offset</p>
</div>
</body>
</html>
</source>

==Set margin-left and margin-right==



<source lang="html4strict">

<!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></title>
<style type="text/css">
p.normal {
padding: 0;
margin-left: 0;
margin-right: 0;
}
p.large {
margin-left: 33%;
margin-right: 5%;
}
p.medium {
margin-left: 15%;
margin-right: 33%;
}
</style>
</head>
<body>
<h1>The heading for this page</h1>
<p class="normal">normal class.</p>
<p class="large">large class.</p>
<p class="medium ">medium class</p>
</body>
</html>
</source>

==Shrinkwrapped Absolute left offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
}
div.rumon span {
margin-left: -60px;
border: 1px dotted black;
}
span.rumon span {
margin-left: 30px;
border: none;
}
#wa {
position: absolute;
text-align: left;
top: 0;
margin-top: 200px;
width: auto;
left: 0;
margin-left: -50px;
right: auto;
margin-right: auto;
background-color: pink;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="wa" class="common"><span>Shrinkwrapped Absolute: -50px</span></span>
</div>
</div>
</body>
</html>
</source>

==Sized Absolute left offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
}
div.rumon span {
margin-left: -60px;
border: 1px dotted black;
}
span.rumon span {
margin-left: 30px;
border: none;
}
#myAbsolute {
position: absolute;
text-align: left;
top: 0;
margin-top: 155px;
width: 400px;
left: 0;
margin-left: -50px;
right: auto;
margin-right: auto;
background-color: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myAbsolute" class="common"><span>Sized Absolute: -50px</span></span>
</div>
</div>
</body>
</html>
</source>

==Static Block centered offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
background: red;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
background: purple;
}
* .ex {
padding: 5px;
border: 5px solid black;
}
* .ex span {
margin-left: -40px;
}
#ss {
position: static;
text-align: center;
margin-top: 5px;
width: auto;
margin-left: 90px;
margin-right: 10px;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="ss" class="ex"><span>Stretched Static Block: 40px</span></div>
</div>
</div>
</body>
</html>
</source>

==Stretched Absolute left offset==



<source lang="html4strict">

<!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>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" title="text/css">
* .grandContainer {
position: relative;
height: 295px;
width: 600px;
border: 2px solid black;
}
* .parent {
margin: 10px;
padding: 10px;
padding-top: 0;
border: 1px solid black;
}
* .rumon {
padding: 5px;
border: 5px solid black;
}
div.rumon span {
margin-left: -60px;
border: 1px dotted black;
}
span.rumon span {
margin-left: 30px;
border: none;
}
#sa {
position: absolute;
text-align: left;
top: 0;
margin-top: 245px;
width: auto;
left: 0;
margin-left: -50px;
right: 0;
margin-right: 0;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="sa" class="common"><span>Stretched Absolute:-50px</span></span>
</div>
</div>
</body>
</html>

</source>

==three pixel offset by margin==



<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 {
margin: 0 20px;
background: red;
width: 300px;
}
div#float {
background: lightgrey;
float: left;
border: 1px solid black;
width: 75px;
height: 50px;
}
p {
margin-left: 76px;
border: 1px solid black;
}
</style>
</head>
<body>
<div id="container">
<div id="float">
Float text.
</div>
<p>
Paragraph text. Paragraph text. Paragraph text.
</p>
</div>
</body>
</html>
</source>

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

HTML/CSS/Box Model/margin left - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия