http://wbex.ru/index.php?action=history&feed=atom&title=HTML%2FCSS%2FLayout%2Ffooter
HTML/CSS/Layout/footer - История изменений
2026-04-06T01:51:13Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=HTML/CSS/Layout/footer&diff=5026&oldid=prev
в 09:21, 26 мая 2010
2010-05-26T09:21:00Z
<p></p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 09:21, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
http://wbex.ru/index.php?title=HTML/CSS/Layout/footer&diff=5027&oldid=prev
Admin: 1 версия
2010-05-26T08:16:17Z
<p>1 версия</p>
<p><b>Новая страница</b></p><div>==3 column layout with equalising columns and footer==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<title></title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><br />
<style type="text/css"><br />
#outer{<br />
height:100%;<br />
min-height:100%;<br />
margin-left:260px;<br />
margin-right:130px;<br />
background:#aaa;<br />
border-left:1px solid #000;<br />
border-right:1px solid #000;<br />
margin-bottom:-52px;<br />
}<br />
<br />
html>body #outer{<br />
height:auto;<br />
}<br />
#header{<br />
position:absolute;<br />
top:0;<br />
left:0;<br />
width:100%;<br />
height:70px;<br />
background:#eee;<br />
border-top:1px solid #000;<br />
border-bottom:1px solid #000;<br />
overflow:hidden;<br />
}<br />
#left {<br />
position:relative;<br />
width:260px;<br />
float:left;<br />
margin-left:-259px;<br />
padding-top:72px;<br />
}<br />
#left p {padding-left:1px;padding-right:3px}<br />
#right p {padding-left:3px;padding-right:2px}<br />
#right {<br />
position:relative;<br />
width:130px;<br />
float:right;<br />
margin-right:-129px;<br />
padding-top:72px;<br />
}<br />
#leftfr {<br />
float:right;<br />
width:125px;<br />
}<br />
#leftfl {<br />
float:left;<br />
width:130px;<br />
}<br />
#footer {<br />
width:100%;<br />
clear:both;<br />
height:50px;<br />
border-top:1px solid #000;<br />
border-bottom:1px solid #000;<br />
background-color: #ddd;<br />
text-align:center;<br />
position:relative;<br />
}<br />
* html #footer {<br />
height:52px;<br />
}<br />
#clearheader{<br />
height:72px;<br />
}<br />
#clearfooter{<br />
clear:both;<br />
height:40px;<br />
}<br />
div,p {<br />
margin-top:0<br />
}<br />
* html #centrecontent {<br />
height:1%;<br />
margin-bottom:12px<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="outer"> <br />
<div id="left"> <br />
<div id="leftfl"> <br />
<p>this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. <br />
this is a test. this is a test. this is a test. this is a test. </p><br />
</div><br />
<div id="leftfr"> <br />
<p>Left Content goes here : </p><br />
</div><br />
</div><br />
<br />
<br />
<div id="right"> <br />
<p>Right content goes here : Right content goes here : Right content goes <br />
here : Right content goes here : Right content goes here : Right content <br />
goes here : Right content goes here : Right content goes here : Right content <br />
goes here : </p><br />
</div><br />
<div id="clearheader"></div><br />
<div id="centrecontent"><br />
<p>link</p><br />
</div><br />
<div id="clearfooter"></div><br />
</div><br />
<div id="footer">| <a href="">A</a> | <a href="">2</a> | <a href="">3</a> | <a href=""><br />
E</a> | <a href="">Author</a> | </div><br />
<div id="header">Header</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Fixed footer==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><br />
<head><br />
<title>positioning</title><br />
<style rel="stylesheet" type="text/css"><br />
div#container {<br />
position: absolute;<br />
top: 0;<br />
right: 0;<br />
bottom: 31px;<br />
left: 0;<br />
overflow: auto;<br />
padding: 0 10px;<br />
line-height: 2em;<br />
}<br />
div#footer {<br />
position: absolute;<br />
bottom: 0;<br />
right: 0;<br />
left: 0;<br />
height: 20px;<br />
font-weight: normal;<br />
font-size: 14px;<br />
text-align: center;<br />
border-top: 1px solid rgb(200, 200, 200);<br />
background: white;<br />
margin: 0;<br />
padding: 5px;<br />
}<br />
div#footer p {<br />
margin: 0;<br />
} <br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<p><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu<br />
Aenean dictum dolor ut sem.<br />
</p><br />
<p><br />
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel<br />
conubia nostra, per inceptos hymenaeos.<br />
</p><br />
</div><br />
<div id="footer"><br />
<p><br />
A fixed footer.<br />
</p><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==footer border==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title> My favorite records </title><br />
<style rel="stylesheet" type="text/css"><br />
table {<br />
width: 100%;<br />
border: thin solid black;<br />
}<br />
td {<br />
border: thin solid black;<br />
}<br />
th, tfoot td {<br />
border: thin solid black;<br />
text-align: center;<br />
font-weight: bold;<br />
}<br />
tbody td {<br />
font-size: 120%;<br />
}<br />
caption {<br />
font-size: 90%;<br />
text-align: right;<br />
}<br />
td, th, caption {<br />
padding: 5px;<br />
} <br />
</style><br />
</head><br />
<body><br />
<table><br />
<caption><br />
Table: My favorite records.<br />
</caption><br />
<colgroup><br />
<col/><br />
<col/><br />
<col/><br />
</colgroup><br />
<thead><br />
<tr><br />
<th> a</th><br />
<th> a</th><br />
<th> r</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td></td><br />
<td></td><br />
<td></td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td> a</td><br />
<td> a</td><br />
<td> r</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Footer: clear left==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
<br />
body {<br />
font-family: verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
<br />
#header {<br />
background: #ccc;<br />
padding: 20px;<br />
}<br />
<br />
#content {<br />
float: left;<br />
width: 60%;<br />
margin-right: 6%;<br />
}<br />
<br />
#footer {<br />
clear: left;<br />
background: #eee;<br />
padding: 20px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="header"><br />
<strong>HEADER</strong><br />
</div><br />
<div id="content"><br />
<p><strong>CONTENT</strong> <br />
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
</p><br />
<p>This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. <br />
</p><br />
</div><br />
<div id="sidebar"><br />
<p><strong>SIDEBAR</strong></p><br />
<ul><br />
<li><a href="#">Link Item 1</a></li><br />
<li><a href="#">Link Item 2</a></li><br />
<li><a href="#">Link Item 3</a></li><br />
<li><a href="#">Link Item 4</a></li><br />
</ul><br />
</div><br />
<div id="footer"><br />
<strong>FOOTER</strong><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Footer layout==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" title="text/css"><br />
#navigation a:link {<br />
font-weight: bold;<br />
font-size: 200%;<br />
text-decoration: none;<br />
color: #666;<br />
}<br />
#navigation a:hover {<br />
text-decoration: underline;<br />
}<br />
a:link {<br />
font-weight: bold;<br />
color: #aaa;<br />
}<br />
#footer a {<br />
font-size: 80%;<br />
}<br />
a:active {<br />
background-color: red;<br />
}<br />
#navigation a:active {<br />
background-color: transparent;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="footer"><br />
<a href="index.html">Homepage</a> | <a href="">Products</a> | <a href="contact_details.html">Contact details</a><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Footer with bottom offset==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br />
<html><br />
<head><br />
<title>CSS Positioning Example</title><br />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><br />
<style rel="stylesheet" type="text/css"><br />
div#heading {<br />
position: fixed;<br />
top: 0px;<br />
left: 0px;<br />
width: 100%;<br />
height: 80px;<br />
color: #ffffff;<br />
background-color: #666666;<br />
border: 1px solid #000000;<br />
}<br />
div#nav {<br />
position: fixed;<br />
top: 80px;<br />
left: 0px;<br />
width: 120px;<br />
background-color: #efefef;<br />
border: 1px solid #000000;<br />
}<br />
div#page {<br />
margin-left: 120px;<br />
margin-top: 80px;<br />
background-color: #ffffff;<br />
border: 1px solid #000000;<br />
}<br />
div#footer {<br />
position: fixed;<br />
bottom: 0px;<br />
left: 0px;<br />
background-color: #999999;<br />
width: 100%;<br />
height: 20px;<br />
}<br />
</style><br />
</head><br />
<body><br />
<div id="heading"><h1>Masthead</h1></div><br />
<div id="nav"><br />
Navigation item<br /><br />
Navigation item<br /><br />
Navigation item<br /><br />
</div><br />
<div id="page"> <br />
<h1>Heading One</h1><br />
<p>This is paragraph one.</p><br />
</div><br />
<div id="footer"><br />
Footer<br />
</div><br />
</body><br />
<br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Header, footer, side bar and content==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"<br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><br />
<head><br />
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><br />
<title></title><br />
<style type="text/css" media="screen"><br />
body {<br />
font-family: verdana, sans-serif;<br />
font-size: 12px;<br />
}<br />
<br />
#header {<br />
background: #ccc;<br />
padding: 20px;<br />
}<br />
<br />
#sidebar {<br />
float: right;<br />
width: 30%;<br />
background: #999;<br />
}<br />
<br />
#content {<br />
margin-right: 34%;<br />
}<br />
<br />
#footer {<br />
clear: right;<br />
background: #eee;<br />
padding: 20px;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="header"><br />
<strong>HEADER</strong><br />
</div><br />
<div id="sidebar"><br />
<p><strong>SIDEBAR</strong></p><br />
<ul><br />
<li><a href="#">Link Item 1</a></li><br />
<li><a href="#">Link Item 2</a></li><br />
<li><a href="#">Link Item 3</a></li><br />
<li><a href="#">Link Item 4</a></li><br />
</ul><br />
</div><br />
<div id="content"><br />
<p><strong>CONTENT</strong>This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
</p><br />
<p>This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. <br />
This is a test. This is a test. This is a test. This is a test. This is a test. <br />
</p><br />
</div><br />
<div id="footer"><br />
<strong>FOOTER</strong><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Mark footer with DIV==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
div#footer{<br />
background: #333;<br />
color: #FFF;<br />
text-align: center;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set footer to left clear==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
<br />
div#footer{ <br />
clear:left;<br />
width:100%;<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Set paragraph in footer==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" <br />
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<head><br />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><br />
<title></title><br />
<style type="text/css"><br />
div#footer p{<br />
margin:0;<br />
padding:5px 10px<br />
}<br />
<br />
</style><br />
</head><br />
<body><br />
<div id="container"><br />
<div id="header"><br />
<h1>My Amazing Web Site </h1><br />
</div><br />
<div id="wrapper"><br />
<div id="content"><br />
<h2>Contact Form</h2><br />
<form id="form1" name="form1" method="post" action="/"><br />
<label for="fmname" accesskey="n"><span class="akey">N</span>ame</label><br />
<input type="text" name="fmname" id="fmname" /><br />
<br />
<label for="fmemail" accesskey="e"><span class="akey">E</span>mail</label><br />
<input type="text" name="fmemail" id="fmemail" /><br />
<br />
<label for="fmstate" accesskey="a">St<span class="akey">a</span>te/Province</label><br />
<input type="text" name="fmstate" id="fmstate" /><br />
<br />
<label for="fmstate" accesskey="y">Countr<span class="akey">y</span></label><br />
<input type="text" name="fmcountry" id="fmcountry" /><br />
<br />
<label for="fmmsg"><span class="akey">M</span>essage</label><br />
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea><br />
<br />
<input type="submit" name="submit" value="send" class="submit" /><br />
</form><br />
</div><br />
</div><br />
<div id="extra"><br />
<h2>quid pro quo</h2><br />
</div><br />
<div id="footer"><br />
<p>ask.</p><br />
</div><br />
</div><br />
</body><br />
</html><br />
</source><br />
<br />
<br />
<br />
<br />
==Table footer background and color==<br />
<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="html4strict"><br />
<br />
<br />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html><br />
<head><br />
<title>Hummus</title><br />
<style type="text/css" media="all"><br />
table {<br />
border-width: 0px;<br />
width: 500px;<br />
}<br />
th {<br />
background: black;<br />
color: white;<br />
}<br />
tfoot td {<br />
background: #808080;<br />
color: white;<br />
}<br />
</style><br />
</head><br />
<body><br />
<table><br />
<thead><br />
<tr><br />
<th colspan="4"><br />
Hummus<br />
</th><br />
</tr><br />
<tr><br />
<th><br />
#<br />
</th><br />
<th><br />
Measurement<br />
</th><br />
<th><br />
Product<br />
</th><br />
<th><br />
Instructions<br />
</th><br />
</tr><br />
</thead><br />
<tbody><br />
<tr><br />
<td>1</td><br />
<td>C</td><br />
<td colspan="2">T</td><br />
</tr><br />
<tr><br />
<td>2</td><br />
<td>T</td><br />
<td>P</td><br />
<td>C</td><br />
</tr><br />
</tbody><br />
<tfoot><br />
<tr><br />
<td colspan="4"><br />
This is a test. This is a test. <br />
</td><br />
</tr><br />
</tfoot><br />
</table><br />
</body><br />
</html><br />
</source></div>
Admin