CODEWITHSUNDEEP
htmlcss
Homer_J
Homer_J

Reputation: 3323

CSS Rotated text not displaying corretly

I have the following code:

CSS

.a4{
    height:297mm;
    width:210mm;
    border:1px solid black;
}

.left{
    height:297mm;
    width:15mm;
    background-color:blue;
    float:left;
    overflow:none;
    position:absolute;
}

.left_text{
    position:absolute;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    writing-mode: lr-tb;
    color:white;
    font-size:40pt;
}

HTML/PHP

<div class="a4">
<div class="left">
        <span class="left_text"><?php echo $brand." snapshot survey"?></span>
</div>
</div>

JSFiddle: http://jsfiddle.net/5QL62/1/

The issue I have is that cannot see the rotated text. I had assumed (clearly incorrectly) that the text would simply be within the `.left' div running bottom to top.

Any advice, feedback and solutions as to where I am going wrong would be appreciated.

Upvotes: 0

Views: 69

Answers (2)

Ramesh Dahiya
Ramesh Dahiya

Reputation: 183

Try with property "horizontal-bt". This will solves your problem. Check link here http://jsfiddle.net/5QL62/9/

Upvotes: 0

Praveen
Praveen

Reputation: 243

Try this in jsfiddle

       <div class="a4">
      <div class="left">
      <span class="left_text">snapshot survey</span>
      </div>
      </div>

And your css will remain same

Upvotes: 1

Related Questions