CODEWITHSUNDEEP
htmlcss
Andrew
Andrew

Reputation: 1126

CSS rotated text and div placement issues

I'm trying to place rotated text in a div next to another div, which is "fixed" to the right-side of the browser window. The structure I'm aiming for is this:

enter image description here

However, I'm having complications rotating the text and getting the positioning correct. Here is what I've tried:

HTML Markup

<div id='feedbackslider'>
   <div class='feedback-title'>
      <i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
   </div>
   <div class='feedback-list'>
       <ul>
          <li>Ask a Question</li>
          <li>Give Praise</li>
          <li>Share an Idea</li>
          <li>Report a Problem</li>
       </u
   </div>
</div>

CSS:

#feedbackslider {
    background-color: #fff;
    position: fixed;
    right: -25px;
    padding: 0;
    top: 50%;
    z-index: 9999;
}

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: relative;
    z-index: 9999;
    right: 75px;

}

#feedbackslider:hover .feedback-title {
     /*color: #fff;*/
}

#feedbackslider .feedback-list {
    border: solid 1px red;
    float: right;
}

#feedbackslider .feedback-list ul {
    width: 150px;
    padding: 0;
    list-style: none;
    margin: 0;
}

And here's how my attempt looks:

enter image description here

It's getting close, but I would like the list (red border) flush against the top of the main container, and I'd also like "feedback" to occupy it's own space to the left of the list but still within the container.

There might be an easier way of doing this, but I'm not sure.

Any assistance would be greatly appreciated! I can provide clarification if needed :)

Upvotes: 2

Views: 4632

Answers (4)

Md Shawon
Md Shawon

Reputation: 230

Try this and let me know if its close enough.

CSS:

    #feedbackslider {
    background-color: #fff;
    position: fixed;
    right: -25px;
    padding: 0;
    top: 50%;
    z-index: 9999;
}

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    z-index: 9999;
    float:left;
    margin-top:20px;
    margin-right:-20px;

}

#feedbackslider:hover .feedback-title {
     /*color: #fff;*/
}

#feedbackslider .feedback-list {
    border: solid 1px red;
    float: left;
    padding:10px;
}

#feedbackslider .feedback-list ul {
    width: 150px;
    padding: 0;
    list-style: none;
    margin: 0;
}

HTML:

<div id='feedbackslider'>
   <div class='feedback-title'>
      <i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback
   </div>
   <div class='feedback-list'>
       <ul>
          <li>Ask a Question</li>
          <li>Give Praise</li>
          <li>Share an Idea</li>
          <li>Report a Problem</li>
       </ul>
   </div>
</div>

Upvotes: 1

user3845561
user3845561

Reputation: 68

If you are trying to have the title in the middle even if the content grows, you can try this

HTML

<div id='feedbackslider'>
   <div class='feedback-title'>
     <span> <!--Added this span-->
        <i class='glyphicon glyphicon-bullhorn mr10'></i> Feedback 
     </span>

   </div>
   <div class='feedback-list'>
       <ul>
          <li>Ask a Question</li>
          <li>Give Praise</li>
          <li>Share an Idea</li>
          <li>Report a Problem</li>
       </u
   </div>
</div>

CSS

#feedbackslider {
    background-color: #fff;
    padding: 0;
    position: fixed;
    right: -25px;
    top: 50%;
    z-index: 9999;
  display: table; /*Added this*/
  border-spacing: 10px; /*change this spacing according to your need*/
}
/*added this css for title*/
.feedback-title {
  display: table-cell;
  width: 20px;
  margin-right: 5px;
  height: 100%;
  border: 1px solid #ccc
}
/*added this css for inner span*/
.feedback-title span {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
     left: -19px;
    margin-top: -10px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 78px;
    z-index: 9999;


}

#feedbackslider:hover .feedback-title {
     /*color: #fff;*/
}

#feedbackslider .feedback-list {
    border: solid 1px red;
    display: table-cell; /Added this/
}

#feedbackslider .feedback-list ul {
    width: 150px;
    padding: 0;
    list-style: none;
    margin: 0;
}

Upvotes: 2

Tushar
Tushar

Reputation: 4418

Try This

UPDATED CSS

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    z-index: 9999;
    /*Add This CSS*/
    left: -54px; 
    margin-top: -10px; 
    position: absolute;
    text-align: center; 
    top: 50%; 
    width: 78px; 

}

Upvotes: 1

Rupam Datta
Rupam Datta

Reputation: 1889

Here is some modification to your css.

http://jsfiddle.net/hv4neuf3/

#feedbackslider {
    background-color: #fff;
    position: fixed;
    right: 0;
    padding: 0;
    top: 50%;
    z-index: 9999;
}

.feedback-title {
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    position: relative;
    z-index: 9999;
    right: 90px;
    top: 85px;
    text-align: center;
    font-size: 20px;
    border: 1px solid #000;
}

#feedbackslider:hover .feedback-title {
     color: #fff;
}

#feedbackslider .feedback-list {
    border: solid 1px #000;
    float: right;
}

#feedbackslider .feedback-list ul {
    width: 140px;
    padding: 0;
    list-style: none;
    margin: 0;
}

#feedbackslider li{
    padding: 9px 5px;
}

Upvotes: 1

Related Questions