CODEWITHSUNDEEP
jquerycss
xjq233p_1
xjq233p_1

Reputation: 8070

CSS vertial tabs with rotated words

I am looking to build vertical tabs.

I am running into some issue, because when I rotate it -90 degrees, the END of the div is actually facing up. Hence, if I use absolute positioning, "top" no longer applies because I don't know the width of the div (it varies).

Are there tools/plugins out there which allows me to do this?

Check http://imagebin.ca/view/4ov0ZF.html for more info

Upvotes: 0

Views: 945

Answers (3)

Niklas Bäckman
Niklas Bäckman

Reputation: 466

If you can build all the tabs at once you can simply put them into a table with a single row that can then be rotated.

If you rotate all at once, then there's no problem to keep track of where the previous tab ends.

I suggest using a table as I assume you want to use borders for the tabs and that would be hard to do with inline elements, which would otherwise be required in order to get all tabs to line up horizontally for the single rotation.

Upvotes: 0

Sebastian Patane Masuelli
Sebastian Patane Masuelli

Reputation: 4247

hmmm... is it possible to give your tabs fixed dimensions? if so, you can do it without images, which are a nightmare to update, and without javascript (except in IE, which needs js when using the Matrix-filter).

here's an example solution for every browser: http://jsfiddle.net/SebastianPataneMasuelli/BjnaS/1/

Upvotes: 1

Aishwar
Aishwar

Reputation: 9724

The simplest and most robust way to do this would be to use images. That way if Javascript is disabled, it will still continue to work. The implementation should be simple as well (no need to rotate things 90 degrees etc). All the tabs can be in a column of their own and the content can be in a different column.

Upvotes: 0

Related Questions