Меню при наведении с тенью. КАК?

Вид для печати

30.03.2007, 12:46
DELPHIna

Еть горизонтальное меню основным фоном. При наведении мышью и при активном пункте фон становиться белым + слева-сверху и справа по краям градиентная тень серая допустим.

Какое бы решение Вы предложили бы?
что то с идеями никак....либо слишком громоздко думается. К чему возможно привязать картинки тени? или как это вообще делается на Css?

Цитата:

<div id="menu">
<ul id="navlist">[*][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][*][Only registered and activated users can see links. Click Here To Register...][/list]

[/quote]

P.S. и именно только когда ссылка a:hover и a:active тогда тень есть.
30.03.2007, 14:07
Aykroyd

Никаких проблем. )
Просто вместо фонового цвета вставляем в CSS фоновые изображения для ссылок...
30.03.2007, 14:33
DELPHIna

Aykroyd, так получиться только, если нам известно размер пунктов меню....

а если неизвестен???

в меню может быть и пункт: "Контакты" и может быть длинная фраза "Обслуживание техники ККМ" например...

нужно чтобы не привязывался фон к размеру пункта меню!
30.03.2007, 14:43
Aykroyd

Либо уравниваем по ширине все пункты, либо для каждого пункта – индивидуальный кусок фона. Оба варианта приемлемы.
30.03.2007, 14:45
DELPHIna

**либо для каждого пункта – индивидуальный кусок фона*** ну как же я узнаю заранее какого размера будет пункт меню???

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

И всё таки...есть ли возможность сделать именно тени слева - сверху-справа к ссылке которую нажимают и нажали уже???
31.03.2007, 16:37
Zigzag

Ден Седерхольм в своей книге хорошо описывает ситуацию, когда вы не знаете конечный размер блока, но при этом вам нужно обязательно впихнуть в него какой-то графический элемент. В 2х словах, делайте этот элемент больше и просто скрывайте часть его.
31.03.2007, 23:22
DELPHIna

Zigzag ,..я где то читала об этом...но уже и не вспомниь...есть хоть какая то ссылка на пример или статью. А может что у Вас в запаснике есть???
01.04.2007, 00:07
Zigzag

[Only registered and activated users can see links. Click Here To Register...]
вот здесь в меню я использовал этот прием, хотя пример не самый удачный, т.к. меню очень простое, но для примера, думаю, сойдет
01.04.2007, 00:22
Aykroyd

Пример весьма удачный. ) И меню симпатичное. ))
Но видишь, Паш, какая тут заковыка – тень нужна слева-сверху-справа. А при неизвестной ширине блока это мне кажется невозможным... Может быть ошибаюсь... )
01.04.2007, 01:42
Zigzag

тень сразу в 3х направлениях??? может стоит дизайнеру отрубить руки, а потом заставить его на макете указать источник света и выставить таки тень только по двум направлениям?
02.04.2007, 09:48
DELPHIna

Zigzag ...да...пример Вы дали, да не тот.... Это не моё дело руки дизайнеру отрубать [Only registered and activated users can see links. Click Here To Register...] Мне дали, я должна нарезать..... Вот если всё таки есть такое заддание....как же кго сделать то? Неужели нет идей никаких??? А?
02.04.2007, 12:56
Aykroyd

К нам посылайте – мы отрубим... )
Мало ли что Вам там дали. Более того, то, что Вам дали, вряд ли реализуемо и при табличной модели. Вы над этим не задумывались? [Only registered and activated users can see links. Click Here To Register...]
02.04.2007, 13:47
DELPHIna

Aykroyd при табличной вёрстке это элементарно....я так уже 100 раз делала....может ячто не так объясняю...см. рисунок ниже:

там где квадрат красный...это уголок таблицы(может и не быть...обычно если он загнутый какой ...его так делают)
02.04.2007, 13:58
Aykroyd

Ага, замечательно. Очень бы я хотел посмотреть, как все эти ячейки будут менять содержимое при наведении курсора мыши на основную резиновую область... [Only registered and activated users can see links. Click Here To Register...]
02.04.2007, 14:18
DELPHIna

Aykroyd.... что то Вы меня совсем в тупик ввели... :crazy:

вот смотрите ниже...я прикрепляю картинки и файлик.... я вот про такое говорю....вот такое мне нужно только на div сделать:

Код:

<body bgcolor="f3e8a6"> <table width="50%" border="0" cellspacing="0" cellpadding="0"> *<tr> * *<td height="2" colspan="3" *style="background: url(menu_top.gif) *top repeat-x;"></td> *</tr> *<tr> * *<td width="5" *style="background: url(menu_left.gif) *top left repeat-y;"></td> * *<td width="100%" align="center" bgcolor="FFFFFF">текст </td> * *<td width="5" *style="background: url(menu_right.gif) *top right repeat-y;"></td> *</tr> *<tr> * *<td colspan="3" ></td> *</tr> </table> </body>

вот пункт меню с тенью на таблицах
02.04.2007, 14:35
Aykroyd

Цитата:

Originally posted by DELPHIna@Apr 2 2007, 14:18
Aykroyd.... что то Вы меня совсем в тупик ввели... :crazy:
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Это моя специальность. )))

Цитирую самый первый пост:
<div class='quotetop'>Цитата</div>

Цитата:

При наведении мышью и при активном пункте фон становиться белым + слева-сверху и справа по краям градиентная тень серая допустим.[/b]

Это как понимать? Ладно...

Не знаю. Если только поверху[*] – верхнюю тень, а по бокам – два вложенных дива с абсолютным позиционированием... Но это великое извращение, на которое лично я бы никогда не пошел, послав дизайнера куда-подальше...
02.04.2007, 18:43
Scorched.dn.ua

насчет отрубать руки дизайнеру: все правильно, имхо лучше сделать таблицами чем не сделать вобще никак. не вижу смысла при решении этой задачи избегать использования таблиц, заменяя их на дивы. красивее верстка от этого уж точно не станет.
02.04.2007, 18:49
Aykroyd

Цитата:

Originally posted by Scorched.dn.ua@Apr 2 2007, 18:43
не вижу смысла при решении этой задачи избегать использования таблиц, заменяя их на дивы. красивее верстка от этого уж точно не станет.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Если по Вашему мнению блочная модель приносит плоды только в качестве красивой верстки, то несомненно...
02.04.2007, 18:50
Scorched.dn.ua

заменив таблицы на дивы в данном случае мы не получим выгоды ни в каком плане
02.04.2007, 19:02
Aykroyd

Честно говоря, не ожидал... )

Как насчет версий для печати, PDA, брайля? Искусственного интеллекта, способного отличить ячейку с навигацией от ячейки с основным содержимым, пока еще не изобрели...
02.04.2007, 19:36
agat

Можете прикрепить к теме кусочек меню с требуемой тенью? Чтобы было наглядно видно, к чему идём.
02.04.2007, 19:53
Scorched.dn.ua

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

повторяю еще раз, абсолютно не важно какой именно тег мы будем использовать не по назначению - таблицу или кучку дивов со списком. именно этим я руководствовался, когда говорил, что "заменив таблицы на дивы в данном случае мы не получим выгоды ни в каком плане", в чем именно ты не согласен?
02.04.2007, 20:08
Aykroyd

Цитата:

Originally posted by Scorched.dn.ua@Apr 2 2007, 19:53
искусственного интеллекта способного отличить список с информативными пунктами от предлагаемого тобой списка состоящего из верхней тени и элемента навигации тоже пока не изобрели.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Еле переварил...
В описываемом тобой искусственном интеллекте нет никакого смысла...
Потому как предлагаемый мной список (пусть даже с несколькими пустыми дивами) – самый что ни на есть информативный сам по себе...

Цитата:

Originally posted by Scorched.dn.ua@Apr 2 2007, 19:53
повторяю еще раз, абсолютно не важно какой именно тег мы будем использовать не по назначению - таблицу или кучку дивов со списком. именно этим я руководствовался, когда говорил, что "заменив таблицы на дивы в данном случае мы не получим выгоды ни в каком плане", в чем именно ты не согласен?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Пустой див – это меньшее зло...
02.04.2007, 20:57
Scorched.dn.ua

а что тут переваривать? очевидно, что список в предлагаемом тобой варианте будет использован не по назначению, что совсем не способствует автоматизированной обработке такой страницы. с не к месту используемой таблицей аналогичные проблемы - ни больше ни меньше.

или вы полагаете что тэг table чем-то "хуже" тэгов ul или div с точки зрения семантической верстки?
02.04.2007, 22:30
agat

Хватит флейма!

Scorched.dn.ua, если смотреть с точки зрения семантической вёрстки, то ДА, табле хуже списка, когда речь идёт о навигации. И список хуже таблицы, если речь идёт о табличных данных. Есть такие люди, которые и таблицы списками заменяют, но это крайности.
03.04.2007, 09:38
DELPHIna

agat - все тени(верх - право и лево) прикреплены в примере, который я выложила на таблицах...посмотрите.

Кстати дискуссия какая то вышла у Вас здесь философская [Only registered and activated users can see links. Click Here To Register...] ...а решение то моей задачи есть хоть какое то более менее доступное?
03.04.2007, 11:29
agat

Я там теней не увидел, там просто таблица с какими то квадратиками. А дизайн же где? дизайн...
03.04.2007, 12:00
Aykroyd

Цитата:

Originally posted by DELPHIna@Apr 3 2007, 09:38
Кстати дискуссия какая то вышла у Вас здесь философская [Only registered and activated users can see links. Click Here To Register...]* ...а решение то моей задачи есть хоть какое то* более менее доступное?
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Да не было никакой дискуссии... )
Самый оптимальный вариант, если тень будет с двух, а не с трех сторон.
В этом случае можно будет легко представить пункт меню с "плавающей" шириной...
04.04.2007, 11:49
null

а чем это отличается от рамки со скругленными углами и сложным бордюром? ну кроме самих картинок? ничем. 8 вложенных дивов (вот любопытно - когда же внедрят CSS3?) и ключик у нас в кармане.
04.04.2007, 13:11
Aykroyd

Цитата:

Originally posted by null@Apr 4 2007, 11:49
а чем это отличается от рамки со скругленными углами и сложным бордюром? ну кроме самих картинок? ничем.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Воистину ничем. [Only registered and activated users can see links. Click Here To Register...]

Цитата:

Originally posted by null@Apr 4 2007, 11:49
8 вложенных дивов (вот любопытно - когда же внедрят CSS3?) и ключик у нас в кармане.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]
Режем по живому? )))
04.04.2007, 13:59
DELPHIna

8 вложенных дивов .... для каждого пункта меню [Only registered and activated users can see links. Click Here To Register...] даже представить сложно .... Просто думала есть что попроще...

Цитата:

Originally posted by agat@Apr 3 2007, 09:29
Я там теней не увидел, там просто таблица с какими то квадратиками. А дизайн же где? дизайн...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]

[/quote]

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

P.S. уж больно зверушка у вас в аватарке чуднАя :dance2:
04.04.2007, 16:34
null

DELPHIna, простого способа сделать это не существует (пока не существует). я не знаю что маразматичней :crazy: — 8 div'ов или таблица на 9 ячеек там, где ее быть не должно.
04.04.2007, 17:31
agat

DELPHIna, я качал ваш html файл, но картинок там не увидел. Поэтому так настойчиво и просил о картинке общей [Only registered and activated users can see links. Click Here To Register...] А 8 дивов не нужно, можно 2 обойтись. Хотя это очень зависит от того, что я увижу на картинке.
04.04.2007, 17:40
Aykroyd

agat
Все необходимые изображения прилеплены автором там же, внизу поста...

Текущее время: 20:18. Часовой пояс GMT +4.