HTML/CSS/Layout/footer
Содержание
<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></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>
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.
Left 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 : Right content goes here :
link
</body> </html>
</source>
<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>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>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec eu Aenean dictum dolor ut sem.
Ut commodo. Sed non nisi at leo aliquet lobortis. Donec a elit vel conubia nostra, per inceptos hymenaeos.
</body>
</html>
</source>
<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> 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>
a | a | r |
---|---|---|
a | a | r |
</body>
</html>
</source>
<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" 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>
HEADER
CONTENT 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. 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.
</body> </html>
</source>
<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">
- 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>
</body> </html>
</source>
<source lang="html4strict">
<!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>
Masthead
Heading One
This is paragraph one.
</body>
</html>
</source>
<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" 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>
HEADER
CONTENTThis 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. 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.
</body> </html>
</source>
<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#footer{
background: #333; color: #FFF; text-align: center;
}
</style> </head> <body>
My Amazing Web Site
Contact Form
<form id="form1" name="form1" method="post" action="/"> <label for="fmname" accesskey="n">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e">Email</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">State/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmstate" accesskey="y">Country</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form>
quid pro quo
</body> </html>
</source>
<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#footer{
clear:left; width:100%;
}
</style> </head> <body>
My Amazing Web Site
Contact Form
<form id="form1" name="form1" method="post" action="/">
<label for="fmmsg">Message</label>
<textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea>
<input type="submit" name="submit" value="send" class="submit" />
</form>
quid pro quo
</body> </html>
</source>
<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#footer p{
margin:0; padding:5px 10px
}
</style> </head> <body>
My Amazing Web Site
Contact Form
<form id="form1" name="form1" method="post" action="/"> <label for="fmname" accesskey="n">Name</label> <input type="text" name="fmname" id="fmname" /> <label for="fmemail" accesskey="e">Email</label> <input type="text" name="fmemail" id="fmemail" /> <label for="fmstate" accesskey="a">State/Province</label> <input type="text" name="fmstate" id="fmstate" /> <label for="fmstate" accesskey="y">Country</label> <input type="text" name="fmcountry" id="fmcountry" /> <label for="fmmsg">Message</label> <textarea name="fmmsg" accesskey="m" id="fmmsg" rows="5" cols="14"></textarea> <input type="submit" name="submit" value="send" class="submit" /> </form>
quid pro quo
</body> </html>
</source>
<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>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>
Hummus |
|||
---|---|---|---|
# |
Measurement |
Product |
Instructions |
1 | C | T | |
2 | T | P | C |
This is a test. This is a test. |
</body> </html> </source>