 Ширина пунктов меню, сделать более узкими |
  |
| biz |
 22.01.09 - 17:48
Сообщение
#1
|
|
Advanced Member  Группа: Members Сообщений: 67 Регистрация: 18.09.05 Пользователь №: 1,530  |
Добрый день, господа!
Нашел нормальный шаблон, начал ковырять его, во всем разобрался, кроме одного. Пункты меню в шаблоне не большие, и если текст длинный, выходит лажа... не помещается в одну ячейку, а переносится фиг знает куда. Рисунок 1 - оригинал, изначальный вариант Рисунок 2 - то, что мне удалось сделать, изменив line-height: 16px. (было 40) Вопрос - как зделать текст вертикально по центру в каждой ячейки + убрать сдвиг влево (новая строчка ячейки вынесена влево почему-то. это параметр text-indent: 40px; ) .rok-content-rotator h2 { width: 213px; height: 34px; font-size: 100%; [b] line-height: 16px;[/b] text-indent: 40px; padding: 0; margin: 0 7px 0 7px; z-index: 1; background: url(../images/rotator-tab.png) 18px 0 no-repeat; outline: none; } .rok-content-rotator h2 a { display: block; z-index: 3; position: absolute; width: 213px; color: #666; outline: none; }   |
   |
 
|
| Anch |
23.01.09 - 12:52
Сообщение
#2
|
 Gorsk.net Studio Группа: Admin Сообщений: 164 Регистрация: 25.02.05 Из: Горск Пользователь №: 5 |
Чтобы отодвинуть весь текст влево, достаточно убрать text-indent, который отодвигает только первую строку и прописать такой же отступ слева при помощи padding.
Для вертикального выравнивания пунктов меню попробуйте добавить следующие строки для h2: display: table-cell; vertical-align: middle; А line-height, который вы пытались использовать для решения проблемы, задаёт всего лишь межстрочный интервал (интерлиньяж). -------------------- Сижу, никого не трогаю, примус починяю ;)
|
|
|
|
| biz |
23.01.09 - 13:41
Сообщение
#3
|
|
Advanced Member Группа: Members Сообщений: 67 Регистрация: 18.09.05 Пользователь №: 1,530 |
(Anch @ 23.01.09 - 13:52)  Чтобы отодвинуть весь текст влево, достаточно убрать text-indent, который отодвигает только первую строку и прописать такой же отступ слева при помощи padding. Для вертикального выравнивания пунктов меню попробуйте добавить следующие строки для h2: display: table-cell; vertical-align: middle; А line-height, который вы пытались использовать для решения проблемы, задаёт всего лишь межстрочный интервал (интерлиньяж). как-то странно вышло, в Opere, убрав text-indent, действитело убрался интервал, а в IE - ничего не изменилось, как будто этот тег только оперой понимается Но добавив display и vertical-align, ничего не изменилось  . Все осталось как на первом рисунке...Исходник прилагаю .rok-content-rotator h2 { display: table-cell; vertical-align: middle; width: 213px; height: 34px; font-size: 100%; line-height: 36px; /*text-indent: 40px;*/ padding: 0; margin: 0 7px 0 7px; z-index: 1; background: url(../images/rotator-tab.png) 18px 0 no-repeat; outline: none; } .rok-content-rotator h2 a { display: block; z-index: 3; position: absolute; width: 213px; color: #666; outline: none; } Сообщение отредактировал biz - 23.01.09 - 13:44 |
|
|
|
| Anch |
23.01.09 - 14:58
Сообщение
#4
|
|
Gorsk.net Studio Группа: Admin Сообщений: 164 Регистрация: 25.02.05 Из: Горск Пользователь №: 5 |
В ИЕ, возможно, просто надо обновиться с зажатым Ctrl.
А где, собсно, padding для отступа слева и зачем такой огромный интерлиньяж? Я ещё раз повторю, что line-height задаёт только расстояние между строками. Возможно, проще будет переверстать меню в таблицу, т.к. ИЕ не понимает display: table-cell и выравнивать по вертикали всё равно не будет. В Mozilla и Opera у меня всё отображается как надо. -------------------- Сижу, никого не трогаю, примус починяю ;)
|
|
|
|
| biz |
07.02.09 - 23:16
Сообщение
#5
|
|
Advanced Member Группа: Members Сообщений: 67 Регистрация: 18.09.05 Пользователь №: 1,530 |
Ну хоть убейте, ничего не могу сделать, не выходит.
Ещё раз по пунктам меню: Ниже код с файла template_css.css: /* @group Mainmenu */ a.mainlevel { display: block; line-height: 14px; text-indent: 26px; height: 32px; overflow: hidden; font-size: 100%; } a#active_menu.mainlevel { background-position: 0 -64px; padding-left: 12px; } a.mainlevel:hover { background-position: 0 -32px; } a.sublevel { text-decoration: none; line-height: 25px; padding-left: 10px; font-size: 120%; line-height: 34px; } a.mainlevel:hover, a.sublevel:hover { text-decoration: none; } /* @end */ C таким кодом выходит следующие:  По рисунку - как сделать, что бы пункты меню Home, Features и другие были по центру (по вертикали), а 1-й пункт меню был так, как есть. + убрать интервал в 1-м пункте (абзац) что в коде подправить? Заранее благодарен. |
|
|
|
|
| Lo-Fi Version | Time is now: 22.05.12 - 01:59 |
P0wered by
© 2012 IPS, Inc.