Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.82/11: Рейтинг темы: голосов - 11, средняя оценка - 4.82
0 / 0 / 0
Регистрация: 06.06.2014
Сообщений: 6
1

Как убрать отступ, если повернуть текст по вертикали

11.06.2014, 09:19. Показов 2082. Ответов 8
Метки нет (Все метки)

Друзья, вот текст кода, которым я поворачиваю текст по вертикали:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="
background-color:#CCC; 
position: fixed; 
top:50%; 
right:0px;
margin:0px;
padding:0px;
display:block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
height:40; 
width:350px;
">
 
<p>Вертикальный текст</p>
 
</div>


Обратите внимание на картинку, во вложении. Виден отступ справа, равный ширине текста. Т.е. чем больше символов у текста, тем дальше он уезжает на право.

Как избавиться от этого отступа?
0
Миниатюры
Как убрать отступ, если повернуть текст по вертикали  
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
11.06.2014, 09:19
Ответы с готовыми решениями:

Как убрать отступ?
Как убрать вот этот отступ? margin и padding не предлагать, border неправильно отображается

Как убрать отступ
всем привет. не могу понять, откуда отступ взялся? вот страница - http://93lab.ru даю скрин, где...

Как убрать отступ? (CSS)
Как убрать этот отступ в выпадающем меню?

Как убрать отступ div блока
Мой сайт Глупый вопрос, как убрать белый отступ блоков слева? .block1 { width: 100%; ...

__________________
8
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
11.06.2014, 10:21 2
а у <p> вы margin и padding убрали?

Добавлено через 41 секунду
И зачем вам вообще параграф?
0
0 / 0 / 0
Регистрация: 06.06.2014
Сообщений: 6
11.06.2014, 10:23  [ТС] 3
у <p> в данном случае не важно.

Дело в том, что такой косяк возникает только у браузеров FF, Opera и Chrome. В IE текст прекрасно поворачивается через: writing-mode:tb-rl;

В остальных браузерах поворачивается не текст а сам блок. Из-за этого возникает отступ.

Погуглил эту тему. Одним из решений предлагается Javascript`ом определять браузер, высчитывать размеры текста и двигать блок в зависимости от его размеров. Но как мне кажется это костыль.
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
11.06.2014, 11:17 4
А если просто избавиться от фиксированной ширины и высоты?
0
0 / 0 / 0
Регистрация: 06.06.2014
Сообщений: 6
11.06.2014, 11:18  [ТС] 5
Не помогает, можете сами попробовать.
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
11.06.2014, 11:35 6
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div style="
background-color:#CCC; 
position: fixed; 
top:50%; 
right:0px;
margin:0px;
padding:0px;
display:block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
height: auto; 
width: auto;
">
 
<p style="margin:0px;padding:0px;">Вертикальный текст12312314</p>
 
</div>
Chrome 32.x
0
Миниатюры
Как убрать отступ, если повернуть текст по вертикали  
0 / 0 / 0
Регистрация: 06.06.2014
Сообщений: 6
11.06.2014, 11:37  [ТС] 7
mixenik, и что это? Как был отступ справа, так и остался ))
0
Все элементарное - сложно
133 / 118 / 50
Регистрация: 14.04.2014
Сообщений: 509
11.06.2014, 11:58 8
Пардон, не так понял=)

Добавлено через 15 минут
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div style="background-color:#CCC;
position: fixed; 
top:50%; 
right:0px;
height: 340; 
width: 20;">
<div style="
margin: 0;
padding:0px;
display:block;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
height: 40; 
width: 0;
white-space: nowrap;

">
 
<p>Вертикальный текст</p>
 
</div></div>
Добавлено через 47 секунд
Но тоже костыль %)
0
0 / 0 / 0
Регистрация: 06.06.2014
Сообщений: 6
11.06.2014, 12:05  [ТС] 9
Да, костыль. Можно еще двигать сам блок, например, right:-100px;
Хотелось бы более универсальное решение.
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
11.06.2014, 12:05

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как убрать отступ и нижнюю границу
Ребята, как сделать, чтобы вкладки верхние были как на картинке, без нижней границы, и чтобы не...

Как убрать отступ между абзацами
&lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt;091340&lt;/TITLE&gt; &lt;/HEAD&gt; &lt;style&gt; body { background: url(2.jpg); }...

Как убрать 1пиксельный отступ в Table???
Народ нужна помошь...!!! Суть проблемы! Есть сайт который нужно сверстать. В двух правых ячейках...

Как убрать отступ в браузере на форме
Доброе утро, гуру экселя. Помогите решить вопрос. У меня есть простой макрос - отображающий на...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.