- This topic is empty.
April 1, 2015 at 5:20 am #199397
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)
(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=0April 1, 2015 at 6:40 am #199398
You need to use
translatein addition to the
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.April 2, 2015 at 12:55 am #199503
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.April 2, 2015 at 3:43 am #199508
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:fixedon it but you could use
position:absoluteto 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.April 2, 2015 at 7:23 am #199567
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.April 2, 2015 at 7:51 am #199568
Not entirely the same but this one I answered on Stack Overflow might lend some insight.April 2, 2015 at 8:14 am #199569
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.April 2, 2015 at 5:46 pm #199623
That’s exactly what I need! You are a wizard.
I’ll let you know it integrates into the site. :)
Thanks again.April 2, 2015 at 6:26 pm #199625
Cheers again. :)
- The forum ‘CSS’ is closed to new topics and replies.