Вид для печати
Здравствуйте! Я надеюсь мне кто-нибуь поможет справиться с моей менюшкой, потому, что я уже все перепробывал...ничего не получается! Я надеюсь это можно решить отредавктировав css файл, меню не менять, оно в виде вложенного списка! В общем вот скриншот как я хочу сделать: чтобы пункты подменю начинались строго с того пункта, на который наведен указатель мыши...полоска красная должна быть 100% в ширину страницы...
[attachment=6115:attachment]
Вот 2 файла в архиве:
[attachment=6116:attachment]
Если красная полоска необходима именно 100%-ной ширины – тогда только ручным подбором левого паддинга для каждого конкретного вложенного списка... При этом надо не забыть для этих вложенных списков убрать width: 100%... Так как они и так будут 100%, поскольку находятся в прямом потоке...
Есть и другие решения, конечно... Например, позиционировать каждый вложенный список абсолютно, относительно соответствующего пункта[*] родительского списка. Так, в принципе, намного логичнее... Но для красной полоски во всю ширину страницы в этом случае придется придумывать дополнительные решения...
Спасибо попробую!Цитата:
Originally posted by Aykroyd@May 22 2007, 17:11
[b]Если красная полоска необходима именно 100%-ной ширины – тогда только ручным подбором левого паддинга для каждого конкретного вложенного списка... При этом надо не забыть для этих вложенных списков убрать width: 100%... Так как они и так будут 100%, поскольку находятся в прямом потоке...
Не получается, я задавал в пикселах и в процентах, при ресайзинге происходит смещение...((
Задавайте в пикселах. Никакого смещения быть не должно...
P.S. Кстати, Вы об IE не позаботились... Он :hover для li просто так не понимает...
А, ну да, конечно...
#topmenu ul li {margin-left:2%;}
Уберите Христа ради...
[/quote]Цитата:
Originally posted by Aykroyd@May 24 2007, 02:25
Задавайте в пикселах. Никакого смещения быть не должно...
P.S. Кстати, Вы об IE не позаботились... Он :hover для li просто так не понимает...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Я сделал для первого вложенного списка идентификатор #submenu1
и прописал там padding-left: сколько то пикселей, но при ресайзинге смещается подменю...может, я что-то не так делаю?
[/quote]Цитата:
Originally posted by Aykroyd@May 24 2007, 02:29
А, ну да, конечно...
#topmenu ul li {margin-left:2%;}
Уберите Христа ради...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Убрал, сделал как сказано, все равно при 1024 и при 1280 или 1600 подменюшка смещается...мало того, теперь при появлении сабменю появляется горизонтальная прокрутка!
[/quote]Цитата:
Originally posted by mumus@May 24 2007, 03:05
теперь при появлении сабменю появляется горизонтальная прокрутка!
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
она и будет появляться... это закономерно...
на досуге покопаюсь с вашей проблемой...
[/quote]Цитата:
Originally posted by Aykroyd@May 24 2007, 03:21
она и будет появляться... это закономерно...
на досуге покопаюсь с вашей проблемой...
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Большое спасибо, буду очень благодарен!
[Only registered and activated users can see links. Click Here To Register...].Код:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Меню многоуровневое горизонтальное</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
* {margin: 0px; padding: 0px;}
body {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 62.5%; color: #000000; min-width: 1000px;}
a {text-decoration: none; outline: none;}
#menu {height: 40px; padding-top: 20px;}
#menu ul {background: #FFFFCC; width: 100%; height: 20px; float: left; list-style: none;}
#menu ul li {font-size: 1.4em; display: inline; margin-left: 10px;}
#menu ul li a {color: #000066;}
#menu ul li:hover a {color: #FF0000;}
#menu li ul {background: #FF6464; display: none;}
#menu li:hover ul {display: block;}
#menu li li {font-size: 1em;}
#menu li li#first {padding-left: 70px;}
#menu li li#second {padding-left: 141px;}
#menu li:hover li a {color: #FFFFFF;}
#menu li li:hover a {color: #666666;}
</style>
<!--[if lte IE 6]>
****<style type="text/css" media="all">
****body {behavior: url(csshover.htc);}
****</style>****
<![endif]-->
</head>
<body>
<div id="menu">
****
- ****
- [Only registered and activated users can see links. Click Here To Register...]
****- [Only registered and activated users can see links. Click Here To Register...]
*
- *<li id="first">[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...]
*
- *<li id="second">[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...]
*- [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...]
****
</div>
</body>
</html>
Ну и так далее... по аналогии... Недостатком данной конструкции является то, что при изменении размера шрифта в браузере левые отступы вложенных списков конечно же "поедут"... Но ресайзинг на них повлиять не может никак...
Слушай, я вот так решил проблему в архиве лежат файлы, но в ie6 почему-то красная полоска не растягивается на всю страницу, в остальных браузерах нормально, незнаешь ли в чем проблема??? А можно на компе чтобы работали ие6 и ие7?
[attachment=6135:attachment]
Извините, я Вам готовое кроссбраузерное решение написал. Повторно копаться в очередном Вашем коде, к сожалению, нет времени...