StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>You could apply the reverse rotation on the descendants.</p> <p>For example</p> <pre><code>div.parent{ -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); } div.parent span{ -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); } </code></pre> <p><strong>Example:</strong> <a href="http://jsfiddle.net/RpcfB/1/" rel="nofollow">http://jsfiddle.net/RpcfB/1/</a></p> <p>Fyi, you will need to play with <code>padding</code> and/or <code>margin</code> to make it all work.</p> <p><strong>EDIT</strong></p> <blockquote> <p>I'm afraid it's more complicated than that.</p> </blockquote> <p>That's the truth!! Although, I as mentioned, you have to play with the css.</p> <p>For example, to fix the first one, you need to make these adjustments:</p> <ol> <li><p>add a class to the first <code>li</code></p> <pre><code> #nav_main_gts > li.rotate{ //ADD CLASS HERE -moz-transform: rotate(-90deg); -webkit-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=-1); transform: rotate(-90deg); } </code></pre></li> <li><p>Then change the second rule to target the next <code>ul</code> not <code>li</code></p></li> <li><p>Then fiddle with the <code>margin</code> to get it all in place. Remember, because the first <code>li</code> is rotated, down is not left, so a negative <code>margin-left</code> is needed </p> <pre><code> #nav_main_gts > li.rotate ul{ //CHANGE TO UL HERE -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1); transform: rotate(90deg); margin-left:-100px; //ADD A MARGIN HERE } </code></pre></li> <li><p>continue with the others.</p></li> </ol> <p><strong>Updated example:</strong> <a href="http://jsfiddle.net/FKCTk/1/" rel="nofollow">http://jsfiddle.net/FKCTk/1/</a></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