StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POSideways tab with css-rotated tab headers
text
Body
copied!<p>I'm trying to make a tabbed menu in pure html and css.</p> <p>The tab menu is contained on the right side of the page, so the tabs are shown on the left-hand side of the menu. I think I got that part working ok.</p> <p>What I am struggling with is getting the text in the tabs to rotate sideways so as not to have ridiculously long horizontal tabs.</p> <p>This fidle <a href="http://jsfiddle.net/9gPXF/" rel="nofollow">http://jsfiddle.net/9gPXF/</a> here shows what i have so far. The bit that I am struggling with is getting the width of the tabs to remain manageable.</p> <p>The relevant css code is this bit:</p> <pre><code> #RightMenu #Tabs > li { display: block; width: 3em; height: 4em; line-height: 4em; border-top: 1px solid #000000; border-bottom: 1px solid #000000; border-left: 1px solid #000000; } #RightMenu #Tabs > li > span { display: inline-block; line-height: 1em; -webkit-transform: rotate(-90deg); text-align: center; } </code></pre> <p>The <code>li</code> elements contain a <code>span</code> which I rotate in css. The thing is that actual width of the <code>li</code> has to be sufficient to accomodate the <code>span</code> or the text break. Which is annoying, because I then have to make the tabs both wide and high enough for the text.</p> <p>How should I modify the style to get this to work?</p> <p>UPDATE:</p> <p>I might be going about this completely wrong. If anybody knows of any other way to make this work, I'd take that as an answer too.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload