Поворот текста заголовка страницы на 90 градусов с использованием CSS - PullRequest
Новая
       38

Поворот текста заголовка страницы на 90 градусов с использованием CSS

3 голосов
/ 17 октября 2011

Я играю с этим в течение 2 дней.Помимо разочарования по поводу того, что он выстроился в линию - я понял, что, возможно, это будет невозможно из-за того, что заголовок каждой страницы имеет разную ширину (и поскольку текст идет слева направо, чем длиннее название заголовка, тем больше он увеличивается)в область заголовка).Другое соображение заключается в том, что это для сайта WordPress (не то, что это действительно имеет значение).

Я нашел учебные пособия, где это используется для «отметок даты» для записей в блоге, где единственным текстом являетсяповернутым является либо четырехзначный год, либо двухзначная дата.

Графический дизайн:

enter image description here

Где я до сих пор работал с CSS: http://jsfiddle.net/vGFZP/

Ответы [ 3 ]

2 голосов
/ 17 октября 2011

Вам просто нужно играть с padding и margin

Попробуйте это (#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 */
}
1 голос
/ 17 октября 2011

Чтобы соответствовать любой длине заголовка, создайте заполнитель с такой же высотой и шириной (например, 960 x 960px). Сделайте этот заполнитель большим, чтобы соответствовать длинным заголовкам. Также выровняйте текст по правому краю, чтобы он попал на верх страницы.

Смотрите демонстрацию здесь: 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;
}
0 голосов
/ 17 октября 2011

JavaScript может сделать это для вас. Также в jQuery есть функция .width () ... Но это не очень хороший способ ... Я немного поиграю.

...