Folks,
I'm trying to implement a tabbed effect with CSS and HTML - no
graphics.
for some reason, i'm unable to control the width of the tabs. I've
pasted the code below.
Any help / pointers to resources that explain how to implement tabs
with CSS would be great.
Thanks,
LP
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
/>
<title>Untitl ed Document</title>
<style>
..box1{
display:inline;
z-index:1;
width:2em;
position:relati ve;
white-space:nowrap;
border-left: solid #000000 1px;
border-right: solid #000000 1px;
border-top: solid #000000 1px;
border-bottom: solid #FFFFFF 1px;
text-align:center
bottom: -1px;
padding-left: 2px;
}
..box4{
position: relative;
background-color: none;
width: 5em;
border:none;
border-bottom: solid #000000 1px;
float: left;
z-index:1;
text-align: right;
}
..box5{
width: 3px;
border: none;
float: left;
display:inline;
z-index:1;
}
..box6{
position:relati ve;
width:100%;
z-index: -2;
border: solid #000000 1px;
height: 100px;
top: -1px;
}
</style>
</head>
<body>
<div class="box4">
<li class="box1">te st</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">te st2</li>
</div>
<div class="box5"></div>
<div class="box4">
<li class="box1">te st3</li>
</div>
<div class="box6"></div>
</body>
</html>
