12

I've a little problem with block rotated 90 degrees using css transform.

Challenge lies in the following:

Rotated block is inside 40px vertical column. This means that width of the rotated block in auto mode is not more than 40px. So chunk of text is not placed on one continues line, instead line breaks appear.

To better visualise this problem please check this fiddle I created: http://jsfiddle.net/F7CEX/

#open_nav {
    font-family: 'Exo', sans-serif;
    font-weight: 300;
    font-size: 1em;
    display: block;
    color: #333333;
    text-decoration: none;
    background: url("img/menu-s.png") no-repeat 18px -30px transparent;
    padding-left: 50px;
    padding-right: 19px;
    line-height: 40px;
    position: absolute;
    bottom: 18px;
    -webkit-transform: rotate(-90deg);
    -webkit-transform-origin: 20px;
    -moz-transform: rotate(-90deg);
    -moz-transform-origin: 20px;
    -ms-transform: rotate(-90deg);
    -ms-transform-origin: 20px;
    -o-transform: rotate(-90deg);
    -o-transform-origin: 20px;
    transform: rotate(-90deg);
    transform-origin
}

I simply need this text to be a one liner. Any ideas?

Improve this question

3 Answers 3

Reset to default
19
+50

If this is what you want

fiddle

Here's the css only added white space. It comes in continious line. If m missing some point then please clear

Here's the css

#sidebar-small {
width: 40px;
height: 100%;
position: fixed;
left: 0;
top: 0;
}

#open_nav {
white-space:nowrap;
font-family: 'Exo', sans-serif;
font-weight: 300;
font-size: 1em;
display: block;
color: #333333;
text-decoration: none;
background: url("img/menu-s.png") no-repeat 18px -30px transparent;
padding-left: 50px;
padding-right: 19px;
line-height: 40px;
position: absolute;
bottom: 18px;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

Check and let me know if I am missing some thing

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

After all of these years, this was exactly what I needed. Very clean solution, may be the cleanest. Your white-space:nowrap forced the content to be one line, and bottom: ...px helped me to adjust the starting point and lastly transform-origin helped me to adjust where to start transforming.
0

Just remove the Position attribute from CSS:-

#sidebar-small {
width: 40px;
height: 100%;
left: 0;
top: 0;
}
Improve this answer

2 Comments

In that case you need to specify Width again for the open_nav container;
yes but that means no more variable width content inside button! So my problem has no solution?
0

I think we can solve the problem by using the below styles

#sidebar-small {
height: 250px;
left: 0;
position: fixed;
top: 0;
width: 250px;
}

In the above styles we can give width as 100% also in case we want the header to be occupying the whole screen.

#open-nav{
bottom: 8px;
left: 10px;
position: absolute;
color: #333333;
font-family: 'Exo',sans-serif;
font-size: 1em;
line-height: 40px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
-webkit-transform: rotate(-90deg);
-webkit-transform-origin: 20px;
-moz-transform: rotate(-90deg);
-moz-transform-origin: 20px;
-ms-transform: rotate(-90deg);
-ms-transform-origin: 20px;
-o-transform: rotate(-90deg);
-o-transform-origin: 20px;
transform: rotate(-90deg);
transform-origin: 20px;
}

The above styles are for the anchor tag.

Improve this answer

1 Comment

Take sidebar width as a given. Solution by changing the design is not a real solution. Besides I mentioned this solution in my op, by explaining that width is the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.