[Solved] Rotated Text, Help with Page Placement.

[Christopher]

Hello all!

I’m wondering if anyone can give me some much needed help in ‘floating’ (the idea not referencing the tag) the copyright text I’m trying to include on my portfolio site.

I’ve used a bit of CSS (text transform: rotate) to rotate the text, to have it flow down the site of the page.

But what I can seem to do is get it across to the other side of the page! (float:right) doesn’t seem to work.

On both my ‘Design’ and ‘Photography’ pages I’ve also implemented a side scrolling carousel, which requires the text to applied (position fixed), so they don’t scroll off the screen.

So yeah! Any help would be immensely appreciated, I am truly stuck here.

(A link to the code on CodePen, which I’ve tried to thin out, to only include this targeted problem)
http://codepen.io/callil/pen/WbWRwa

(Basic illustration of what I’m trying to do)
https://www.dropbox.com/s/y47o713yuti1p96/Screenshot%202015-04-01%2023.10.07%20copy.png?dl=0

[Paulie_D]

You need to use transform-origin and translate in addition to the rotate.

The problem will be that the footer is fixed position and so will collapse in height to the untransformed height of the element.It won’t resize to the rotated element.

As such you would have to assign a height to the footer or calculate it with Js.

http://codepen.io/Paulie-D/pen/ByEpEM

[Christopher]

Thanks so much for your feedback!

I now understand that when using the “rotate” tag it holds it’s untransformed dimensions.

Ignoring the fact I’ve labeled this as a footer, I’m still not seeing how I can have this pushed across to the right side (essentially floated & fixed) and aligned with the right side of the screen (as it still has it’s original width).

Do I need to apply some negative margin to account for the excess width?

Also I’m trying to have it vertically center on the right side, is this also problematic with it keeping it’s original height?

Apologise for my lack of knowledge! I’ve yet to grasp the structure and alignment using css fully.

Thanks heaps guys.

[Paulie_D]

I’m still not seeing how I can have this pushed across to the right side (essentially floated & fixed)

It can’t be both.

You can’t use position:fixed on it but you could use position:absolute to get it on the right middle…then we can figure out the transforms needed.

I’ll see what I can come up with but I’m kinda bogged down for the next few hours.

[Christopher]

Yes, almost. That type of text rotation allows for it to be aligned correctly against the right side of the screen, excellent code.

My only other need is for it to be vertically center as well!

I’m messing with it now, will let you know if I figure it out.

[Paulie_D]

Not entirely the same but this one I answered on Stack Overflow might lend some insight.

http://stackoverflow.com/questions/29268168/html-css-vertical-label-located-in-the-middle-of-the-left-edge-of-the-containe/29277939#29277939

[Christopher]

Looks promising, will let you know how it goes.

Currently 2:13am here in Australia, so I think I’ll leave it till tomorrow to try it out haha.

Thanks for all this help! Much love.

[Christopher]

That’s exactly what I need! You are a wizard.

I’ll let you know it integrates into the site. :)

Thanks again.

[Christopher]

Works perfectly!

Cheers again. :)

[Author]

Posts