mistio Сообщение 29/12/2011 19:06 Копия темы
Помощи пост HTML +CSS (решено) Помогите найти решение...
Делаю  менюшку,  не могу найти решение как  грамотно прикрутить хвостик ..
перепробовал  кучу способов  ничего придумать уже не могу...  всегда получается  2й hover   примерно так....

a {контейнер, фоном стоит хвостик}
li {контейнер, цветной фон и загругления}

a:hover  {
               background: url(m1.png)  bottom center no-repeat;
               }

li:hover {
border-radius: 10px;
background: #000;
}

<a href="#">

Home

</a>

Надо  как-то избавится от 2го hover -а потому что это не есть гуд!  получается пункт меню делится на 2ве части, а надо чтоб пункт меню был един...
Друзья подскажите как грамотно это сделать ?  может подобное кто уже делал ? 

PS: все делаю исключительно  для себя.

annamanana Сообщение 29/12/2011 19:07 Копия темы
29 число,отдыхать пора,трудоголики вы наши))

mistio Сообщение 29/12/2011 19:08 Копия темы
Ну я так отдыхаю,  решил свой сайт переделать...пока время есть :)

Pixat Сообщение 29/12/2011 19:09 Копия темы
а закругления через css обязательно делать? или можно без css обойтись?

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

mistio Сообщение 29/12/2011 19:12 Копия темы
Пункты  меню  могут быть  разные  по длине, я именно так задумал... если бы пункты меню были одного размера (вернее контейнеры) я бы просто нарисовал бы кнопку и положил бы ее фоном....
Поэтому я  решил  юзануть border-radius: а вот как этот хвостик прикрутить грамотно я так и не понял, не нашел решения...

annamanana Сообщение 29/12/2011 19:14 Копия темы
а я вот статьи хочу по продажам до 31 добить

rim89 Сообщение 29/12/2011 19:14 Копия темы
sprite`ами

mistio Сообщение 29/12/2011 19:16 Копия темы
===Пункты  меню  могут быть  разные  по длине===   а хвостик  всегда должен быть по центру!

rim89 Сообщение 29/12/2011 19:27 Копия темы
По мне так спратами сделать и нормально будет.
Других способов без извращений с JS в голову не приходит

painteranimator Сообщение 29/12/2011 19:28 Копия темы
ну так в чем проблемма?

вставь в a "span" и тегу span дай отступы а в ссылке убери  {displau:block; background:url (траляля) bottom center; }

как то так

mistio Сообщение 29/12/2011 19:36 Копия темы
Говорю  же,  проблема  не в том как сформировать  пункт меню... его можно как угодно 

<a href="#"><span>Link</span></a>

<a href="#">Link</a>

итд...

Проблема кроется в hover -e...

painteranimator Сообщение 29/12/2011 19:36 Копия темы
а не не так
display не надо убирать

в общем погугли

painteranimator Сообщение 29/12/2011 19:37 Копия темы
ну и где же там проблемма

пару минут подожди

я постараюсь толково изложить

mistio Сообщение 29/12/2011 19:38 Копия темы
Ага спасибо ! за совет :))   пол дня  уже гуглил....

mistio Сообщение 29/12/2011 19:45 Копия темы
вот   подробнее нарисовал   в чем проблема...  2й hover

painteranimator Сообщение 29/12/2011 19:45 Копия темы
значит запрос не толково сформулировал

border radius сразу убирай

<ли><a><span>траляля</span></a></ли> 

li{height:20px; background:url(левая часть) no-repeat; padding-left:размер левого куска напр 10px; line-height:20px; }
a{display:block;  background:url(правая часть) right no-repeat; }
span{display:block; padding-right:10px;   }
span:hover{ background:url(нижняячасть) bottom center no-repeat;}

надеюсь в общем понятен ход мысли

painteranimator Сообщение 29/12/2011 19:45 Копия темы
5минут
рисую

mistio Сообщение 29/12/2011 19:48 Копия темы
А нужно чтоб  блок был един!

grawyus Сообщение 29/12/2011 19:51 Копия темы
тут явно без склейки жаваскриптом не обойтись

painteranimator Сообщение 29/12/2011 19:53 Копия темы
правую часть по длиннее сделать, что бы она заезжала и не рвалась

mistio Сообщение 29/12/2011 19:57 Копия темы
тоесть ты всю  конструкцию вложил между  тегами:  <A>     </A>   получается... ?
а при чем тут вообще  20 PX? 

у меня по задумке  вокруг  слова (ссылке)   PADDING идет везде 10px

painteranimator Сообщение 29/12/2011 19:58 Копия темы
между ЛИ
ну и так далее

на самом деле все до безобразия просто, главное понять

mistio Сообщение 29/12/2011 20:01 Копия темы
Пока не понимаю конструкцию,  можеш тут  как пример HTML написать, я быстрее глядя на код пойму.

painteranimator Сообщение 29/12/2011 20:03 Копия темы
сейчас 10мин. я на сервере сделаю одну ссылочку
посмотришь исходник

xbost Сообщение 29/12/2011 20:10 Копия темы
выбрать дочерний элемент при ховере на родительский.

li:hover > a { стиль a при наведении на li }

вообще непонятно вопрос написан

painteranimator Сообщение 29/12/2011 20:17 Копия темы
примерно так
на отступах и т.д не зацыкливался, так что главное понять

rdgroup.org.ua/tra/index.html

mistio Сообщение 29/12/2011 20:19 Копия темы
Непонял,   пункт меню состоит из 2x блоков , 
к примеру  <a href="#"><span>Link</span></a> 

Вопрос как сделать на них ховер без раздвоения ?

painteranimator Сообщение 29/12/2011 20:20 Копия темы
а если использовать закругленные углы через css
тогда просто ссылке дать стиль с уголком
по центру и снизу -высота его


в общем способов много

mistio Сообщение 29/12/2011 20:22 Копия темы
ты наверно меня непонял или я фигово объяснил,   хвостик должен быть всегда!

painteranimator Сообщение 29/12/2011 20:23 Копия темы
теперь всегда

painteranimator Сообщение 29/12/2011 20:24 Копия темы
дать на hover
изображения другого цвета и все дела

mistio Сообщение 29/12/2011 20:25 Копия темы
а если вставить туда разные  по длине слова?  и ховера кстати нет...
и вот еще что:  зачем  размеры ? li{ height:98px; ?

painteranimator Сообщение 29/12/2011 20:28 Копия темы
ну смотри

painteranimator Сообщение 29/12/2011 20:28 Копия темы
в общем я думаю донес некую мысль

xbost Сообщение 29/12/2011 20:30 Копия темы
как-то так, менять два стиля при одном ховере: jsfiddle.net/NSHbW/

xbost Сообщение 29/12/2011 20:34 Копия темы
ну или конкретно для а > span: jsfiddle.net/NSHbW/1/

mistio Сообщение 29/12/2011 20:37 Копия темы
А эта  фишка  из CSS3  чтоль ?   я просто первый раз  вижу такое...

mistio Сообщение 29/12/2011 20:38 Копия темы
Вроде становится понятно!  спасибо  за помощь.

xbost Сообщение 29/12/2011 20:40 Копия темы
неа, 2.

просто люди обычно забывают, что у псевдоклассов (:hover) тоже вполне можно дочерние элементы выбирать.
так, например, выпадающие меню на чистом CSS делают. :3

mistio Сообщение 29/12/2011 20:44 Копия темы
Странно что я это нигде не видел и не применял :(   кстати решение нравится!  более короткое и изящнее...

mistio Сообщение 29/12/2011 21:02 Копия темы
Вообщем  спасибо всем за помощь!!   очень признателен... буду разбираться.

mistio Сообщение 29/12/2011 21:13 Копия темы
Вообщем вот результат: www.artmakow.com/menu   что я хотел добиться!   еще раз спасибо всем!

painteranimator Сообщение 29/12/2011 21:25 Копия темы
вот только в IE углы не круглые

все таки лучше не делать эти хаки, не кросбраузерно

xbost Сообщение 29/12/2011 21:51 Копия темы
круглые углы это не хак ни разу (скорее подкладывание картиночек — хак). тем более в ИЕ9 их видно.

больше тут хаков нет.

painteranimator Сообщение 29/12/2011 22:57 Копия темы
ну тогда пройдитесь по wc3
увидите результат

такие вещи пока являются хаками, пока не признаны стандартами

изображениями лучше + сделать фон под ними в сss
тогда все браузеры будут отображать корректно

xbost Сообщение 29/12/2011 23:27 Копия темы
www.w3.org/TR/css3-backgr...
я не говорил, что это уже стандарт. но и драфт — это не хак.

да и вообще вопрос был не про то, как лучше углы закруглить :Р 
может автору нафиг не упали пользователи ИЕ < 9.

maksim000 Сообщение 30/12/2011 06:12 Копия темы
Фишка в том, что кто-то не читал спецификацию CSS 2 и не знает про большую часть селекторов.
Причём > тут совершенно не обязательно нужна, потому что не будет работать в ие6.