CODEWITHSUNDEEP
javascripthtmlcss
zhuyxn
zhuyxn

Reputation: 7091

Vertical Tabs with Vertical Text in CSS

I have a series of .jpeg menu tabs, which contain vertical text, and are oriented vertically (height > width). Attempting to create vertical tabs, such that they go from the top to the bottom of the screen in series, but after reading some documentation, I'm still not sure exactly where to start. Any tips? Sorry for the extremely vague question, but most search results assume you want a vertical menu with horizontal text.

Upvotes: 0

Views: 1087

Answers (2)

tuff
tuff

Reputation: 5163

You can use word-wrap: break-word; combined with a narrow width value to force your text to wrap for every single letter: http://jsbin.com/ominus/1/edit

Rotating would look better, but it's another option!

Upvotes: 1

lorenzo-s
lorenzo-s

Reputation: 17010

If browser compatibility is not a priority, you can try using CSS3:

.rotated-text {
    -webkit-transform: rotate(-90deg); 
    -moz-transform: rotate(-90deg); 
    -o-transform: rotate(-90deg);   
    transform: rotate(-90deg);  
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3); /* Should work on IE9+ */
}

Working example: http://jsfiddle.net/C3qrT/

Then you must work to align text as you want.

Upvotes: 0

Related Questions