Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> выравнивание пунктов меню по центру и по высоте 
:(
    Опции темы
slutsker
Дата 7.2.2013, 16:59 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



Добрый день, 
уперся в тупик при верстке меню

Код

<div id="menu">
 <ul>
    <li><a>Пункт 1</a></li>
    <li><a>Очень длинный пункт</a></li>
    <li><a>пункт номер 3</a></li>
    <li><a>четвертый пункт</a></li>
 </ul>
</div>


под меню отведено фиксированное расстояние 720px
высота пунктов меню фиксированная 50px

требуется, 
  • чтобы пункты меню распределились по ширине блока <div id="menu"></div>
  • при этому некоторые пункты меню короткие, а те что длинные нужно вывести в несколько строчек
  • текст в меню по горизонтали выровнен по центру


Это сообщение отредактировал(а) slutsker - 8.2.2013, 07:17
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
Aliance
Дата 7.2.2013, 17:11 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137



Цитата(slutsker @  7.2.2013,  17:59 Найти цитируемый пост)
чтобы пункты меню распределились по ширине блока <div id="menu"></div>

Если кол-во пунктов фиксировано, можно поставить width: 25% для 4ех, 20% для 5ти и т.д.

Цитата(slutsker @  7.2.2013,  17:59 Найти цитируемый пост)
текст в меню по горизонтали выровнен по центру

Код

display: inline-block;
vertical-align: middle

поможет?
PM MAIL WWW ICQ Skype   Вверх
slutsker
Дата 8.2.2013, 07:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



Aliance, 
хотелось бы как раз без указания фиксированной ширины

display: inline-block;
vertical-align: middle;

применял но не пока не помогло

какой должен быть display у #menu li?
тот CSS, что вы привели ведь относится к #menu li a?

хотелось бы вот так
user posted image



Это сообщение отредактировал(а) slutsker - 8.2.2013, 07:45
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
ksnk
Дата 8.2.2013, 07:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Хорошее время вспомнить о верстке таблицей  smile 

Точнее о ее современной ре инкарнации

Код

#menu ul {
...
display: table;
height:100%;
}

#menu ul>li {
...
display : table-cell;
}



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
slutsker
Дата 8.2.2013, 07:55 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



ksnk, 
приведите, пожалуйста полный, CSS
в котором бы фигурировали выравнивание по высоте и ширине
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
ksnk
Дата 8.2.2013, 09:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



http://jsfiddle.net/DdreX/

Возможно, там что-то лишнее в css, выковыривал из одного из проектов. В оригинале это - выпадающая менюшка.




--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
slutsker
Дата 8.2.2013, 09:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



спасибо, 
беспокоит  display: table-cell; оно в IE 6/7 будет отображаться? 
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
ksnk
Дата 8.2.2013, 09:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Цитата(slutsker @  8.2.2013,  09:26 Найти цитируемый пост)
беспокоит  display: table-cell; оно в IE 6/7 будет отображаться?  

нет.
Для IE6-7 проще верстать таблицей ;)



--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
slutsker
Дата 8.2.2013, 10:23 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



то есть сделать так?
Код

<table id="menu">
 <tr>
    <td><a>Пункт 1</a></td>
    <td><a>Очень длинный пункт</a></td>
    <td><a>пункт номер 3</a></td>
    <td><a>четвертый пункт</a></td>
 </tr>
</table>

это даст кроссбраузерность?

Это сообщение отредактировал(а) slutsker - 8.2.2013, 10:23
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
Aliance
Дата 8.2.2013, 10:30 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


I ♥ <script>
****


Профиль
Группа: Модератор
Сообщений: 6418
Регистрация: 2.8.2004
Где: spb

Репутация: 2
Всего: 137



Какой ИЕ 6/7, зачем? О боже, давайте еще 4ый поддерживать станем.
PM MAIL WWW ICQ Skype   Вверх
slutsker
Дата 8.2.2013, 10:35 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


Профиль
Группа: Участник
Сообщений: 177
Регистрация: 24.5.2007

Репутация: нет
Всего: нет



я бы сам рад, но сайтом будут пользоваться люди из регионов модемного интернета, 15 дюймовых ЭЛТ мониторов - подозреваю, что у них не будет хрома(
--------------------
Compiling...project.cppLinking...Embedding manifest...========== Build: 1 succeeded, 0 failed, 0 up-to-date, 0 skipped ==========
PM MAIL   Вверх
ksnk
Дата 8.2.2013, 11:02 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прохожий
****


Профиль
Группа: Комодератор
Сообщений: 6855
Регистрация: 13.4.2007
Где: СПб

Репутация: 48
Всего: 386



Цитата(slutsker @  8.2.2013,  10:23 Найти цитируемый пост)
это даст кроссбраузерность?

Да.  Если не нужно развивать это все в выпадающее меню, то не так уж и страшно.

Однако для перехода к выпадающему меню придется мастерить неслабые служебные конструкции - вставляемые в ячейки абсолютно позиционируемые таблицы.

В принятой сейчас традиции строительства menu, оно делается UL-LI списком, которые выводится довольно просто из рекурсивного php массива. Это семантично. В добавок , удобно переводится в адаптивный дизайн. Выводить `табличную IE6-7`  конструкцию может оказаться несколько сложнее, не говоря о ее броузерной трансформации.


--------------------
Человеку свойственно ошибаться, программисту свойственно ошибаться профессионально ! user posted image
PM MAIL WWW Skype   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0530 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.