Vertical button using CSS

Question

I am trying to create a vertical button, but I can’t put the text in only one line.

So far, I:

CSS

#hp-ctn-howItWorks { position:fixed; top:300px; right: 0px; padding:0px; margin:0px; width: 40px; height:160px; background:#FF931E; z-index:15; border-radius: 3px 0px 0px 3px; } #hp-ctn-howItWorks img { margin: 15px 0px 0px 13px; } #hp-ctn-howItWorks p { color: #fff; -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 

HTML:

 <!-- How It Works Button --> <div id="hp-ctn-howItWorks"> <img src="~/Content/images/ui-symb-arrow-left-white-15x15.png" width="15" height="15" /> <p>Como funciona</p> </div> 

Any idea how I can click the text and put it on only one line?

Answer 1

You can do this using html without interrupting   here <p>Como&nbsp;funciona</p>

here is what it looks like after changing it and the field on the image

jsfiddle

Answer 2

demo - http://jsfiddle.net/victor_007/m1c5xazr/1/

rotate booklet instead of text

 #hp-ctn-howItWorks img { vertical-align:middle; } #hp-ctn-howItWorks { padding:0px 0px 0px 0px; text-align: center; margin:0px; width: 160px; height:40px; background:#FF931E; z-index:15; border-radius: 5px 5px 0px 0px; -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); transform-origin: bottom right; position: fixed; right: 0px; } #hp-ctn-howItWorks p { color:#fff; display:inline-block; line-height:40px; } 

Answer 3

adding a few extra CSS it should work, for example:

HTML

 <p class="c">TEXT</p> 

CSS

 .c{width:100%;height:100%;position:relative;Top:30px;left:20px} 

adjusting element sizes

you get more control over how it looks; also note that using:

 position:relative; 

allows you to set the height and width only inside the parent div

hope this helps