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

#css #text #rotation

#css #текст #поворот

Вопрос:

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

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

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

введите описание изображения здесь

Чего я добился с помощью CSS: http://jsfiddle.net/vGFZP /

Ответ №1:

Вам просто нужно поиграть с 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. Я добавил ваше поле сверху и отступ слева Спасибо!

2. Хорошо, итак, это сработало на небольшом примере, который у меня был, но теперь он не совсем работает на моем WordPress CSS startingpointstables.com/wp-content/themes/aSPS2010/… (Я добавил цвета границы и фона, чтобы я мог видеть, где / что делали divs). Я понял, есть ли способ переместить «заголовок» (школа пони) влево примерно на 5 пикселей? Если я использую Top: amp; Left: для абсолютного значения, то он позиционирует его из угла браузера (поэтому, когда браузер изменяет размер, заголовок остается на своем месте), а относительный не работает вообще.

3. Выглядит нормально @KBarnes. Вы все еще ищете помощи в этом?

4.На самом деле да… HA HA! Итак, у меня все работает… за исключением одного неприятного побочного эффекта. Вы не можете получить доступ (щелкнуть) по ссылкам в тексте в div «ниже» (рядом) к повернутому. ошарашенный взгляд startingpointstables.com/horse-boarding startingpointstables.com/category/kayes-blog

Ответ №2:

Чтобы заголовок соответствовал любой длине, создайте заполнитель одинаковой высоты и ширины (например, 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;
}

1. Хорошо, итак, это сработало на небольшом примере, который у меня был, но теперь он не совсем работает на моем WordPress CSS startingpointstables.com/wp-content/themes/aSPS2010 /…

2. *** ОТРЕДАКТИРОВАНО — Неважно! Я обратил внимание на класс для фактического заголовка, и у него была высота строки.

3. Спасибо! Это здорово. Однако, если вам нужно щелкнуть или выбрать что-либо в разделе содержимого, вам нужно добавить отрицательный z-индекс в раздел заголовка.

Ответ №3:

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