HTML/CSS/CSS Controls/Siderbar
Содержание
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>
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.
</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">
- 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>
Header
Sub Header Text
left content
left content
left content
left content
right content
right content
right content
right content
right content
right 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.
Copyright 2006
</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">
- 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>
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.
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">
- 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>
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>