CODEWITHSUNDEEP
csstextrotation
KBarnes
KBarnes

Reputation: 663

Turning a page title text 90 degrees using CSS

I've been toying with this for 2 days. Besides being frustrated about getting it to line up - I realized that maybe this won't be possible due to each page's title being different 'widths' (and because text goes from left to right, the longer the title name the more it grows UP into the header area). The other consideration is, this is for a WordPress site (not that it really matters).

I've found tutorials where this is being used for the 'date stamps' for blog entries, where the only text being rotated is either a 4 digit year or a 2 digit date.

The graphic design:

enter image description here

Where I've gotten so far with the CSS: http://jsfiddle.net/vGFZP/

Upvotes: 3

Views: 2827

Answers (3)

user920041
user920041

Reputation:

To fit any title length, make a placeholder with the same height and width (eg. 960 x 960px). Make this placeholder big to fit longer titles. Also align text to the right, then it will float to the page top.

See demo here: http://jsfiddle.net/4QFPJ/4/ 

.title {
   display:block;
   position:absolute;
   font-size:50px;
   font-weight:bold;
   line-height:45px;
   -webkit-transform: rotate(-90deg);
   -moz-transform: rotate(-90deg);

   float: left;
   left:25px;
   top: 20px;
   height:960px;
   width: 960px;
   text-align: right;
}

Upvotes: 1

Jason Gennaro
Jason Gennaro

Reputation: 34863

You just need to play with the padding and margin

Try this (#s just for example)

.title {
    display: block;
    position: absolute;
    left: 5px;
    top: 35px;
    font-size: 50px;
    font-weight: bold;
    line-height: 45px;
    -webkit-transform: rotate(-90deg);
    margin-top: 100px;  /* ADD THIS */
}

.content {
    position: absolute;
    left: 50px;
    top: 20px;
    font-size: 13px;
    padding-left: 150px;  /* ADD THIS */
}

Upvotes: 2

NE555
NE555

Reputation: 76

JavaScript could do that for you. Also jQuery has the .width() function… But it's not a nice way… I will play a little bit around.

Upvotes: 0

Related Questions