JAlexander91
Badges: 0
Rep:
?
#1
Report Thread starter 7 years ago
#1
I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php

I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.

Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.

If it helps, here are the CSS rules for sidetag.

color: #FFF;
height: 50px;
width: 200px;
position: fixed;
background-color: rgb(0,102,204);
font-size: 32px;
line-height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
top: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;

Greatful if anyone could help. Cheers.
0
reply
Vulpes
Badges: 15
Rep:
?
#2
Report 7 years ago
#2
(Original post by JAlexander91)
I'm trying to create a side tag, as found here in it basic form. http://www.firstforturf.co.uk/quotation.php

I'm trying to do as much of it as possible using CSS rather than just putting in an image however I've encountered a problem.

Upon rotating the side DIV it is moved from the side of the page. I've tried setting the margin to 0 but it doesn't seem to be working.

If it helps, here are the CSS rules for sidetag.

color: #FFF;
height: 50px;
width: 200px;
position: fixed;
background-color: rgb(0,102,204);
font-size: 32px;
line-height: 50px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
text-align: center;
top: 50%;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
writing-mode: tb-rl;

Greatful if anyone could help. Cheers.
Do:
Code:
position: fixed;
top: 50%;
left: 0px;
or

Code:
left: -150px;
Not sure what you want exactly ^

0
reply
JAlexander91
Badges: 0
Rep:
?
#3
Report Thread starter 7 years ago
#3
Sorry, didn't work. Anyone else?
0
reply
Dez
Badges: 20
Rep:
?
#4
Report 7 years ago
#4
Either add a translation into your transform:

Code:
-moz-transform: rotate(90deg) translate(0px, 75px);
-o-transform: rotate(90deg) translate(0px, 75px);
-webkit-transform: rotate(90deg) translate(0px, 75px);
transform: rotate(90deg) translate(0px, 75px); /* (width/2) - (height/2) */
Or change the origin, and add a negative margin to compensate:

Code:
margin-top: -100px; /* width/2 */
-moz-transform-origin: -25px center;
-o-transform-origin: -25px center;
-webkit-transform-origin: -25px center;
transform-origin: -25px center; /* -(height/2) */
Or simply shift the position of the element:

Code:
left: -75px; /* (width/2) - (height/2) */
0
reply
X

Quick Reply

Attached files
Write a reply...
Reply
new posts
Back
to top
Latest
My Feed

See more of what you like on
The Student Room

You can personalise what you see on TSR. Tell us a little about yourself to get started.

Personalise

Why wouldn't you turn to teachers if you were being bullied?

They might tell my parents (26)
7.07%
They might tell the bully (35)
9.51%
I don't think they'd understand (56)
15.22%
It might lead to more bullying (143)
38.86%
There's nothing they could do (108)
29.35%

Watched Threads

View All