HTML/CSS/Layout/footer

Материал из Web эксперт
Перейти к: навигация, поиск

3 column layout with equalising columns and 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">

  1. 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;

}

  1. 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;

}

  1. left {
 position:relative;
 width:260px;
 float:left;
 margin-left:-259px;
 padding-top:72px;

}

  1. left p {padding-left:1px;padding-right:3px}
  2. right p {padding-left:3px;padding-right:2px}
  3. right {
 position:relative;
 width:130px;
 float:right;
 margin-right:-129px;
 padding-top:72px;

}

  1. leftfr {
 float:right;
 width:125px;

}

  1. leftfl {
 float:left;
 width:130px;

}

  1. 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;

}

  1. clearheader{
   height:72px;

}

  1. 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 :


link

</body> </html> 

</source>


Fixed footer

   <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>


footer border

   <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>
<colgroup> <col/> <col/> <col/> </colgroup> <thead> </thead> <tbody> </tbody> <tfoot> </tfoot>
Table: My favorite records.
a a r
a a r 
   </body>

</html> 

</source>


Footer: clear left

   <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>

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>


Footer layout

   <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">

  1. navigation a:link {
 font-weight: bold;
 font-size: 200%;
 text-decoration: none;
 color: #666;

}

  1. navigation a:hover {
 text-decoration: underline;

} a:link { 

 font-weight: bold;
 color: #aaa;

}

  1. footer a {
 font-size: 80%;

} a:active { 

 background-color: red;

}

  1. navigation a:active {
 background-color: transparent;

} </style> </head> <body>

</body> </html> 

</source>


Footer with bottom offset

   <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>


Header, footer, side bar and content

   <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>

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>


Mark footer with DIV

   <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>

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>


Set footer to left clear

   <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>

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>


Set paragraph in 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> <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>

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>


Table footer background and color

   <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>
<thead> </thead> <tbody> </tbody> <tfoot> </tfoot> 
                           Hummus

                           #

                           Measurement

                           Product

                           Instructions
1 C T
2 T P C 
                            This is a test. This is a test. 

     </body>
  </html>
</source>
Источник — «http://wbex.ru/index.php?title=HTML/CSS/Layout/footer&oldid=5027»