в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:43Z

1 версия

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

==Aligned center horizontally for absolute position==



<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;
background: black;
}
#cm {
position: absolute;
}
* .centeredMargin {
width: 200px;
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
background: red;
}
</style>
</head>
<body>
<div>
<p id="cm" class="centeredMargin">Horizontally & Vertically Centered</p>
</div>
</body>
</html>
</source>

==Aligned center vertically for absolute position==



<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;
background: black;
}
#cm {
position: absolute;
}
* .centeredMargin {
width: 200px;
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
background: red;
}
</style>
</head>
<body>
<div>
<p id="cm" class="centeredMargin">Horizontally & Vertically Centered</p>
</div>
</body>
</html>
</source>

==Center Aligned static==



<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;
}
#center {
position: static;
width: 120px;
margin-left: auto;
margin-right: auto;
background: gold;
}
</style>
</head>
<body>
<div class="grandContainer">
<p id="center">Center Aligned</p>
</div>
</body>
</html>
</source>

==Centered body==



<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=ISO-8859-1" />
<title>Centered body</title>
<style type="text/css">
body {
background: #ccc;
border: 1px solid black;
padding: 20px;
margin-left: auto;
margin-right: auto;
width: 20em;
}
</style>
</head>
<body>
<h1>This is the title</h1>
<p>this is a test. this is a test. </p>
</body>
</html>
</source>

==Center-middle Aligned==



<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;
}
#cm {
position: absolute;
width: 200px;
left: 0;
margin-left: auto;
right: 0;
margin-right: auto;
height: 18px;
top: 0;
margin-top: auto;
bottom: 0;
margin-bottom: auto;
background: red;
}
</style>
</head>
<body>
<div>
<p id="cm">Center-middle Aligned</p>
</div>

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

==Left Aligned and Offset Static Block==



<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 {
position: static;
width: 120px;
margin-left: 0;
margin-right: auto;
background: red;
}
</style>
</head>
<body>
<div class="grandContainer">
<p id="left">Left Aligned</p>
</div>
</body>
</html>
</source>

==Left Aligned Sized Static Block with margin-right: 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 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;
background-color: gold;
}
#sizedStaticBlock {
position: static;
text-align: left;
margin-top: 5px;
width: 400px;
margin-left: 0;
margin-right: auto;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="common">Sized Static Block </div>
</div>
</div>
</body>
</html>
</source>

==Right Aligned static==



<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 {
position: static;
width: 120px;
margin-left: auto;
margin-right: 0;
background: yellow;
}
</style>
</head>
<body>
<div class="grandContainer">
<p id="right">Right Aligned</p>
</div>
</body>
</html>
</source>

==Right-top 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;
}
#rt {
position: absolute;
width: 220px;
left: auto;
margin-left: auto;
right: 0;
margin-right: 8px;
height: 18px;
top: 0;
margin-top: 8px;
bottom: auto;
margin-bottom: auto;
background: red;
}
</style>
</head>
<body>
<div>
<p id="rt">Right-top Aligned and Offset</p>
</div>

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

==Set margin for four directions==



<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" xml:lang="en">
<head>
<title>margin</title>
<style rel="stylesheet" type="text/css">
div {
width: 100px;
height: 100px;
background: pink;
border: 1px solid pink;
}
div#top-rightleft-bottom {
margin-right: 5px;
}
div#top-rightleft-bottom-1 {
margin: 15px 5px 10px;
}
</style>
</head>
<body>
<div id="top-rightleft-bottom"></div>
<div id="top-rightleft-bottom-1"></div>
</body>
</html>
</source>

==Set margin left and right to 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 xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
h1, h2, h3 {
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<h2 id="warning">Lorem ipsum dolor sit amet</h2>
<h2 id="questions">Nulla cursus semper metus</h2>
<p>this is a text.</p>

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

==Sized Absolute right aligned==



<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;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#myAbsolute {
position: absolute;
text-align: right;
top: 0;
margin-top: 155px;
width: 400px;
left: auto;
margin-left: auto;
right: 0;
margin-right: 0;
background-color: gold;
}</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myAbsolute" class="example">Sized Absolute</span>
</div>
</div>
</body>
</html>
</source>

==Sized Relative block==



<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;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#myAbsolute {
position: relative;
text-align: right;
top: 0;
margin-top: 155px;
width: 400px;
left: auto;
margin-left: auto;
right: 0;
margin-right: 0;
background-color: gold;
}</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="myAbsolute" class="example">Sized Relative</span>
</div>
</div>
</body>
</html>
</source>

==Sized Static Block right aligned==



<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;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#sizedStaticBlock {
position: static;
text-align: right;
margin-top: 5px;
width: 400px;
margin-left: auto;
margin-right: 0;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="example">Sized Static Block </div>
</div>
</div>
</body>
</html>
</source>

==Stretched Absolute right 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;
}
* .extraStyle {
padding: 5px;
border: 5px solid black;
}
div.extraStyle span {
margin-right: -60px;
border: 1px dotted black;
}
span.extraStyle span {
margin-right: 30px;
border: none;
background-color: gold;
}
#sa {
position: absolute;
text-align: right;
top: 0;
margin-top: 245px;
width: auto;
left: 0;
margin-left: 0;
right: 0;
margin-right: -50px;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<span id="sa" class="extraStyle"><span>-50px</span></span>
</div>
</div>
</body>
</html>
</source>

==Stretched Static Block right aligned==



<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;
}
* .example {
padding: 5px;
border: 5px solid black;
}
#myStyle {
position: static;
text-align: right;
margin-top: 5px;
width: auto;
margin-left: 0;
margin-right: 0;
background-color: gold;
}</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="myStyle" class="example">Stretched Static Block</div>
</div>
</div>
</body>
</html>
</source>

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

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

в 09:21, 26 мая 2010

Admin: 1 версия