Vertical Tabs instead of Horizontal 1

[kgreer]

I am looking for some code to show how to make some vertical tabs. I want all the text to be vertical as well.

Any help would be nice.

 

[traingamer]

Haven't seen much along these lines. You may have to use images on buttons.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[ChrisHirst]

you could play with something along these lines
CSS

#horiz_menu_block {
	position:relative;
	text-align:center;
	font-size:0.8em;
	letter-spacing:.9em;
	width:90%;
	height:8.4em;
	margin:5px auto 10px auto;
	border:1px solid red;
	background-color: #CCCCCC;
}	
.hz_menu_tab {
	position:relative;
	float:left;
	width:1.5em;
	height:7.5em;
	color:#000000;
	margin:5px auto 10px 2px;
	padding:0px 0px 0px 5px;
	border:0px solid #000000;
}
.hz_menu_tab a{
	text-decoration:none;
}
.hz_menu_tab a:link{
	text-decoration:none;
}
.hz_menu_tab a:visited{
	text-decoration:none;
}
.hz_menu_tab a:hover{
	text-decoration:none;
	background-color:transparent;
}
.hz_menu_tab a:active{
	text-decoration:none;
}
.blue {
	background-color:#0000FF;
}
.yellow {
	background-color:#FFFF99;
}
.red {
	background-color:#FF6666;
}
.orange {
	background-color:#FFCC00;
}
.green {
	background-color:#00CC33;
}

HTML

<div id="horiz_menu_block">
<div class="hz_menu_tab blue"><a href="#">M e n u 1 </a></div>
<div class="hz_menu_tab yellow"><a href="#">M e n u 2 </a></div>
<div class="hz_menu_tab red"><a href="#">M e n u 3 </a></div>
<div class="hz_menu_tab green"><a href="#">M e n u 4 </a></div>
<div class="hz_menu_tab orange"><a href="#">M e n u 5 </a></div>

</div>

simple demo Vertical Tabs

for rounded corners you can add a background image.



Chris.

Indifference will be the downfall of mankind, but who cares?
Woo Hoo! the cobblers kids get new shoes.
Nightclub counting systems

So long, and thanks for all the fish.

 

[traingamer]

Very clever.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill