TABBED HORIZONTAL MENU FOR FLUID OR FIXED WIDTH PAGE
STYLE VARIATIONS
DESIGN VARIATIONS
THE HTML CODE FOR THIS PAGE
<!--
START of menu -->
<div id="wrap1">
<div id="wrap2">
<a href="tabmenu1.html">HOME</a>
<a class="current" href="tabmenu2.html">THE CSS</a>
<a href="tabmenu3.html">IMAGES</a>
<a href="tabmenu4.html">PAGE 4</a>
<a href="tabmenu5.html">PAGE 5</a>
<a id="bordrt" href="tabmenu6.html">PAGE 6</a>
</div>
</div>
<div
class="clearl"></div>
<!-- END of menu -->
THE CSS STYLES FOR THE MENU
#wrap1 {
border-top: 1px solid
#006600;
margin: 0px;
background-repeat: repeat-x;
background-position: left bottom;
min-width: 775px;
padding-top: 0px;
padding-bottom: 0px;
background-image: url(images/wrap1.jpg);
background-color:
#d3e3ca;
}
#wrap2 {
margin: 0px auto;
width:
760px;
min-width: 760px;
padding-top: 0px;
padding-bottom: 0px;
height: 36px;
font-size: 0.9em;
font-weight: bold;
}
#wrap2 a:link {
border-left: 1px
solid #006600;
float: left;
text-align: center;
text-decoration: none;
color: #0000c8;
margin-top:
0px;
margin-bottom: 0px;
width: 125px;
font-weight: inherit;
padding-top: 10px;
height:
26px;
}
#wrap2 a:visited {
border-left: 1px solid
#006600;
float: left;
text-align: center;
text-decoration: none;
color: #743a7f;
margin-top:
0px;
margin-bottom: 0px;
width: 125px;
font-weight: inherit;
padding-top: 10px;
height:
26px;
}
#wrap2 a:hover {
background-color: white;
background-repeat: repeat-x;
background-image:
url(images/greenbuttflip.jpg);
height: 25px;
}
#wrap2
a:active {
background-repeat: repeat-x;
background-image: url(images/greenbuttflip2.jpg);
background-position: left top;
color: red;
}
.current {
margin-top: 0px;
margin-bottom: 0px;
background-color: white;
}
#bordrt {
border-right: 1px
solid #006600;
}
.clearl {
clear: left;
margin-top: 0px;
margin-bottom: 0px;
padding-top:
0px;
padding-bottom: 0px;
height: 0px;
max-height: 0px;
}
If you want to copy the styles for the whole page layout including the page wrapper, the stylesheet is here.
