HTML/CSS/Layout/footer — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
| |
Текущая версия на 08:16, 26 мая 2010
Содержание
- 1 3 column layout with equalising columns and footer
- 2 Fixed footer
- 3 footer border
- 4 Footer: clear left
- 5 Footer layout
- 6 Footer with bottom offset
- 7 Header, footer, side bar and content
- 8 Mark footer with DIV
- 9 Set footer to left clear
- 10 Set paragraph in footer
- 11 Table footer background and color
<!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></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer{
height:100%;
min-height:100%;
margin-left:260px;
margin-right:130px;
background:#aaa;
border-left:1px solid #000;
border-right:1px solid #000;
margin-bottom:-52px;
}
html>body #outer{
height:auto;
}
#header{
position:absolute;
top:0;
left:0;
width:100%;
height:70px;
background:#eee;
border-top:1px solid #000;
border-bottom:1px solid #000;
overflow:hidden;
}
#left {
position:relative;
width:260px;
float:left;
margin-left:-259px;
padding-top:72px;
}
#left p {padding-left:1px;padding-right:3px}
#right p {padding-left:3px;padding-right:2px}
#right {
position:relative;
width:130px;
float:right;
margin-right:-129px;
padding-top:72px;
}
#leftfr {
float:right;
width:125px;
}
#leftfl {
float:left;
width:130px;
}
#footer {
width:100%;
clear:both;
height:50px;
border-top:1px solid #000;
border-bottom:1px solid #000;
background-color: #ddd;
text-align:center;
position:relative;
}
* html #footer {
height:52px;
}
#clearheader{
height:72px;
}
#clearfooter{
clear:both;
height:40px;
}
div,p {
margin-top:0
}
* html #centrecontent {
height:1%;
margin-bottom:12px
}
</style>
</head>
<body>
<div id="outer">
<div id="left">
<div id="leftfl">
<p>this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test.
this is a test. this is a test. this is a test. this is a test. </p>
</div>
<div id="leftfr">
<p>Left Content goes here : </p>
</div>
</div>
<div id="right">
<p>Right content goes here : Right content goes here : Right content goes
here : Right content goes here : Right content goes here : Right content
goes here : Right content goes here : Right content goes here : Right content
goes here : </p>
</div>
<div id="clearheader"></div>
<div id="centrecontent">
<p>link</p>
</div>
<div id="clearfooter"></div>
</div>
<div id="footer">| <a href="">A</a> | <a href="">2</a> | <a href="">3</a> | <a href="">
E</a> | <a href="">Author</a> | </div>
<div id="header">Header</div>
</body>
</html>
<!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>positioning</title>
<style rel="stylesheet" type="text/css">
div#container {
position: absolute;
top: 0;
right: 0;
bottom: 31px;
left: 0;
overflow: auto;
padding: 0 10px;
line-height: 2em;
}
div#footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
height: 20px;
font-weight: normal;
font-size: 14px;
text-align: center;
border-top: 1px solid rgb(200, 200, 200);
background: white;
margin: 0;
padding: 5px;
}
div#footer p {
margin: 0;
}
</style>
</head>
<body>
<div id="container">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu
Aenean dictum dolor ut sem.
</p>
<p>
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel
conubia nostra, per inceptos hymenaeos.
</p>
</div>
<div id="footer">
<p>
A fixed footer.
</p>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title> My favorite records </title>
<style rel="stylesheet" type="text/css">
table {
width: 100%;
border: thin solid black;
}
td {
border: thin solid black;
}
th, tfoot td {
border: thin solid black;
text-align: center;
font-weight: bold;
}
tbody td {
font-size: 120%;
}
caption {
font-size: 90%;
text-align: right;
}
td, th, caption {
padding: 5px;
}
</style>
</head>
<body>
<table>
<caption>
Table: My favorite records.
</caption>
<colgroup>
<col/>
<col/>
<col/>
</colgroup>
<thead>
<tr>
<th> a</th>
<th> a</th>
<th> r</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td> a</td>
<td> a</td>
<td> r</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
body {
font-family: verdana, sans-serif;
font-size: 12px;
}
#header {
background: #ccc;
padding: 20px;
}
#content {
float: left;
width: 60%;
margin-right: 6%;
}
#footer {
clear: left;
background: #eee;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
<strong>HEADER</strong>
</div>
<div id="content">
<p><strong>CONTENT</strong>
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test.
</p>
</div>
<div id="sidebar">
<p><strong>SIDEBAR</strong></p>
<ul>
<li><a href="#">Link Item 1</a></li>
<li><a href="#">Link Item 2</a></li>
<li><a href="#">Link Item 3</a></li>
<li><a href="#">Link Item 4</a></li>
</ul>
</div>
<div id="footer">
<strong>FOOTER</strong>
</div>
</body>
</html>
<!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">
#navigation a:link {
font-weight: bold;
font-size: 200%;
text-decoration: none;
color: #666;
}
#navigation a:hover {
text-decoration: underline;
}
a:link {
font-weight: bold;
color: #aaa;
}
#footer a {
font-size: 80%;
}
a:active {
background-color: red;
}
#navigation a:active {
background-color: transparent;
}
</style>
</head>
<body>
<div id="footer">
<a href="index.html">Homepage</a> | <a href="">Products</a> | <a href="contact_details.html">Contact details</a>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CSS Positioning Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
div#heading {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 80px;
color: #ffffff;
background-color: #666666;
border: 1px solid #000000;
}
div#nav {
position: fixed;
top: 80px;
left: 0px;
width: 120px;
background-color: #efefef;
border: 1px solid #000000;
}
div#page {
margin-left: 120px;
margin-top: 80px;
background-color: #ffffff;
border: 1px solid #000000;
}
div#footer {
position: fixed;
bottom: 0px;
left: 0px;
background-color: #999999;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div id="heading"><h1>Masthead</h1></div>
<div id="nav">
Navigation item<br />
Navigation item<br />
Navigation item<br />
</div>
<div id="page">
<h1>Heading One</h1>
<p>This is paragraph one.</p>
</div>
<div id="footer">
Footer
</div>
</body>
</html>
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
body {
font-family: verdana, sans-serif;
font-size: 12px;
}
#header {
background: #ccc;
padding: 20px;
}
#sidebar {
float: right;
width: 30%;
background: #999;
}
#content {
margin-right: 34%;
}
#footer {
clear: right;
background: #eee;
padding: 20px;
}
</style>
</head>
<body>
<div id="header">
<strong>HEADER</strong>
</div>
<div id="sidebar">
<p><strong>SIDEBAR</strong></p>
<ul>
<li><a href="#">Link Item 1</a></li>
<li><a href="#">Link Item 2</a></li>
<li><a href="#">Link Item 3</a></li>
<li><a href="#">Link Item 4</a></li>
</ul>
</div>
<div id="content">
<p><strong>CONTENT</strong>This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
</p>
<p>This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
This is a test. This is a test. This is a test. This is a test. This is a test.
</p>
</div>
<div id="footer">
<strong>FOOTER</strong>
</div>
</body>
</html>
<!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#footer{
background: #333;
color: #FFF;
text-align: center;
}
</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="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>
<!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#footer{
clear:left;
width:100%;
}
</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="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>
<!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#footer p{
margin:0;
padding:5px 10px
}
</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="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>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Hummus</title>
<style type="text/css" media="all">
table {
border-width: 0px;
width: 500px;
}
th {
background: black;
color: white;
}
tfoot td {
background: #808080;
color: white;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th colspan="4">
Hummus
</th>
</tr>
<tr>
<th>
#
</th>
<th>
Measurement
</th>
<th>
Product
</th>
<th>
Instructions
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>C</td>
<td colspan="2">T</td>
</tr>
<tr>
<td>2</td>
<td>T</td>
<td>P</td>
<td>C</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">
This is a test. This is a test.
</td>
</tr>
</tfoot>
</table>
</body>
</html>