CODEWITHSUNDEEP
htmlcss
Sebastian Hojas
Sebastian Hojas

Reputation: 4210

How to rotate text and position it properly? (CSS, HTML)

I am trying to position a rotated headline next to some text. Statically it works very easy with absolute positioning (left picture). I have, however, difficulties when the page gets resized and the positioning fails (right picture).

Relative positioning Fails when you resize

Current CSS (can be changed):

.headline {
  white-space: nowrap;
  position: absolute;
  top: 185px;
  left: -20px;
  transform: rotate(270deg);
}

Current HTML structure (can be changed):

<header>
    <h1 class="headline">Über mich</h1>
</header>
<div class="text">
  <p class="introduction">....</p>
</div>

How can I position the element so that I always stays 20px next to the paragraph? Could someone link me to existing patterns how to solve this?

A solution with JS (and jQuery) would an option, I would, however, obviously prefer CSS.

Upvotes: 3

Views: 29087

Answers (5)

Olivier
Olivier

Reputation: 175

Had the same issue. Managed to solve it like this in pure CSS :

.parent {
  position: relative;
}

.child {
  position: absolute;
  transform: translateX(-100%) rotate(-90deg);
  transform-origin: right;
  left: 30px; /* change this value to match needs */
  top: 30px; /* change this value to match needs */
}

Upvotes: 9

Quibble
Quibble

Reputation: 173

I have an answer that may be late but worked wonderfully for me.

Normally your text will have a class or id and it will be position:absolute, and positioning values after it, like so:

.TextClass{
    position:absolute;
    top:50%;
    left:55%;
    transform:rotate(-90deg);

etc.

However, when you rotate, the positioning becomes relative (as mentioned above).

I found out that by simply putting the rotated text inside a parent div, you can position the (unrotated, position absolute) parent div as much as you want, and then rotate the text (which will be position:relative) inside the parent div, like so:

.divname{
    position:absolute;
    top:50vh;
    left:50vw;
}
.TextClass{
    position:relative;
    transform:rotate(-90deg);
}

Upvotes: 1

Sebastian Hojas
Sebastian Hojas

Reputation: 4210

The solution was a combination of Diego's answer and Smamatti's comment:

I had to use transform-origin:bottom and width:0. That was working rather quickly, the big problem I had was positioning the text independently to the length of the text. I've only managed to do this by using javascript.

.header
{
    margin: 0;
    width: 0;
    white-space: nowrap;
    position: absolute;
    text-align: left;
    transform-origin: bottom; 
    margin-top: 280px;
    transform: rotate(270deg);
}

Javascript (to ensure compatibility to variables text length):

function adjustSideHeader() {

//check if the headline is visible
  if($('h1.headline').length > 0)
  {
    var headline = $('h1.headline')[0];
    var stringLength = headline.textContent.length;
    //add style tag to support media queries
    document.querySelector('style').textContent +=
       "h1.headline { margin-top: " + (stringLength*23.5) + "px; -webkit-transition: margin-top 2s; transition: margin-top 2s;}"
  }    
}

// fire it when document is loaded
$(document).ready(setTimeout(adjustSideHeader, 300));

Result:

enter image description here

Upvotes: 3

Jarzka
Jarzka

Reputation: 773

Have you tried moving

<h1 class="headline">Über mich</h1>

inside

<div class="text">?

and set

.text {
    position: relative;
}

so that the position is relative to to "text" div. After that you might want to move the Über mich text to the left by reducing it's left value.

Upvotes: 2

Diego
Diego

Reputation: 495

Have you tried use position:relative and the margin property?, I suppose it would be something like this:

.headline {
     white-space: nowrap;
     position: relative; //changed
     margin-top: 185px; //changed
     margin-left: -20px; //changed
     transform: rotate(270deg);
}

*Note: I think you should move the headline inside the paragraph

Upvotes: 1

Related Questions