Stwórz sobie obrazek nav_bg2.gif (to kopia nav_bg.gif tylko pasek jest cały czarny)
<!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"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.4.1.min"></script> <script type="text/javascript" src="jquery.idTabs.min.js"></script> body { margin: 0px; padding: 0px; font: 10px Verdana, Arial, Tahoma, Helvetica, sans-serif;}
<link rel="stylesheet" href="tabs.css" type="text/css" /></head>
<img style="float: left;" src="images/nav_left.gif" alt="" /> <li><a href="#idTab1" class="selected">Tab 1
</a></li> <li><a href="#idTab2">Tab 2
</a></li> <li><a href="#idTab3">Tab 3
</a></li> <img style="float: right;" src="nav_right.gif" alt="" />
<div style="clear:left;"></div>
<img style="float: top;margin-left:10px; margin-top:0px" width="5px" height="37px" src="images/nav_bg2.gif" alt="" align="left" />
<div id="idTab1" style="display:block">Pierwsza
</div> <div id="idTab2" style="display:none;">Druga
</div> <div id="idTab3" style="display:none;">Trzecia
</div>
tabs.css:
.nav {
color: #111111;
background-image: url('images/nav_bg.gif');
width: 980px;
}
.nav li {
list-style: none;
float: left;
}
.nav ul a {
height: 27px;
width: 82px;
display: block;
text-decoration: none;
color: #FFFFFF;
text-align: center;
padding-top: 10px;
}
.nav ul a:hover {
color: #FFFFFF;
}
.nav ul a.selected {
color: #000000;
background-image: url('images/nav_tab.gif');
cursor: default;
}
.nav div {
background-image: url('images/con_bg.gif');
color: red;
clear: left;
padding 0px;
font: 10pt Georgia;
}
.nav2{
width: 980px;
background-color: white;
color: red;
padding 0px;
font: 10pt Georgia;
clear:both;
}
(IMG:
http://i45.tinypic.com/17x25f.jpg)
Ten post edytował Armstrong 7.02.2010, 19:44:46