Вертикально выпадающее меню.

[Monaco Felice]

Очень нужна помощь!!! Никак не могу сделать выпадающее меню :blush2:
Собственно само меню сделал, но одну желаемую функцию так и не удалось реализовать.
Рассказываю по порядку:
например есть у нас вертикально выпадающее меню. Неактивная кнопка главного меню имеет синий цвет, при наведении курсора меняется на красный (в реальности подгружаются картинки фоном), после наведения появляется выпадающий список, при перемещении между пунктами списка, всё нормально работает. Но проблема в том, что когда я перемещаю курсор с кнопки главного меню вниз, на список, то красная подсветка обратно меняется на синюю!!! тоесть кнопка главного меню становится как-бы неактивной, хотя курсор находится в подменю (выпадающем списке) этой кнопки! Мне необходимо, чтобы активное меню оставалось подсвеченным, когда курсор находится на списке этого меню!
Подскажите, пожалуйста, как это можно реализовать?

[Aykroyd]

Я надеюсь, что выпадающие списки у Вас представлены в коде, как и положено, вложенными списками. Я правильно Вас понимаю?

[null]

Скорее всего у вас ошибка в CSS. вместо "li:hover a" у вас написано "li a:hover". А может быть и нет
Так или иначе - код в студию!

[Aykroyd]

Вот и я о том же.)
Скорее всего [Только зарегистрированные пользователи могут видеть ссылки. ] необходима...

[Monaco Felice]

...на самом деле даже незнаю где и в чём ошибка... но меню сделал, работает!
К сожалению не нашёл как удалить тему, потому что разобрался с менюшкой ещё не получив ни единого ответа на форуме, ...почти всю ночь просидел, и методом перебора и исключения тэгов нашёл что к чему. Хотя некоторые загадки остались. Так как код брал из одного урока по выпадающему меню, то там был прописан такой тэг
#menu a {
...лишнее удаляю, дабы не отвлекать внимание
display: block;
background: url(dot.png);
}
вот, последняя строчка background: url(dot.png); - что это понятия не имею, тоесть логически предполагаю что надо подгрузить нужный мне фон, но если подгружаю нужную мне картинку или даже просто меняю url(dot.png) на цвет - нефига не работает, меню начинает глючить! (при переходе в подменю, главная кнопка меню перестаёт быть активной) Самого файла dot.png у меня естественно нет. И почему меню работает, когда он прописан, хотя его в реальности нет, и перестаёт работать, когда я ставлю нужный мне фон - это осталось для меня загадкой.

Вот весь код (без параметров текста и размеров кнопок):

#menu, #menu ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
background: url(index/button_menu.jpg);
float: left;
width: 100%;
}
#menu li {
float: left;
position: relative;
background: url(index/button_menu.jpg);
back\ground: none;
}
#menu a {
display: block;
background: url(dot.png);
}
#menu a:hover {
background: url(index/button_menu_push.jpg);
}
#menu li:hover,
#menu li.jshover {
background: url(index/button_menu_push.jpg);
}
#menu li ul {
display: none;
position: absolute;
background: url(index/button_submenu.jpg);
}
#menu li:hover ul,
#menu li.jshover ul {
display: block;
}

...может есть что-то лишнее, так как с кодингом я не очень дружу и в данном случае всё делалось методом подбора (изначально, в уроке, код был значительно больше, так как там ещё было подменю второго уровня), но в таком виде код работает, и меню нормально функционирует.
Кому интересно, урок по меню здесь 3w.beholder-eye.info/2006/03/30/dropdown-menu-css

[Aykroyd]

В IE6 тоже все функционирует? )

#menu li.jshover

Если подключить csshover.htc, можно будет обойтись и без JS...

[Monaco Felice]

Originally posted by Aykroyd@Nov 6 2007, 21:38
[b]В IE6 тоже все функционирует? )

да, в IE6 работает без глюков, незнаю как на счёт более ранних версий, но в 6-й работает

кстати, оказалось что у меня IE5.2 ...странно, я думал что 6-я версия
просто IE практически никогда не пользуюсь, только при вёрстке (что бывает очень редко) проверяю как отображается страница
а что в 6-й версии могут быть проблемы? я так предполагаю, что если в более ранних версиях отображается нормально, то и в более новых не должно быть проблем ...или я не прав?

[Aykroyd]

Originally posted by Monaco Felice@Nov 7 2007, 01:05
я так предполагаю, что если в более ранних версиях отображается нормально, то и в более новых не должно быть проблем ...или я не прав?
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
Правы.
Но речь шла немного о другом...

[Monaco Felice]

Originally posted by Aykroyd@Nov 6 2007, 23:23
Правы.
Но речь шла немного о другом...
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]
о чём Вы говорите? в чём именно могут быть проблемы? ...я с програмным кодом очень неохотно дружу, поэтому если вижу что код работает, дальше в нём разбираться не пытаюсь не моё это
следовательно, я могу не учитывать множества неприятностей, которые могут появиться из-за неправильной семантики , поэтому буду очень признателен за подсказки!!!

сейчас у меня появилась следующая проблема:
если раньше дизайн шапки сайта был одинаков на всех страницах, то сейчас у меня одна страничка отличается от других. Это первая страница, на которую я сделал рисунок, немножко перекрывающий кнопки меню. В меню 5 кнопок, 3 центральные в большей или меньшей степени перекрываются рисунком. Следовательно эти три кнопки уникальные и под каждую из них нужен отдельный код для выпадающего меню. Так вот, как мне правильно прописать фон для этих уникальных кнопок? ...перепробовал уже море разных вариантов, ...но сейчас просто пришёл в тупик ...не показывает то что надо и всё тут.
код css и jscript у меня вынесены в отдельные файлы, и подлинкованы к страничке
повторюсь, тот код, что я приводил примером - работает, в том числе и в IE 5.2
проблема именно в подключении новых background для изменённых кнопок меню. Собственно не могу реализовать только одну функцию: когда курсор наводится на кнопку - она подсвечивается и появляется выпадающее меню, потом, когда курсор скользит вниз по этому меню - подсветка исчезает! а не должна!, ведь курсор находится всё ещё в подменю этой кнопки. Или же если не исчезает, то подключает background активной кнопки стандартного меню, а не именно этой уникальной кнопки, хотя в коде все background указаны верно.
я так предполагаю, что проблема именно с семантикой кода
надеюсь что понятно всё объяснил, буду очень благодарен за подсказки!!!

[Monaco Felice]

...вроди-бы удалось реализовать меню, если применять отдельный код к каждому пункту меню. Работает. Только ж опять таки, не факт что это правильный метод. И кода получилось почти на 750 строк!!! это только CSS под меню! Так что незнаю как с этим быть. Разобраться то я разберусь где что, но вот не будет ли тормозить загрузку страницы такой код? Стили заданы практически для каждого элемента меню, и к некоторым пунктам подменю.
Но есть ещё одна проблема: в Firefox между картинкой-меню-нижним блоком информации, разрыв таблиц! Тоесть меню как-бы пикселей на 10-15 смещено по вертикали относительно верхнего и нижнего элемента сайта. Хотя в Opera и IE, всё показывает без каких-либо глюков! И в Firefox мне не удаётся убрать буллеты из
списка — list-style:none! Так и показывает точку перед названием меню. Причём точка как-то странно съехала влево. Опять-же повторюсь, в опере и эксплорере всё нормально. ...начинаю сильно разочаровываться в своём "любимом" файрфоксе.

кстати, когда убираю DOCTYPE (а он выставлен в XHTML 1.0 Transitional ...незнаю насколько это правильно), то разрывы между меню и верхним-нижним элементом исчезают, а вот буллеты списка по прежнему остаются

[Aykroyd]

1. В первую очередь я настоятельно рекомендую Вам ознакомиться с [Только зарегистрированные пользователи могут видеть ссылки. ] раздела «Верстка сайта». В частности, с пунктами 4 и 7.

2. Во-вторых, если Вы будете заявлять, что с программным кодом Вы дружите неохотно и что «это – не Ваше», помощи здесь Вы вряд ли дождетесь. Никто не будет делать что-то за Вас. Здесь Вы можете получить только надлежащий совет или рекомендацию.

3. Вынужден констатировать, что Вы совершенно не осведомлены о том, что из себя представляет [Только зарегистрированные пользователи могут видеть ссылки. ]. К Вашим проблемам этот термин не имеет никакого отношения.

но вот не будет ли тормозить загрузку страницы такой код

Будет.

в Firefox между картинкой-меню-нижним блоком информации, разрыв таблиц
кстати, когда убираю DOCTYPE (а он выставлен в XHTML 1.0 Transitional ...незнаю насколько это правильно), то разрывы между меню и верхним-нижним элементом исчезают

Каких это еще [Только зарегистрированные пользователи могут видеть ссылки. ]?


P.S. В общем, так. Идем по приведенным выше ссылкам, учим матчасть, и, если все это в голове у Вас уложится надлежащим образом, я приведу далее в этой теме пример кода нормального двухуровнего ниспадающего меню, с минимальным кодом, с разными верхними «кнопками» и без всяких там разрывов и буллетов...

[Monaco Felice]

...благодарю за ссылки, но я вобщем-то даже не намекал на то, чтобы кто-то написал код за меня! я делаю свой сайт, лично для себя, поэтому хочу сделать его самостоятельно. На счёт замечания, что я не дружу с кодом, я хотел сказать лишь то, что я плохо разбираюсь в коде, следовательно ожидаю более подробных объяснений, а не просто "возьми это и поставь сюда", потому что так может появиться больше новых вопросов, чем решиться старых. Я дизайнер, у меня другая специализация и сфера деятельности, и у меня нет намерения стать экстра-классным верстальщиком. Мне всего-лишь необходимо сверстать свой сайт.

код я уже написал, всё работает, правда код получился очень большой, около 750 строк (к каждому элементу меню и подменю стиль для 3-х различных состояний - неактивный, активный (при наведении курсора), состояние меню с уже открытой страницей этого меню: например при загруженной странице "портфолио" меню этого раздела имеет своё неизменное состояние), в общей сумме стили для 15 различных элементов меню и подменю ...так что незнаю, может код и нормальный по размерам для такого количества различных стилей. В примере на сайте beholder-eye.info/2006/03/30/dropdown-menu-css, который я приводил в начале этой темы, код занимает 75 строк только для 3-х элементов (меню, подменю и подменю второго уровня).
у меня сейчас остались лишь вопросы, почему возникают те или иные проблемы с вёрсткой, а не просьба, чтобы кто-то сделал эту работу за меня!

...в любом случае, очень благодарен за подсказки!

[Aykroyd]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Горизонтальное меню (2 уровня)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--[if lte IE 6]>
****<style type="text/css" media="all">
****body {behavior: url(csshover.htc);}
****</style>****
<![endif]-->
<style type="text/css">
* {margin: 0px; padding: 0px;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; background: #FFFFFF;}
div#menu {margin: 20px;}

ul#mainmenu {list-style: none;}
ul#mainmenu li {float: left; cursor: pointer; position: relative;}
ul#mainmenu li a {text-indent: -9000px; display: block; width: 150px; height: 25px; overflow: hidden;}
ul#mainmenu li#b1 {background: url(img/b1.gif) 0px -25px no-repeat;}
ul#mainmenu li#b1 a {background: url(img/b1.gif) 0px 0px no-repeat;}
ul#mainmenu li#b1:hover a {background: none;}
ul#mainmenu li#b2 {background: url(img/b2.gif) 0px -25px no-repeat;}
ul#mainmenu li#b2 a {background: url(img/b2.gif) 0px 0px no-repeat;}
ul#mainmenu li#b2:hover a {background: none;}
ul#mainmenu li#b3 {background: url(img/b3.gif) 0px -25px no-repeat;}
ul#mainmenu li#b3 a {background: url(img/b3.gif) 0px 0px no-repeat;}
ul#mainmenu li#b3:hover a {background: none;}
ul#mainmenu li#b4 {background: url(img/b4.gif) 0px -25px no-repeat;}
ul#mainmenu li#b4 a {background: url(img/b4.gif) 0px 0px no-repeat;}
ul#mainmenu li#b4:hover a {background: none;}
ul#mainmenu li#b5 {background: url(img/b5.gif) 0px -25px no-repeat;}
ul#mainmenu li#b5 a {background: url(img/b5.gif) 0px 0px no-repeat;}
ul#mainmenu li#b5:hover a {background: none;}

ul#mainmenu li ul {font-size: 1.1em; display: none; width: 200px; border-bottom: 1px #99CCFF solid; list-style: none; position: absolute; left: 0px; top: 25px;}

ul#mainmenu li li {background: #D9FDFF; width: 200px;}
ul#mainmenu li li:hover {background: #BBFCFF;}
ul#mainmenu li li:hover a {color: #0000FF;}

ul#mainmenu li li a {color: #0000CC; text-decoration: none; text-indent: 0px; width: auto; height: auto; padding: 3px 5px; border: 1px solid #99CCFF; border-bottom: none;}
* html ul#mainmenu li li a {height: 1%;}

ul#mainmenu li:hover ul {display: block;}
</style>
</head>

<body>
<div id="menu">

****<ul id="mainmenu">
****<li id="b1"><a>Технологии</a>
 *
*
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
****
****
****<li id="b2"><a>Сервис</a> 
 *
*
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
****
****
****<li id="b3"><a>Продукты</a>
 *
*
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
****
****
****<li id="b4"><a>Поддержка</a>
 *
*
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
****
****
****<li id="b5"><a>Контакты</a>
 *
*
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
[Только зарегистрированные пользователи могут видеть ссылки. ]
 *
****
****[/list]

</div>
</body>
</html>

[Только зарегистрированные пользователи могут видеть ссылки. ]

[Monaco Felice]

Благодарю за код, Aykroyd!
Практически всё сделал, ...правда незнаю как будет выглядеть мой сайт на других машинах. Когда все доверстаю, сброшу ссылку, чтобы было понятно по какой причине я вам тут надоедал а то всё пытался "на пальцах" объяснить, наверное многим не понятно в чём вообще суть.
Сейчас не могу решить одну очень банальную задачу:
на некоторых страницах информации очень мало, и указанный фон (страница отцентрирована) опускается только на точно указанный размер. а мне нужно чтобы страница растягивалась до нижнего края окна, при любом разрешении монитора. Тоесть если я указываю размеры в пикселях, то размер держит точно, а если указываю что поле под текстом или картинками должно быть 100% и заполнять всю нижнюю часть экрана - не работает вообще. Как с этим бороться?
Вот упрощённый код (убрал тексты и стили)

<table width="1000" height="100%" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="25" height="100%" style="background:url(index/left_shadow.jpg); background-repeat: repeat-y"></td>
<td width="950" height="100%" background="index/background_info.jpg">
<table width="950" height="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="950" height="35" colspan="3"></td>
</tr>
<tr valign="top">
<td width="35" height="100%"></td>
<td width="880">
Текстовая информация.
</td>
<td width="35" height="100%"></td>
</tr>
<tr>
<td width="950" height="75" colspan="3"></td>
</tr>
<tr>
<td width="950" height="100%" colspan="3"></td>
</tr>
</table>
</td>
<td width="25" height="100%" style="background:url(index/right_shadow.jpg); background-repeat: repeat-y"></td>
</tr>
</table>

я так понимаю что height="100%" должно растягивать страничку на полную высоту экрана ...а не работает
можете подсказать как это решить?

...кстати, если удалить DOCTYPE - всё нормально работает. Но стоит ли его удалять? Не будет ли сайт глючить на других машинах и других браузерах?
У меня весь сайт свёрстан на XHTML Transitional.

[Aykroyd]

Вы не по адресу обратились. Там, где <table> – я Вам, к сожалению, не советчик. Даже более того – по таким вопросам на данном ресурсе Вы вряд ли найдете и других советчиков...


P.S. Видимо, не ходили Вы по ссылкам, которые я Вам предложил... И посему с говнотаблицами Вам придется разбираться самому...

[Monaco Felice]

Да, Aykroyd, к сожалению умею верстать только таблицами.
height в 100% удалось поставить, если задать в стилях
<style>
html, body {
height:100%;
}
</style>
тогда страницу тянет на всю высоту окна
Только вот в Опере у меня при этом сместилось главное меню. поэтому решил выставить фиксированный размер в высоту, что вроди-бы не испортило общей картины. Во всяком случае, если смотреть сайт на разрешении до 1280х960 пикселей. ...Хотя у меня при 1600х1200 тоже нормально смотрится. Я внизу страницы дорисовал изображение, чтобы компенсировать обрыв страницы. ...а вот насколько это получилось, у каждого пользователя уже будет своё мнение.

кто участвовал в этой теме, и кому интересно над чем я работал и по какому поводу вам надоедал :blush2: , — [Только зарегистрированные пользователи могут видеть ссылки. ]

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