в 09:21, 26 мая 2010

2010-05-26T09:21:00Z

Admin: 1 версия

2010-05-26T08:16:53Z

1 версия

Новая страница

==Anchor based tab==



<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>Styling <body></title>
<style type="text/css" media="screen">
.container {
width: 500px;
padding: 15px;
margin: 3px 0 20px 0;
border: 1px solid #ccc;
background: #fff;
}

#nav {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#nav li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#nav a:link, #nav a:visited {
float: left;
font-size: 10px;
line-height: 14px;
font-weight: bold;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#nav a:hover {
color: #000;
}
</style>
</head>
<body id="spag">

<div class="container">
<ul id="nav">
<li id=""><a href="#">Item 1</a></li>
<li id=""><a href="#">Item 2</a></li>
<li id=""><a href="#">Item 3</a></li>
<li id=""><a href="#">Item 4</a></li>
</ul>
</div>

</body>
</html>
</source>

==CSS only tab bar with content==



<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" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="screen">
#navContainer {
padding: 20px 0 0;
border-bottom: 1px solid #000000;
background: #dddddd;
}
#navigation ul {
padding: 0 0 5px;
}
#navigation li {
display: inline;
}
#navigation a:link, #navigation a:visited {
text-decoration: none;
background: #bbbbbb;
border: 1px solid #898989;
padding: 5px 10px;
position: relative;
margin-right: 5px;
}
#navigation a:hover {
text-decoration: underline;
background: #cccccc;
}
a:link,
a:visited,
{
background: #ffffff;
border-bottom-color: #ffffff;
}
</style>
</head>
<body id="homePage">
<div id="masthead">
<div id="navContainer">
<div id="navigation">
<ul>
<li id="homePageLink"><a href="#">Home page</a></li>
<li id="servicesPageLink"><a href="#">Services</a></li>
<li id="customerSupportPageLink"><a href="#">Customer support</a></li>
<li id="contactDetailsPageLink"><a href="#">Contact details</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
</source>

==CSS tab==



<source lang="html4strict">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#navsite {
border: 1px dashed white;
}
body {
margin: 0 15% 0 15%;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 10px solid black;
padding: 0 0 5em 0;
}
#header {
background-color: white;
border-top: 10px solid #333;
}
#navsite {
background-color: white;
}
#navsite ul {
background-color: white;
padding: 0 0 3px 0;
margin-left: 0;
margin-top: 0;
border-bottom: 1px solid #669;
}
#navsite ul li {
list-style: none;
margin: 0;
display: inline;
}
#navsite ul li a {
padding: 3px 0.5em;
margin-left: 3px;
border: 1px solid #669;
border-bottom: none;
background-color: #ccf;
text-decoration: none;
}
#navsite ul li a:link {
color: #339;
}
#navsite ul li a:visited {
color: #666;
}
#navsite ul li a:link:hover, #navsite ul li a:visited:hover {
color: #000;
background: #AAE;
border-color: #336;
}
#navsite ul li a#current {
background: white;
border-bottom: 1px solid white;
}
#header, #content {
padding: 0 2% 0 2%;
}
#content {
background-color: white;
}
#contentMain {
background-color: white;
}
</style>
</head>
<body>
<div id="navsite">
<ul>
<li><a href="http://www.wbex.ru" id="current">Home</a></li>
<li><a href="http://www.wbex.ru">Products</a></li>
<li><a href="http://www.wbex.ru">Services</a></li>
<li><a href="http://www.wbex.ru">About Us</a></li>
<li><a href="http://www.wbex.ru">Contact</a></li>
</ul>
</div>
<div id="content">
<div id="contentMain">
<h2><a href="http://www.wbex.ru">link</a></h2>
<p>Text <a href="http://www.wbex.ru">Link</a></p>
<p>Text.</p>
<p>Text <a href="http://www.wbex.ru">Link</a></p>
</div>
</div>
<div id="footer">
<p>Copyright 2003 .</p>
</div>
</body>
</html>
</source>

==Dynamic tab without javascript==



<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>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
div {
background: lightgrey;
padding: 0.7em;
clear: left;
}
ul#navigation {
list-style: none;
background: gray;
margin: 0.1em;
padding: 0;
}
ul#navigation li {
float: left;
margin: 0.4em;
}
ul#navigation li a {
padding: 0.3em;
}
ul#navigation li a:link {
background: gray;
}
ul#navigation li a:active {
background: orange;
}
ul#navigation li a:visited {
background: black;
}
ul#navigation li a:hover, li a:focus {
background: white;
color: black;
}
ul#navigation div {
position: absolute;
right: 0;
top: 0;
background: gray;
display: none;
}
ul#navigation li:hover > div {
display: block;
}

ul#top li a {
color: #eee;
}
</style>
</head>
<body>
<ul id="navigation">
<li>
<a href="">home</a>
<div>home</div>
</li>
<li>
<a href="">contact us</a>
<div>contact us.</div>
</li>
<li>
<a href="">products</a>
<div>product</div>
</li>
<li>
<a href="">services</a>
<div>service</div>
</li>
<li>
<a href="">faq</a>
<div>faq</div>
</li>
</ul>
</body>
</html>
</source>

==Horizontal tab bar==



<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>
<meta http-equiv="content-type" content="text/xhtml; charset=windows-1252" />
<meta http-equiv="content-language" content="en-us" />
<style type="text/css">
ul#navigation {
list-style: none;
background: gray;
margin: 0.1em;
padding: 0;
}
ul#navigation li {
float: left;
margin: 0.4em;
}
ul#navigation li a {
padding: 0.3em;
}
ul#navigation li a:link {
background: gray;
}
ul#navigation li a:active {
background: orange;
}
ul#navigation li a:visited {
background: black;
}
ul#navigation li a:hover, li a:focus {
background: white;
color: black;
}
</style>
</head>
<body>
<ul id="navigation">
<li><a href="">home</a></li>
<li><a href="">contact us</a></li>
<li><a href="">products</a></li>
<li><a href="">services</a></li>
<li><a href="">faq</a></li>
</ul>
</body>
</html>
</source>

==Simple Tab Menu==



<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>Simple Tab Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
#outer {
background: #bbb;
padding: 10px;
}
#content {
width: 700px;
min-height: 300px;
border: 1px solid #eee;
}
* html #content {
height: 300px;
}
#tab {
line-height: 2em
}
#tab a {
color: #fff;
padding: 0 10px;
border: 1px solid #fff;
text-transform: uppercase;
border-bottom: none;
position: relative;
top: 4px;
height: 20px;
text-decoration: none;
top: 2px;
height: auto;
padding: 3px 10px 4px;
}
#tab a:hover {
background: #bbb
}
#tab a.current {
background: #aaa;
color: #ddd;
}
#subnav {
background: #999;
height: 2em;
color: white;
padding: 5px 5px;
}
#subnav a {
color: white;
text-decoration: none;
}
#subnav a:hover {
color: red
}
</style>
</head>
<body>
<div id="outer">
<div id="tab">
<a class="current" href="#">Home</a>
<a href="#">About us</a>
<a href="#">Contact</a>
<a href="#">links </a>
</div>
<div id="content">
<div id="subnav">
<a href="#">Link 1</a> |
<a href="#">Link 2</a> |
<a href="#">Link 3</a> |
<a href="#">Link 4</a>
</div>
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
</div>
</body>
</html>
</source>

==Simple Tab Menu with UL LI==



<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>Simple Tab Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
ul {
list-style: none;
}
#outer {
background: #88B3AD;
padding: 10px;
margin: 10px;
}
#content {
width: 700px;
min-height: 300px;
border: 1px solid #ccc;
}
ul#tab {
line-height: 2em
}
ul#tab a {
color: #fff;
background: red;
border: 1px solid #aaa;
text-transform: uppercase;
border-bottom: none;
position: relative;
padding: 3px 10px 4px;
top: 2px;
text-decoration: none;
}
ul#tab a:hover,ul#tab a.current {
background: #669;
color: #FFE6B7;
padding-bottom: 5px;
}
ul#subnav {
background: #669;
height: 2em;
color: white;
padding: 5px 5px;
}
ul#subnav li,ul#tab li {
display: inline
}
ul#subnav a {
color: white;
text-decoration: none;
}
ul#subnav a:hover {
color: #FFE6B7
}
</style>
</head>
<body>
<div id="outer">
<ul id="tab">
<li><a class="current" href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">links </a></li>
</ul>
<div id="content">
<ul id="subnav">
<li><a href="#">Link One</a> |</li>
<li> <a href="#">Link 2</a> |</li>
<li> <a href="#">Link 3</a> | </li>
<li> <a href="#">Link 4</a> </li>
</ul>
</div>
</div>
</body>
</html>
</source>

==Tab bar with bottom image==



<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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Lists</title>
<style type="text/css" media="screen">
#myNav #minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #9FB1BC;
}

#myNav #minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#myNav #minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
font-size: 10px;
padding: 0 12px 6px 12px;
text-decoration: none;
color: #708491;
}

#myNav #minitabs a.active, #myNav #minitabs a:hover {
color: #000;
}
</style>
</head>
<body>

<div id="myNav">
<ul id="minitabs">
<li><a href="">A Item</a></li>
<li><a href="">B Item</a></li>
<li><a href="" class="active">C Item</a></li>
<li><a href="">D Item</a></li>
</ul>
</div>

</body>
</html>
</source>

==Tab list box==



<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>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style id="ss" rel="stylesheet" type="text/css">
#tabs {
float:left;
position:relative;
width:455px;
margin-bottom:10px;
}
#tabs #buttons {
position:absolute;
top:0; left:0;
width:150px;
margin:0; padding:0;
background-color:#ddd;
color:#888;
border-top:1px solid #999;
list-style:none;
}
#tabs #buttons li {
border-bottom:1px solid #999;
border-left:1px solid #999;
}
#tabs #buttons a {
text-decoration:none;
color:#888;
display:block;
border-right:1px solid #999;
padding:5px;
}
#tabs #buttons a:hover { background-color:#eee; }
#tabs #buttons a.selected {
color:black;
background-color:#FDE9F0;
border-right-width:0px;
}
#tabs #buttons a.selected:hover { background-color:#FDE9F0; }
#tabs .infobox {
margin-left:150px;
padding:6px 12px;
border:1px solid #999;
border-left-width:0px;
background-color:#FDE9F0;
display:none;
}
#tabs .enabled { display:block; }
#tabs .infobox ul { margin-left:20px; padding-left:0px; }
</style>
<script language="JavaScript" type="text/javascript">
function selectTab(num) {
for (var i=1; i <= 4; i++) {
document.getElementById("tab" + i).className = "";
document.getElementById("box" + i).className = "infobox";
}
document.getElementById("tab" + num).className = "selected";
document.getElementById("box" + num).className = "infobox enabled";
}
</script>
</head>
<body onload="selectTab(1);">
<div id="tabs">

<ul id="buttons">

<li><a href="#" id="tab1" onclick="selectTab(1); return false;" onfocus="blur();">Tab 1</a></li>
<li><a href="#" id="tab2" onclick="selectTab(2); return false;" onfocus="blur();">Tab 2</a></li>
<li><a href="#" id="tab3" onclick="selectTab(3); return false;" onfocus="blur();">Tab 3</a></li>
<li><a href="#" id="tab4" onclick="selectTab(4); return false;" onfocus="blur();">Tab 4</a></li>
</ul>
<div id="box1" class="infobox">

<p>such as:</p>
<ul>

<li>N</li>
<li>M</li>
<li>A</li>
<li>F</li>
<li>A</li>
</ul>
</div>
<div id="box2" class="infobox">

<p>box 2 <BR/><BR/><BR/><BR/><BR/><BR/></p>
</div>
<div id="box3" class="infobox">

<p>this is a test. this is a test. </p>
<ul>
<li>H</li>
<li>W</li>
<li>E</li>
<li>S</li>
</ul>
</div>
<div id="box4" class="infobox">

<p>this is a test. this is a test. </p>
<p>this is a test. this is a test. </p>
</div>
</div>
</div>
</body>
</html>
</source>

==Tab menu with bottom bar highlight==



<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" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Lists</title>
<style type="text/css" media="screen">

#divID #minitabs {
margin: 0;
padding: 0 0 20px 10px;
border-bottom: 1px solid #696;
}

#divID #minitabs li {
margin: 0;
padding: 0;
display: inline;
list-style-type: none;
}

#divID #minitabs a {
float: left;
line-height: 14px;
font-weight: bold;
margin: 0 10px 4px 10px;
text-decoration: none;
font-size: 10px;
color: #9c9;
}

#divID #minitabs a.active {
border-bottom: 4px solid #696;
padding-bottom: 2px;
color: #363;
}

#divID #minitabs a:hover {
color: #696;
}
</style>
</head>
<body>

<div id="divID">
<ul id="minitabs">
<li><a href="">A Item</a></li>
<li><a href="">B Item</a></li>
<li><a href="" class="active">C Item</a></li>
<li><a href="">D Item</a></li>
</ul>
</div>

</body>
</html>
</source>

==Use UL and LI to create tab bar==



<source lang="html4strict">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
#tabContainer {
padding: 25px 15px 0 15px;
background: #67A897;
}
ul#topTab {
list-style-type: none;
width: 100%;
position: relative;
height: 27px;
font-size: 13px;
font-weight: bold;
margin: 0;
padding: 11px 0 0 0;
}
ul#topTab li {
display: block;
float: left;
margin: 0 0 0 4px;
height: 27px;
}
ul#topTab li.left {
margin: 0;
}
ul#topTab li a {
display: block;
float: left;
color: #fff;
background: #4A6867;
line-height: 27px;
text-decoration: none;
padding: 0 17px 0 18px;
height: 27px;
}
ul#topTab li a.right {
padding-right: 19px;
}
ul#topTab li a:hover {
background: #2E4560;
}
ul#topTab li a.current {
color: #2E4560;
background: #fff;
}
ul#topTab li a.current:hover {
color: #2E4560;
background: #fff;
}
</style>
</head>
<body>
<div id="tabContainer">
<ul id="topTab">
<li><a href="" title="Home" class="current">Home</a></li>
<li><a href="" title="Home">Resources</a></li>
<li><a href="" title="Home">Inspiration</a></li>
<li><a href="" title="Home">Forums</a></li>
<li><a href="" title="Home">About Us</a></li>
<li><a href="" title="Home">Contact Us</a></li>
</ul>
</div>
</body>
</html>
</source>

← Предыдущая	Версия 09:21, 26 мая 2010
(нет различий)

HTML/CSS/CSS Controls/tab - История изменений

в 09:21, 26 мая 2010

Admin: 1 версия