Mariik Сообщение 10/02/2011 21:44 Копия темы
Вопрос к верстальщикам Как вот это чудо меню сверстать? Чтобы выделенный пункт был как на скрине?
Пока ничего умнее, чем положить бэкграунд на хувер не придумал (( Но тогда вопрос как побороть скругленные уголки?

X-TRAZ Сообщение 10/02/2011 21:45 Копия темы
а css скруглить плюс стрелочку дивом?

5angel Сообщение 10/02/2011 21:45 Копия темы
Кроссбраузерно не скруглишь так.

X-TRAZ Сообщение 10/02/2011 21:46 Копия темы
черт)

ivan_ryabov Сообщение 10/02/2011 21:48 Копия темы
А чем не нравиться бекграунд на хувер?

5angel Сообщение 10/02/2011 21:49 Копия темы
Пихаю два спана "l" и "r" и радуюсь.

AnBioS Сообщение 10/02/2011 21:50 Копия темы
Бэкграунд на див хавер

ivan_ryabov Сообщение 10/02/2011 21:50 Копия темы
И уже бекграунд с скругленный сделать, или я что-то недопонял?

Mariik Сообщение 10/02/2011 21:53 Копия темы
Можно конечно, но тогда остается надеяться, что длина строки будет совпадать с размером бэкграунда.

5angel Сообщение 10/02/2011 21:57 Копия темы
Два спана в ссылку кладешь, и все хорошо.

ivan_ryabov Сообщение 10/02/2011 22:01 Копия темы
Точно, что то не подумал, тогда только jquery я б так сделал

5angel Сообщение 10/02/2011 22:02 Копия темы
Нафига скрипты пихать? (:

ivanna Сообщение 10/02/2011 22:03 Копия темы
border-radius, css3 gradient, css3 pie ( -pie-background ), для стрелочки отдельный див – position:absolute или relative, там как удобнее будет

ZvS Сообщение 10/02/2011 22:26 Копия темы
меню – список?

maksim000 Сообщение 10/02/2011 22:28 Копия темы
Таблица рулит XP

А сам я бы сделал по старинке – обёрткой. border-radius ещё не везде работает.

ivanna Сообщение 10/02/2011 22:34 Копия темы
border-radius работает везде при наличии pie.htc

kanda Сообщение 10/02/2011 22:37 Копия темы
+100500

5angel Сообщение 10/02/2011 22:39 Копия темы
Ооо. Не знал.

Mariik Сообщение 10/02/2011 23:16 Копия темы
Можно и списком.

5angel Сообщение 10/02/2011 23:28 Копия темы
Да ваще нужно, если что (:

ZvS Сообщение 10/02/2011 23:54 Копия темы
нужно списком, углы скруглить можно плагином corner для JQuery. Стрелку так же приклеивать яваскриптом.

kanda Сообщение 11/02/2011 00:27 Копия темы
зачем скрипты если это все можно сделать на чистом css и html?
они тут совсем ни к чему.

DelphinPRO Сообщение 11/02/2011 01:06 Копия темы
какие скрипты??!! какие нафиг скрипты, отдельные дивы для стрелочек, CSS3 ?!

делаете такую картинку
в нужном размере, разумеется.
допустим высота плашки без стрелочки – 30px, высота стрелочки – 5px
тогда:

пишете такой html 

<a href="#"><span><span>Сколь угодно длинная ссылка</span></span></a>

пишете такой css

a {
      display:inline-block;
      padding-bottom:5px; /*высота стрелочки*/
}
a span {display:inline-block;}
a span span {height:30px;line-height:30px;}

a:hover{
     background:url(image.gif) no-repeat 50% 100%;    /* для стрелочки */
}

a:hover span {
    background: #656565 url(image.gif) no-repeat; /* левая сторона плашки, цвет фона поставить нужный*/
}

a:hover span span {
    background: url(image.gif) no-repeat 100% -30px; /* правая сторона плашки, смещение – равное высоте плашки */
}

добавить классы по вкусу.

профит.


ps. CSS3 – это конечно хорошо, проверенный способ с беком, в данном случае, проще и надежнее :)

maksim000 Сообщение 11/02/2011 06:19 Копия темы
:) похоже, я немного отстал от жизни. Хотел написать, что не только ие может быть старым, но посмотрел статистику...

Mariik Сообщение 11/02/2011 11:26 Копия темы
Спасибо. Решение очень изящное, но меня смущает хувер на спан. Что-то мне кажется, IE испортит всю красоту

DelphinPRO Сообщение 11/02/2011 11:35 Копия темы
где вы увидели хувер у спана?

псевдокласс применяется к ссылке, в IE все норм будет в этом плане. другое дело он не понимает display:inline-block, но это легко решаемо
{
display:inline;
zoom:1;
}

Mariik Сообщение 11/02/2011 11:37 Копия темы
Все, понял идею. Кстати, сколько у Вас верстка стоит? Можно мне стоимость в личку?