Horizontal Tabs 7

Previous Next Back to list Close

Navigation menu consists of a list <UL> with rollover effect

 

Example

 

Graphics elements of Fireworks

 

Code Html

<div id="contenitoretabs">
<ul id="listatabs">
<li id="tabcorrente"><a href="#"><div class="tabCentratoVerticalmente">2013</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2012</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2011</div></a></li>
<li><a href="#"><div class="tabCentratoVerticalmente">2010</div></a></li>
</ul>
</div>

 

Code CSS

#contenitoretabs {
	height: 40px;
	border-bottom-width: 10px;
	border-bottom-style: solid;
	border-bottom-color: #F3F3F3;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 8px;
}

#listatabs {
	margin: 0px;
	padding: 0px;
}

#listatabs ul, #listatabs li {
	padding: 0px;
	display: inline;
	list-style-type: none;
	margin: 0px;
}

#listatabs a:link, #listatabs a:visited {
	float: left;
	font-weight: bold;
	text-decoration: none;
	color: #999;
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	width: 180px;
	text-align: center;
	text-transform: uppercase;
	height: 50px;
	display: block;
	vertical-align: middle;
	background-image: url(Immagini/tab_off.png);
	background-repeat: no-repeat;
	background-position: center 0px;
	padding: 0px;
}

#listatabs a:hover, #listatabs a:active {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	width: 190px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
	display: block;
	padding: 0px;
	background-image: url(Immagini/tab_on.png);
	background-repeat: no-repeat;
	background-position: center 0px;
	margin: 0px;
}

#listatabs li#tabcorrente a:link, #listatabs li#tabcorrente a:visited {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	padding: 0px;
	width: 190px;
	text-align: center;
	height: 50px;
	vertical-align: middle;
	display: block;
	background-image: url(Immagini/tab_on.png);
	background-repeat: no-repeat;
	background-position: center 0px;
	margin: 0px;
}

#listatabs li#tabcorrente a:hover, #listatabs li#tabcorrente a:active {
	font-weight: bold;
	text-decoration: none;
	color: #000;
	padding: 0px;
	width: 190px;
	height: 50px;
	text-align: center;
	vertical-align: middle;
	display: block;
	margin: 0px;
	background-image: url(Immagini/tab_on.png);
	background-repeat: no-repeat;
	background-position: center 0px;
}

.tabCentratoVerticalmente {
	width: 170px;
	margin-top: 20px;
	text-align: center;
	vertical-align: middle;
	display: block;
	margin-right: auto;
	margin-left: auto;
}

         

 

Matteo Varisco
Via Pardini, 138
54038 - Montignoso (MS)
Cinquale - Italy
VAT 01027000452
Fiscal Code VRSMTT71R16F704B
Privacy and Cookies
Cookies Settings