Espero les sirva ^_^
Primero definimos los estilos:
.columnaVertical{
background-color:#36648B;
color: #eeeeff;
font-size:11;
font-weight:bold;
text-decoration:none;
height:110px;
width: 15px;
align: center;
vertical-align:bottom
valign:middle;
padding-bottom:10px;
padding-top:10px;
padding-right:5px;
padding-left:5px;
}
.textoVertical{
writing-mode: tb-rl;
}
.Rotar-RigthDown{
filter:flipv fliph;
}
.Rotar-RigthUp{
filter:flipv;
}
.Rotar-LeftDown{
writing-mode: tb-rl;
filter:fliph;
}
.Rotar-LeftUp{
}
Ahora el código:
<table bgcolor="white" width="1000px;" height="150px" style="valign:bottom">
<tr style="vertical-align:bottom">
<td>
<a class="columnaVertical textoVertical Rotar-RigthDown" href="#">
Texto derecha abajo
</a>
</td>
<td>
<a class="columnaVertical textoVertical Rotar-RigthUp" href="#">
Texto derecha arriba
</a>
</td>
<td>
<a class="columnaVertical textoVertical Rotar-LeftDown" href="#">
Texto izquierda abajo
</a>
</td>
<td>
<a class="columnaVertical textoVertical Rotar-LeftUp" href="#">
Texto izquierda arriba
</a>
</td>
<td width="100%">
</td>
</tr>
</table>
2 comentarios:
no funciona en firefox
En Chorme tampoco funciona :(
Publicar un comentario