вёрстка меню

Старый mweb

Модератор: [mweb team]

вёрстка меню

Сообщение Skay Вт ноя 25, 2008 11:22

как бы заверстать это меню? чтобы тянулись части под ссылками, остальные были фиксированного размера. Можно описать идею словами, код напишу я сам)

сейчас наброски такие вот:

Код: Выделить всё
   <div id="menu">
      <div id="menu_l"></div>

      <ul>
         <li><a href="#" class="m">Главная</a></li>
         <li><a href="#" class="m">О фонде</a></li>
         <li><a href="#" class="m">Страхование</a></li>
         <li><a href="#" class="m">Учреждения</a></li>
         <li><a href="#" class="m">Пресс-центр</a></li>
      </ul>
      <div id="menu_r"></div>
   </div>



Код: Выделить всё
div#container #menu {
   height: 28px;
   background: url('/img/menu_bg.png') repeat-x;
   border-bottom: 2px solid #669900;
}
div#container #menu_l {
   width: 11px;
   height: 30px;
   float: left;
   background: url('/img/menu_l.png');
}
div#container #menu_r {
   width: 11px;
   height: 30px;
   float: right;
   background: url('/img/menu_r.png');}

div#container #menu ul {
   width: 80%;
   margin: 0 auto;
   padding: 0;
   list-style-type:none;
   background: transparent;
   overflow: hidden;
}
div#container #menu ul li {
   width: 20%;
   height: 28px;
   padding-top: 5px;
   float: left;
   text-align: center;
}


/img/menu_bg.png - зеленый фон под меню
/img/menu_l.png, /img/menu_l.png - аппендиксы по бокам )
Вложения
menu.png
menu.png (1.11 Кб) Просмотров: 16337
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение Alkeeper Вт ноя 25, 2008 22:31

Ну дорога кабэ верная, остается по идее только хаки расставить =)
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: вёрстка меню

Сообщение kost Ср ноя 26, 2008 18:53

Дать пизды дизайнеру, чтобы перестал думать таблицами.

У буржуев меню такого вида никто не делает.
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Re: вёрстка меню

Сообщение kost Ср ноя 26, 2008 18:55

А что значит "части под ссылками"?
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Re: вёрстка меню

Сообщение Alkeeper Ср ноя 26, 2008 19:06

kost писал(а):Дать пизды дизайнеру, чтобы перестал думать таблицами.

Вот, очень правильный совет =)
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: вёрстка меню

Сообщение Skay Чт ноя 27, 2008 0:41

2kost: ораньжевыми прямоугольниками выделены части фиксированного размера, синим прямоугольником растягивающаяся часть.

2all: откуда в ie7 мог взяться отступ в левом меню? все маргины, пэддинги обнулены... в firefox3 отображается хорошо.


исходники прилагаю...
Вложения
tfoms.zip
(43.07 Кб) Скачиваний: 462
tfoms.jpg
tfoms.jpg (21.41 Кб) Просмотров: 16370
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение Padonak Чт ноя 27, 2008 9:39

Скай рекомендуйу посмотреть это в Опере при 1024х786
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: вёрстка меню

Сообщение Padonak Чт ноя 27, 2008 9:45

Alkeeper писал(а):
kost писал(а):Дать пизды дизайнеру, чтобы перестал думать таблицами.

Вот, очень правильный совет =)


думойу надо мыслить более родекально и <<Дать пизды дизайнеру>> принципиально независимо от способа верстке -13-

пээс Кост иной раз просто конкретно атжыгаед Изображение
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: вёрстка меню

Сообщение Skay Чт ноя 27, 2008 11:13

вот последний вариант верстки.. в опере всё окей...
Вложения
tfoms_ie6fix.rar
(43.89 Кб) Скачиваний: 451
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение kost Чт ноя 27, 2008 13:09

Skay, выложи где-нибудь в интернет и дай ссылку.
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Re: вёрстка меню

Сообщение Muerto Сб ноя 29, 2008 14:46

Последнему LI сделай 19% и не парься. Потом придумаем что-нибудь получше.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: вёрстка меню

Сообщение Skay Вс ноя 30, 2008 23:21

kost: http://support.mweb.ru/tfoms/


Muerto: так и сделал, но это не решение, визуально заметно разницу в ширине )) это ладно, но есть еще одна проблема, в отступах сверху-снизу (см. скриншот выше)... вылезают эти отступы только в IE, не понимаю откуда... в блоках с полосками точек пробовал ставить font-size:1px, не помогает, видимо, причина в чем-то другом...
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение Skay Вс ноя 30, 2008 23:26

и еще одна проблема с моделированием min-width в ie6, ставлю экспрешен:
Код: Выделить всё
width: expression(document.body.clientWidth < 900 ? "900px" : "95%");


когда ширина меньше 900, браузер виснет...
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение Muerto Пн дек 01, 2008 0:30

Skay
line-height:0 ещё поставь.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: вёрстка меню

Сообщение Alkeeper Пн дек 01, 2008 7:31

Skay писал(а):когда ширина меньше 900, браузер виснет...

Код: Выделить всё
width: expression(document.body.clientWidth < 900 ? "900px" : "auto");
padding: 0 2.5em;
/*
    с единицами поиграй, от процентов на марджинах и паддингах
    у шестерки башню сносит.
*/
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: вёрстка меню

Сообщение Padonak Пн дек 01, 2008 9:43

а чо в этих икспрешенах нельзя относительно выражать типакаг

parseInt(document.body.clientWidth*на сколько нужно) + "px"?
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: вёрстка меню

Сообщение Muerto Пн дек 01, 2008 11:29

2:Padonak Можно, почему нет.
2:Skay Да, может шестерка виснуть при таком раскладе, сам сталкивался. Пришлось заместо экспрешна вешать тоже самое, но скриптом на онЛоад и онРесайз.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: вёрстка меню

Сообщение kost Пн дек 01, 2008 13:37

Skay, так и задумано?

2008-12-01_133238.png
2008-12-01_133238.png (81.88 Кб) Просмотров: 16289
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Re: вёрстка меню

Сообщение kost Пн дек 01, 2008 13:41

Skay писал(а):но есть еще одна проблема, в отступах сверху-снизу (см. скриншот выше)... вылезают эти отступы только в IE, не понимаю откуда... в блоках с полосками точек пробовал ставить font-size:1px, не помогает, видимо, причина в чем-то другом...


Эта проблема решилась, как я понял?

2008-12-01_133901.png
2008-12-01_133901.png (50.51 Кб) Просмотров: 16343
Аватара пользователя
kost
Заядлый `курильщик`
 
Сообщения: 701
Зарегистрирован: Ср апр 16, 2003 16:56
Откуда: Санкт-Петербург

Re: вёрстка меню

Сообщение Skay Пн дек 01, 2008 14:14

kost
кодировка там UTF-8, не лежит htaccess с настройкой, а по-умолчанию на сервере cp1251, поэтому в браузере ручками надо ставить)

Проблема с меню еще не решилась, если посмотришь код, там последняя ячейка меню 19% по ширине... нужно, чтобы ширина у всех ячеек была одинакова.
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01

Re: вёрстка меню

Сообщение Alkeeper Пн дек 01, 2008 14:28

Skay писал(а):кодировка там UTF-8

BOM я бы убрал )
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: вёрстка меню

Сообщение Padonak Пн дек 01, 2008 16:07

kost писал(а):Skay, так и задумано?
иврит хуле.. -02-
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Философ-разговорник
 
Сообщения: 3872
Зарегистрирован: Вт дек 13, 2005 3:23
Откуда: Ростов-на-Дону

Re: вёрстка меню

Сообщение Alkeeper Пн дек 01, 2008 16:18

Padonak писал(а):иврит хуле.. -02-

Послание внеземным иноплонетянам =))0
80 лет в интернете.
Аватара пользователя
Alkeeper
Экс-курильщик
 
Сообщения: 4183
Зарегистрирован: Вт ноя 13, 2001 1:01
Откуда: mweb

Re: вёрстка меню

Сообщение Muerto Пн дек 01, 2008 18:57

Skay
А попробуй ка последней ссылочке ещё padding-left: 1%;margin-right:-1% поставить - может прокатит?
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3597
Зарегистрирован: Пн окт 11, 2004 19:09
Откуда: Москва

Re: вёрстка меню

Сообщение Skay Пн дек 01, 2008 20:20

Alkeeper
его убираю, но eclipse постоянно добавляет )
money + sleep = awesome
Аватара пользователя
Skay
Хронический Астматик
 
Сообщения: 1373
Зарегистрирован: Вс мар 10, 2002 1:01


Вернуться в Архив

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 19

cron