HTML/CSS/Layout/One Column

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

Содержание

1 column, header, content, 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>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css">

  1. outer {
 min-height: 100%;
 width: 612px;
 background: #eee;
 position: relative;

}

  • html #outer {
 height: 100%

}

  1. header {
 border: 1px solid #000;
 background: #ccc;
 height: 40px;

}

  1. footer {
 position: absolute;
 bottom: 0;
 left: 0;
 background: #bbb;
 height: 40px;
 border-top: 1px solid #000;
 width: 98%;

}

  1. clearfooter {
 clear: both;
 height: 40px;

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

Content

Content

</body> </html>

</source>
   
  


Article layout

   <source lang="html4strict">

<?xml version="1.0" encoding="iso-8859-1"?> <!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>The Effect of the Internet on Psychological Theories of Self</title>
   <style rel="stylesheet" type="text/css">

body {

 background-color: #000000;

} div.page {

 width: 650px;
 border-style: solid;
 border-width: 1px;
 border-color: #666;

} div.heading {

 background-color: #999;
 padding: 10px;

} div.body {

 background-color: #EFEFEF;
 padding: 10px;

} h1 {

 font-size: 22pt;
 color: #000066;

} h2 {

 font-size: 18pt;
 color: #000066;

} p {

 font-size: 14pt;
 color: #000000;

} </style>

   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 </head>
 </head>
 <body>

Header

Abstract

identity.

This is a test. This is a test. .

         ...
 </body>

</html>

</source>
   
  


Header, sub header, footer with one column

   <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>Splash page layout</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style rel="stylesheet" type="text/css">

  1. wrapper {
 border: 1px solid #033;
 position: relative;

}

body#cols3 #navigation {

 position: absolute;
 top: 6.8em;
 left: 0;

} body#cols3 #related {

 position: absolute;
 top: 6.8em;
 right: 10px;

}

  1. navigation ul,#related h2 {
 margin-top: 0;
 padding-top: 0;

}

  1. footer {
 padding: 5px 0 5px 160px;
 clear: both;
 background: #D9FFF8;
 font-size: 0.8em;
 color: #030;

} </style> </head> <body id="splash">

Header 2

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>
   
  


Header with one column under

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

width: 600px;
border-right: 1px solid black;

}

  1. header {
background-color: #666;
border-bottom: 1px solid #333;

}

  1. columnLeft {
float: left;
width: 160px;
margin-left: 10px;
padding-top: 1em;

}

  1. columnRight {
padding-top: 1em;
margin: 0 2em 0 200px;

}

  1. footer {
clear: both;
background-color: #ccc;
padding-bottom: 1em;
border-top: 1px solid #333;
padding-left: 200px;

} </style> </head>

<body>