Vertical tab with vertical text using css or js

HTML & CSS
1

Hi,

My requirement is vertical tab with vertical text.

Is it possible to implement vertical tab with vertical text using css or js?

Give me the idea…

Browser compatible issue in vertical text(IE6 and FF 3.0 above)

In FF it should take the rotation angle from the center of the point… so the some of the text should be hidden on the browser top. Actual height of the element divided by 2.

But in IE doesn’t problem.

I have given my sample code for vertical text.

2

Where is your code?

Not sure it will be much use to me though as vertical text is quite limited from what I can see.

More info:
http://snook.ca/archives/html_and_css/css-text-rotation

http://www.cult-f.net/samples/vertical/sample.html

3

Sorry Paul, I forgot to give the code. I have given the code is below,



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
.example-year {
	-webkit-transform:rotate(-90deg);
	-moz-transform:rotate(-90deg);
	-o-transform:rotate(-90deg);
	position:absolute;
	white-space:nowrap;
	top:40px;
	left:0px;
	background:#e2e2e2;
	border:1px solid red;
	padding:10px;
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.example-year li{display:inline;
	float:left;padding:5px;}
</style>
</head>
<body>
<ul class="example-year">
	<li><a href="#">Example 1</a></li>
    <li>Example 2</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
</ul>
</body>
</html>
4

You got to gett rid of the position absolute and put the rotation on the li instead.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style>
.example-year li{
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
    white-space:nowrap;
    background:#e2e2e2;
    border:1px solid red;
    padding:10px;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

.example-year li{display:inline;
    float:left;padding:5px;}
</style>
</head>
<body>
<ul class="example-year">
    <li><a href="#">Example 1</a></li>
    <li>Example 2</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
    <li>Example 3</li>
</ul>
</body>
</html>
5

I have run your code but in firefox is not come properly. I have attached mockup with this thread.(IE.jpg and FF.jpg)

Actually my requirement is the tab should be in vertical based navigation. I have attached also my requirement jpeg

6

I don;t think you will find a cross browser way of doing this that is automatic. The closest I could get was something like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
}
ul.example-year {
    list-style:none;
    width:50px;
    float:left;
}
.example-year li {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    -o-transform:rotate(-90deg);
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 -ms-filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    line-height:5em;
}
.example-year li {
    display:inline;
}
.example-year li a {
    padding:5px;
    background:#e2e2e2;
    border:1px solid red;
}
</style>
<!--[if lt IE 8]>
<style type="text/css">
.example-year li{
    zoom:1.0;
    line-height:normal;
    padding:5px;
    background:#e2e2e2;
    border:1px solid red;
}
.example-year li a{
    padding:0;
    background:#e2e2e2;
    border:none;
}

</style>
<![endif]-->
<!--[if gt IE 7]>
<style type="text/css">
.example-year li{
    line-height:5em;
    float:left;
    height:5em;
}
</style>
<![endif]-->
</head>
<body>
<ul class="example-year">
    <li><a href="#">Example&nbsp;1</a></li>
    <li><a href="#">Example&nbsp;2</a></li>
    <li><a href="#">Example&nbsp;3</a></li>
    <li><a href="#">Example&nbsp;4</a></li>
    <li><a href="#">Example&nbsp;5</a></li>
    <li><a href="#">Example&nbsp;6</a></li>
    <li><a href="#">Example&nbsp;7</a></li>
</ul>
</body>
</html>
7

Hi Paul,

This code is working fine in all browsers except FF < 3.0.9

Because rotation property is not supported old version of FF. :frowning:

Please give me the best solution for my requirement.

8

Hi, that’s the pitfall of vertical text. It’s not well supported. Perhaps JS can lead you upon the path of fixing this, although CSS can’t :). Unless you use an image.

9

You could do it with svg but it’s a little complicated