0

Possible Duplicate:
How to draw vertical text with CSS cross-browser?

I have some divs, supposed to be "books" on a shelf. All the div is supposed to be a link, and while in some cases they will have image backgrounds, in some others they won't and in those cases I need to put the title like if it was, well, a book, so the text should be rotated 90º. I'm not sure how to do that, rotate just the text inside the <a>, without rotating the entire div.

<div class="magazinebookcase">        

<div class="books">
<a title="Mag1" style="height:286px;width:16px;" href="">Book 1
</a>
</div>
<div class="books">
<a title="Mag2" style="height:258px;width:48px;" href="">Book 2
</a>
</div>
<div class="books">
<a title="Mag3" style="height:252px;width:38px;" href="">
</a>
</div>
<div class="books">
<a title="Mag4" style="height:258px;width:50px;" href="">
</a>
</div>       
<div class="books">
<a title="Mag5" style="height:284px;width:14px;" href="">
</a>
</div>

<div class="clearfix"></div>

And the CSS:

.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;

} 

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
text-align:center;
display: table-cell;
vertical-align: bottom;
}

.magazinebookcase a {
border: 1px solid #000;
display: block;
word-break: break-all;
}

.magazinebookcase a:hover {
background-color: #ccc;
}​

http://jsfiddle.net/7vEdw/2/

Community
  • 1
  • 1
Ikzer
  • 527
  • 11
  • 29
  • http://stackoverflow.com/questions/1080792/how-to-draw-vertical-text-with-css-cross-browser – mortb Nov 05 '12 at 11:34

2 Answers2

0

i hope this will help you :-

HTML

<!DOCTYPE html>
<html>
<head>

</head>

<body>
<div class="magazinebookcase">        

    <div class="books">
    <a title="Mag1" style="height:286px;width:16px;" href="">Book 1
    </a>
    </div>
    <div class="books">
    <a title="Mag2" style="height:258px;width:48px;" href="">Book 2
    </a>
    </div>
    <div class="books">
    <a title="Mag3" style="height:252px;width:38px;" href="">
    </a>
    </div>
    <div class="books">
    <a title="Mag4" style="height:258px;width:50px;" href="">
    </a>
    </div>       
    <div class="books">
    <a title="Mag5" style="height:284px;width:14px;" href="">
    </a>
    </div>

    <div class="clearfix"></div>
</div>
</body>
</html>

CSS

.magazinebookcase {
width: 100%;
padding: 3px;
vertical-align:bottom;

}

.magazinebookcase .clearfix {
clear:both;
}

.magazinebookcase .books {
text-align:center;
display: table-cell;
vertical-align: bottom;
    border: 1px solid #000;
}

.magazinebookcase a {

display: block;
word-break: break-all;
    color: #000;
    -moz-transform:rotate(30deg);
}

.magazinebookcase a:hover {
background-color: #ccc;
}

DEMO

For each link you will have make different class this is a demo for you.. as per your requirement....

Shailender Arora
  • 7,674
  • 2
  • 31
  • 35
-1

Put the content in a span which you want to rotate and then you can rotate it using CSS. e.g 

<span class="rotate">Book 1</span>
<span class="rotate">Book 2</span>
<span class="rotate">Book 3</span>
<span class="rotate">Book 4</span>

and the css

.rotate{
 -webkit-transform: rotate(-90deg); 
 -moz-transform: rotate(-90deg); 
}

Hope it works :)

Ankush
  • 300
  • 2
  • 5
  • 14