CODEWITHSUNDEEP
htmlcss
idmean
idmean

Reputation: 14915

Position a rotated span right

I want to create div in which there should be a text like this:

enter image description here

But I'm not able to position the text right. Since I use transform: rotate(-90deg);, I'm completly confused about left, right, top and bottom.

My main question is about why the text breaks sometimes, why there are things like right: -32px; and is there a good way to keep all responsive (various text length, various length of the re d block). I've added a screen shot to show in which context I would like to use it:

enter image description here

HTML:

<div class="chart-block" id="block2" style="height: 90%; left: 120px;">
   <div>
      <span>The Cup of tea</span>
   </div>
</div>

CSS:

.chart-block {
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 40px;
    background-color: #ef0707;
}

.chart-block > div {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
}

Upvotes: 0

Views: 380

Answers (4)

vals
vals

Reputation: 64264

Maybe this is what you want

CSS (only the span, the rest remains the same) 

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
    width: 200px;
    left: 50%;
    bottom: 0px;
    position: absolute;
    -webkit-transform-origin: 0% 50%;
    transform-origin: 0% 50%;
}

updated demo

Notice that the only fixed value is the width of the span. The rest are 0 values (that keep invariant) and percentage values (that should make it fully responsive). About the width, the only requisite is that it is high enough for the text not to be clipped, so it should be easy to find a good value.

Upvotes: 1

Nayt Grochowski
Nayt Grochowski

Reputation: 591

Do you want it just there on the page - or frozen in place too?

We have a "Feedback" link that we show in the footer for smaller screens, and on the top right for larger screens: http://jsfiddle.net/wHL7g/

The HTML: 

<div class="feedbackRequest">
    <a href="/feedback" data-role="none">Feedback</a>
</div>

The CSS: 

.feedbackRequest {
  color: #05afba;
  margin: 0 auto;
}
.feedbackRequest a {
  background-color: #ffffff;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  border: solid 1px #05afba;
  color: #05afba;
  display: block;
  margin: 10px auto 0 auto;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  width: 70px;
}
.feedbackRequest a:hover {
  border: solid 1px #025257;
  color: #025257;
  text-decoration: none;
}
@media only screen and (min-width: 360px) {
  .feedbackRequest {
    position: fixed;
    top: 100px;
    right: -32px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
    z-index: 1000;
  }
  .feedbackRequest a {
    margin: 0;
    width: auto;
  }
}

Upvotes: 0

EJanuszewski
EJanuszewski

Reputation: 69

As you already have a position relative on the parent of the text, you could use position absolute on the actual text to position it bottom of the parent, I don't really like using position absolute but this would suit your code.

HTML:

<div class="chart-block" id="block2" style="height: 90%; left: 120px;">
    <div>
        <span>The Cup of tea</span>
    </div>
</div>

CSS:

.chart-block {
    display: block;
    position: absolute;
    left: 40px;
    bottom: 0;
    width: 40px;
    overflow: hidden;
    background-color: #ef0707;
    transition: height ease 1s;
}

.chart-block > div {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
}

.chart-block > div > span {
    display: block;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    color: white;
    font-size: 10px;
    position:absolute;
    bottom:15px;
    left:0;
}

See this fiddle

However what Watson suggested is also good, but I was thinking of browser compatibility in order to keep the width of your bar as you wanted it.

Upvotes: 1

dezman
dezman

Reputation: 19388

I would do it something like this. I rotate the whole block, instead of just the text. That way you can position the text in a more normal fashion.

HTML:

<div class="chart-block" id="block2">
    <span>The Cup of tea</span>
</div>

CSS:

.chart-block {
    display: block;
    position: absolute;
    width: 400px;
    height: 40px;
    left: 40px;
    background-color: #ef0707;
    -webkit-transform: rotate(-90deg);
    -transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
}

.chart-block span {
    display: block;
    color: white;
    font-size: 16px;
    padding: 5px;
}

Upvotes: 1

Related Questions