0

I need to create a fixed menu button which would be assigned to the right side of the browser. Currently i my code looks lie this:

#button-side-menu {
    background: none repeat scroll 0 0 #F5F5F5;
    border-radius: 5px 5px 0 0;
    color: #363636;
    height: 28px;
    position: fixed;
    right: 16px;
    top: 91px;
    z-index: 2000;
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -webkit-transform: rotate(-90deg);
    -moz-transform-origin: 100% 100%;
    -o-transform-origin: 100% 100%;
    -webkit-transform-origin: 100% 100%;
    padding: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

enter image description here

Is it possible to center it in the div, the text was not adhered to the right side. And also is it possible to set test like this:

M
e
n
u

P.S. Site is multilingual so i need the text, not image in this case.

Community
  • 1
  • 1
Kin
  • 4,466
  • 13
  • 54
  • 106
  • James, as far as I can tell, this isn't a duplicate. The duplicate asks if it's possible, whereas this one wants to center it. Two different questions. – Albzi May 28 '14 at 07:55
  • @JamesDonnelly this isn't a duplicate – Kin May 28 '14 at 07:56
  • 1
    Hmm, I've reopened it. Although I'm sure both of your questions have been previously answered here before. At any rate, the answer I had marked this as a duplicate of does answer the vertical text request: http://stackoverflow.com/questions/1080792/how-can-i-draw-vertical-text-with-css-cross-browser – James Donnelly May 28 '14 at 07:59
  • Are you looking for this? http://stackoverflow.com/a/21727403/1542290 – Mr. Alien May 28 '14 at 08:02
  • I created a codepen a while back with vertical text - check it http://codepen.io/lukeocom/pen/mHnvl – lukeocom May 28 '14 at 08:03

1 Answers1

1

This works:

#button-side-menu {
    background: none repeat scroll 0 0 #F5F5F5;
    border-radius: 5px 5px 0 0;
    color: #363636;
    width: 15px;
    position: fixed;
    right: 16px;
    top: 91px;
    z-index: 2000;
    word-wrap:break-word;
    text-align: center;
    padding: 10px;
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}

Important: word-wrap and text-align are added to make it look like what you asked. Its width is fixed to 15px instead of height.

Kunjan Thadani
  • 1,660
  • 3
  • 18
  • 26
  • thanks, but still it is assigned to the right side of the dif, how to center it? – Kin May 28 '14 at 08:04
  • Please give some more code. This one is working individually for a single div containing this prescribed text. Check it here: http://codepen.io/anon/pen/rDHfa – Kunjan Thadani May 28 '14 at 08:09
  • just add to your example `box-sizing: content-box;` and this will fix the problem in some cases. – Kin May 28 '14 at 08:19