[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.

[Vulpes]

(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:

position: fixed;
top: 50%;
left: 0px;

or

left: -150px;

Not sure what you want exactly ^

[JAlexander91]

Sorry, didn't work. Anyone else?

[Dez]

Either add a translation into your transform:

-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:

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:

left: -75px; /* (width/2) - (height/2) */