HTML/CSS/CSS Controls/Siderbar

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

Content floats left, side bar floats right

   <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">
 #header {
   background: #ccc;
   padding: 20px;
 }
 
 #content {
   float: left;
   width: 66%;
 }
 
 #sidebar {
   float: right;
   width: 30%;
   background: #999;
 }
 
 #footer {
   clear: both;
   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.

</body> </html>

</source>
   
  


Inner left and right bar

   <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 {
 width: 760px;
 position: relative;
 border: 1px solid #000;

} h1#header {

 border: 1px solid #000;
 height: 100px;
 color: #fff;

} h2#sub-header {

 border-bottom: 1px solid #000;
 background: #ccc;
 height: 1.5em;
 line-height: 1.5em;
 color: #fff;

}

  1. left {
 float: left;
 width: 558px;

}

  1. right {
 float: right;
 width: 190px

} .left-content,.right-content {

 border: 1px solid #000;
 background: #aaa;
 margin: 15px

} .right-content {

 background: #bbb;
 margin: 15px 13px 15px 0

} .left-content-header,.right-content-header {

 padding: 5px;
 color: #fff;
 background: #ccc;
 border-bottom: 1px solid #000;

} .right-content-header {

 height: auto;

} .left-content-footer {

 border-top: 1px solid #000;
 background: #fff;

}

  1. footer {
 clear: both;
 height: 40px;
 border-top: 1px solid #000;

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

Header

Sub Header Text

blog header text

left content

left content

left content

left content

</body> </html>

</source>
   
  


side bar 2

   <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>Sidebar</title> <style rel="stylesheet" type="text/css"> .sidebar {

 width: 200px;
 float: right;
 margin: 10px;
 border: solid 1px black;
 border-top-width: 5px;
 padding: 10px;
 background-color: #fbef99;

}

</style> </head> <body>

header

Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim

Yves Saint Laurent Garden Shears

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

Header 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

</body> </html>

</source>
   
  


Side bar contains list

   <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>Sidebar</title> <style type="text/css">

  1. wrapper {
 width: 760px;
 margin: 15px auto 0 auto;
 text-align: left;

} h1 {

 border: 1px solid black;

} .sidebar {

 width: 220px;
 float: right;
 margin: 10px;
 padding-bottom: 75px;

} .sidebar h3 {

 margin: 0;
 padding: 5px;

} .sidebar ul {

 color: #666;
 font-size: 1.2em;
 margin: 0;
 padding: 10px 5px 0 5px;
 border: 1px solid #ddd;

} .sidebar li {

 list-style: none;
 padding-left: 18px;
 margin-bottom: 6px;

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

Header

this is a test. this is a test.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

this is a test. this is a test.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

this is a test.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure.

</body> </html>

</source>
   
  


Sidebar with absolute position

   <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">
 #header {
     height: 40px;
     background: #ccc;
   }
 
 #content {
     margin-right: 24%;
     margin-left: 24%;
   }
 
 #leftbar {
    position: absolute;
     top: 40px;
     left: 0;
     width: 20%;
     background: #999;
   }
 
 #sidebar {
     position: absolute;
     top: 40px;
     right: 0;
     width: 20%;
     background: #999;
 }
 
 #footer {
     margin-right: 24%;
     margin-left: 24%;
     padding: 20px;
    background: #eee;
 }
 
 </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.

LEFTBAR

  • <a href="#">Link Item 1</a>
  • <a href="#">Link Item 2</a>
  • <a href="#">Link Item 3</a>
  • <a href="#">Link Item 4</a>

</body> </html>

</source>
   
  


Sidebar with float 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"> <head>

   <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   <title>Sidebar</title>
   <style type="text/css" media="Screen">
  1. sidebar {
 float: right;
 width: 162px;
 margin-left: 30px;
 margin-bottom: 20px;

}

  1. sidebar p {
 font-weight: bold;
 font-size: 80%;
 line-height: 1.2em;
 color: #333333;

}

  1. content {
 margin-right: 162px;
 padding-right: 10px;
 border-right: 1px solid #222;

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

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet.

</body> </html>

</source>
   
  


siderbar float right

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

 <style type="text/css">
   #container {
     width: 760px;
     margin: 10px;
     margin-left: auto;
     margin-right: auto;
   }
   #content {
     margin-right: 215px;
   }
   #sidebar_a {
     float: right;
     width: 200px;
     margin: 0;
   }
   #footer {
     clear: both;
   }
   
   #banner h1 {
     margin: 0;
     padding: 0;
   }
 </style>

</head> <body>

Headline goes here

before <a href="">D</a> after <a href="">after</a> text.

Headline goes here

before <a href="">D</a> after <a href="">after</a> text.

Headline goes here

before <a href="">D</a> after <a href="">after</a> text.

</div>

</div>

 </div>

</body> </html>

</source>