HTML/CSS/CSS Controls/Siderbar
Содержание
Content floats left, side bar floats right
<!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>
<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. </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.
</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>
Inner left and right bar
<!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">
#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;
}
#left {
float: left;
width: 558px;
}
#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;
}
#footer {
clear: both;
height: 40px;
border-top: 1px solid #000;
}
</style>
</head>
<body>
<div id="outer">
<h1 id="header">Header</h1>
<h2 id="sub-header">Sub Header Text</h2>
<div id="left">
<div class="left-content">
<div class="left-content-header">blog header text</div>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<p>left content</p>
<div class="left-content-footer">
<p>Footer text</p>
</div>
</div>
</div>
<div id="right">
<div class="right-content">
<div class="right-content-header">blog header text</div>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
<p>right content</p>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
</html>
side bar 2
<!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>
<h1>header</h1>
<div class="sidebar">
<h3>this is a test. this is a test. </h3>
<ul>
<li>L</li>
<li>L</li>
<li>L</li>
<li>L</li>
<li>L</li>
<li>L</li>
<li>L</li>
</ul>
</div>
<h2>Header 2</h2>
<p>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 </p>
<h2>Yves Saint Laurent Garden Shears</h2>
<p>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. </p>
<h2>Header 2</h2>
<p>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. </p>
<p>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. </p>
<p class="copyright">Copyright 2006</p>
</body>
</html>
Side bar contains list
<!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">
#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>
<div id="wrapper">
<h1>Header</h1>
<div class="sidebar">
<h3> header of sidebar</h3>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
</ul>
</div>
<h2>this is a test. this is a test. </h2>
<p>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.</p>
<h2>this is a test. this is a test. </h2>
<p>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. </p>
<h2>this is a test. </h2>
<p>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. </p>
</div>
</body>
</html>
Sidebar with absolute position
<!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>
<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.
</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.
</p>
</div>
<div id="leftbar">
<p><strong>LEFTBAR</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="sidebar">
<p><strong>This is a test. </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>
<p><strong>This is a test. </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>
Sidebar with float left
<!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">
#sidebar {
float: right;
width: 162px;
margin-left: 30px;
margin-bottom: 20px;
}
#sidebar p {
font-weight: bold;
font-size: 80%;
line-height: 1.2em;
color: #333333;
}
#content {
margin-right: 162px;
padding-right: 10px;
border-right: 1px solid #222;
}
</style>
</head>
<body>
<div id="sidebar">
<p>this is a test. this is a test. this is a test. </p>
</div>
<div id="content">
<p>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.</p>
<p>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.</p>
<p>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.</p>
</div>
</body>
</html>
siderbar float right
<!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>
<div id="container">
<div id="banner">
<h1>Main Page Productions</h1>
</div>
<div id="sidebar_a"><h2>Headline goes here</h2>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<div id="content">
<h2>Headline goes here</h2>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<h3>Headline goes here</h3>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
<h4>Headline goes here</h4>
<p>before <a href="">D</a> after <a href="">after</a>
text.</p></div>
</div>
<div id="footer">Lorem ipsum dolor sit amet, consectetuer adipiscing <br />elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</div>
</div>
</body>
</html>