csstext-rotation

How to make vertically rotated links in HTML?

I'm trying to accomplish this:

enter image description here

with this code:

<div id='left_column_date_search'>
<a href='#' class='a1'><span>Dnes</span></a>
<a href='#' class='a2 selected'><span>Zítra</span></a>
<a href='#' class='a3'><span>Pátek</span></a>
<a href='# 'class='a4'><span>Sobota</span></a>              
</div> <!-- end: #left_column_date_search -->



#left_column_date_search { width: 36px; float: left; overflow: hidden;}
#left_column_date_search a { 
    display: block; 
    position: relative;
    color: #fff;
    text-shadow: 1px 0px 0px #000;
    text-decoration: none;
}
#left_column_date_search a.selected {
/*  background: url(/images/structure/city-search-grad-selected.jpg); */
    color: #660000;
    text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
    background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a.a1{ height: 73px !important; }
#left_column_date_search a.a2 { height: 73px !important; }
#left_column_date_search a.a3 { height: 100px !important; }
#left_column_date_search a.a4 { height: 100px !important; }
#left_column_date_search a.a5 { height: 100px !important; }
#left_column_date_search a.a6 { height: 100px !important; }
#left_column_date_search a.a7 { height: 100px !important; }

#left_column_date_search a span {
    display: block;
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);  
    position: absolute;
    top: 0px; 
    left: 0px;
}

But what I get is this:

enter image description here

Any suggestions?

Solution

  • Here is my solution. I have updated your HTML and CSS to allow for this. Here is a live example: http://jsfiddle.net/8RTaV/4/

    HTML:

    <div id='left_column_date_search'>
    <a href='#' class='a1'>Dnes</a>
    <a href='#' class='a2 selected'>Zítra</a>
    <a href='#' class='a3'>Pátek</a>
    <a href='#' class='a4'>Sobota</a>  
</div> <!-- end: #left_column_date_search -->

    CSS:

    #left_column_date_search {
    background: #000;
    width: 36px;
    float: left;
}
#left_column_date_search a {
    display: block;
    height: 60px;
    width: 60px;
    color: #fff;
    text-shadow: 1px 0px 0px #000;
    text-decoration: none;
    line-height: 31px;
    margin: 5px 0 0;
    text-align: center;
}
#left_column_date_search a.selected {
/*    background: url(/images/structure/city-search-grad-selected.jpg); */
    color: #660000;
    text-shadow: 0px 1px 0px #9e4a4a;
}
#left_column_date_search a:hover {
    background: url(/images/structure/city-search-grad-hover.png);
}
#left_column_date_search a{
    -webkit-transform: rotate(270deg);  
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); 
}