Tab-design
FredrikHello
It to create tab-design with CSS but I cant get the tabs againts the sheet. I you try the code below you will see 2 pixels distance under the tabs.
So if any one got an idea of how to put them closer toghter please let me know.
Best regards
Fredrik
<!DOCTYPE html PUBLIC "-//golem.ph.utexas.edu//DTD XHTML 1.1 plus Target 1.0//EN" "http://golem.ph.utexas.edu/DTD/xhtml11-target.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS TEST</title>
<style>
.CENTER
{
text-align: center;
}
.TAB_CLOSED_LEFT
{
display:block;
border-top: black 1px outset;
border-left: black 1px solid;
/*border-right: 1px solid #FF0000;*/
}
.TAB_CLOSED_RIGHT
{
display:block;
border-top: black 1px outset;
border-right: black 1px solid;
/*border-left: 1px solid #FF0000;*/
}
.TAB_OPEN
{
display:block;
border-top: black 1px solid;
border-right: black 1px solid;
border-left: black 1px solid;
border-bottom-width: 0px;
padding-left: 5px;
padding-right: 5px;
padding-bottom: 0px;
margin-bottom: 0px;
}
.TAB_TABLE
{
font-family: verdana;
color: black;
font-size: 10px;
font-weight: normal;
text-align: left;
margin: 0px 0px 0px 0px;
padding-bottom: 0px;
margin-bottom: 0px;
/*border-collapse: collapse;*/
}
.PRODUCT_TABLE
{
display:block;
border: black 1px outset;
border-color: #000000;
/*border-top: 20px solid #000066;*/
font-family: verdana;
color: black;
font-size: 10px;
font-weight: normal;
text-align: left;
padding-top: 0px;
margin-top: 0px;
width: 400px;
}
</style>
</head>
<body>
<div class="CENTER">
<table>
<tr>
<td>
<table>
<tr>
<td valign= "top">
<table class="TAB_TABLE">
<tr>
<td class="TAB_CLOSED_LEFT">
<a href="a.html" class="AHREF">Tab 1</a>
</td>
<td class="TAB_OPEN">
<a href="b.html" class="AHREF">Tab 2</a>
</td>
<td class="TAB_CLOSED_RIGHT">
<a href="c.html" class="AHREF">Tab 3</a>
</td>
</tr>
</table>
<table class="PRODUCT_TABLE">
<tr>
<td valign="bottom">
<b>A Product</b>
</td>
</tr>
<tr>
<td valign="top">
Bla bla bla
</td>
</tr>
<tr>
<td valign="top">
<a href="d.html" target="_blank">Read more >></a>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</body>
</html>
