使用CSS打開頁面標題文本90度

我一直在玩這個2天。除了讓它排隊，我感到沮喪 - 我意識到，也許這是不可能的，因爲每個頁面的標題是不同的'寬度'（並且因爲文本從左到右，標題名稱越長，它越長進入標題區域）。另一個考慮是，這是一個WordPress網站（並不是真的很重要）。使用CSS打開頁面標題文本90度

我發現這些教程是用於博客條目的'日期戳'，其中唯一被旋轉的文本是4位數年份或2位數字日期。

圖形設計：

enter image description here

在哪裏我至今所得到的CSS：http://jsfiddle.net/vGFZP/

來源

2011-10-17 KBarnes

http://snook.ca/archives/html_and_css/css-text-rotation – Jawad

的JavaScript可以爲你做的。另外jQuery有.width（）函數......但這不是一個好方法......我會玩一點。

來源

2011-10-17 14:57:33 NE555

你只需要與padding和margin

發揮試試這個（＃分別只是舉例）

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

來源

2011-10-17 14:58:52

我加了你的上邊距和填充左:)謝謝！ – KBarnes

很高興爲您服務@KBarnes！ –

好的，所以它適用於我有的小例子，但現在它不太符合我的WordPress CSS http://www.startingpointstables.com/wp-content/themes/aSPS2010/A-Theme2.html（I添加了邊框和背景顏色，以便我可以看到div在做什麼）。我把它關閉了，以任何方式將'標題'（小馬學校）左移約5px？如果我使用Top：＆Left：作爲絕對值，那麼它將它定位在瀏覽器的角落（所以當瀏覽器調整大小時標題停留在它的位置），並且相對根本不起作用。 – KBarnes

，以適應任何標題的長度，使一個佔位符的高度和寬度相同（例如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; 
}

來源

2011-10-17 15:29:49

我使用了你發佈的內容... danke !!! – KBarnes

好的，所以它適用於我有的小例子，但現在它不太符合我的WordPress CSS http://www.startingpointstables.com/wp-content/themes/aSPS2010/A-Theme2.html – KBarnes

* **編輯 - 不要緊！我注意到了課程的實際名稱，它有一個行高。 :) – KBarnes

使用CSS打開頁面標題文本90度

回答

相關問題