CSSを使用してページタイトルテキストを90度回転させる

Question

私はこれを2日間続けてきました。私は、各ページのタイトルが異なる「幅」であるために可能ではないことに気付きました（また、テキストが左から右に移動するため、タイトル名が長くなるほどUPヘッダー領域に挿入します）。もう一つの考慮事項は、これはWordPressサイトのためのものです（本当に重要ではありません）。

私は、これが回転している唯一のテキストが4桁の年または2桁の日付であるブログエントリの「日付スタンプ」に使用されているチュートリアルを見つけました。

グラフィックデザイン：http://jsfiddle.net/vGFZP/

Answer 1

JavaScriptは、あなたのためにそれを行うことができます：私はCSSでこれまでに得ている

。また、jQueryは.width（）関数を持っています...しかし、それは良い方法ではありません...私は少し周りに再生されます。

Answer 2

あなたは、任意のタイトルの長さに合うようにするには、この（ちょうど例#S）

.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 */ 
} 

Answer 3

を試してみてpaddingとmargin

と遊ぶ（同じ高さと幅のプレースホルダを作成する必要があります960 x 960ピクセルなど）。長いプレースメントに合わせてこのプレースホルダーを大きくします。また、テキストを右に揃えると、ページの上に浮かびます。

デモここを参照してください： 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; 
}