в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:46Z

1 версия

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

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

==Left-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;
}
#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 and Offset</p>
</div>

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

==margin-bottom: 2em==



<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=ISO-8859-1" />
<title></title>
<style type="text/css">

div#content{
margin-left: 27%;
margin-bottom: 2em;
}

</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>My Amazing Web Site </h1>
</div>
<div id="wrapper">
<div id="content">
<h2>Contact Form</h2>
<form id="form1" name="form1" method="post" action="/">

<label for="fmtitle" accesskey="i">T<span class="akey">i</span>tle</label>
<select name="fmtitle" id="fmtitle">
<option value="ms">Ms.</option>
<option value="mrs">Mrs.</option>
<option value="miss">Miss</option>
<option value="mr">Mr.</option>
</select>

<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label>
<input type="text" name="fmname" id="fmname" />

<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label>
<input type="text" name="fmemail" id="fmemail" />

<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label>
<input type="text" name="fmstate" id="fmstate" />

<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label>
<input type="text" name="fmcountry" id="fmcountry" />

<label for="fmmsg"><span class="akey">M</span>essage</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>

<input type="submit" name="submit" value="send" class="submit" />
</form>
</div>
</div>
<div id="extra">
<h2>quid pro quo</h2>
</div>
<div id="footer">
<p>ask.</p>
</div>
</div>
</body>
</html>
</source>

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

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

==Set margin for hr==



<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">
hr {
margin-left: auto;
margin-right: auto;
margin-top: 1.25em;
margin-bottom: 1.25em;
width: 10px;
height: 10px;
background-color: #777;
}
</style>
</head>
<body>
<hr/>
<p>This is a text</p>

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

==specify margin via one of the four separate margin properties: margin-top, margin-right, margin-bottom, and margin-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 xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>margin</title>
<style rel="stylesheet" type="text/css">
div.margin-wrapper {
background: lightyellow;
border: 1px solid gold;
float: left;
margin: 5px;
}
div.margin-wrapper div {
background: khaki;
border: 1px solid black;
width: 25px;
height: 25px;
}
div#margin-properties {
margin-top: 2px;
margin-right: 4px;
margin-bottom: 6px;
margin-left: 8px;
}

</style>
</head>
<body>
<div class="margin-wrapper">
<div id="margin-properties">asdf</div>
</div>
</body>
</html>
</source>

==Static Block Bottom Aligned with margin-bottom: 0==



<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">
* .grandContainer {
position: relative;
height: 300px;
width: 700px;
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;
background-color: gold;
width: 120px;
text-align: center;
position: relative;
}
* .extraStyle span {
height: auto;
left: 0;
width: 130px;
}
span.extraStyle span {
position: absolute;
top: auto;
margin-top: auto;
bottom: 0;
margin-bottom: 0;
}
#sizedStaticBlock {
height: 100px;
margin-top: auto;
margin-bottom: 0;
position: static;
margin-left: 0px;
background: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div>
</div>
</div>
</body>
</html>
</source>

==Top Aligned 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 {
position: relative;
height: 300px;
width: 700px;
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;
width: 120px;
text-align: center;
position: relative;
}
* .extraStyle span {
left: 0;
width: 130px;
height: auto;
}
#sizedStaticBlock {
height: 100px;
margin-top: 0;
margin-bottom: auto;
position: static;
background-color: gold;
}
</style>
</head>
<body>
<div class="grandContainer">Positioned Grandparent
<div class="parent">Non-positioned Parent
<div id="sizedStaticBlock" class="extraStyle"><span>Sized Static Block</span></div>
</div>
</div>
</body>
</html>
</source>

==Top and bottom margins set 5% for me==



<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;
}
h2 {
background-color: #c0c0c0;
margin-left: 5%;
margin-top: 5%;
margin-bottom: 5%;
padding-left: 1em;
}
</style> </head>
<body>
<h2>Top and bottom margins set 5% for me</h2>

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

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

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

в 09:21, 26 мая 2010

Admin: 1 версия