Forum Webscript.Ru
Дизайн и Верстка => Всё о Html => Тема начата: mussa от 18 Ноября 2006, 16:21:09
-
Мне нужно чтоб на странице с содержимым, располагающимся по центру экрана по горизонтали (как обычно, от начала до конца сверху вниз), возле одного из пунктов левого меню выпадала дополнительная менюшка при наведении мыши на этот пункт.
Тут все вроде просто: делаем невидимый слой с выпадающим меню, и с помощью джавовской функции show-hide layers управляем его показом...
Но как при этом добиться того, чтоб при разных разрешениях монитора меню выпадало возле соответствующей кнопки? Ведь этого можно добиться только позиционируя абсолютным образом этот слой с выпадающим меню! Если бы основной слой страницы имел бы тоже position absolute - тогда достаточно было бы просто вложить один слой в другой и задать ему нужные координаты. Тогда куда бы мы не передвинули основной блок страницы, менюшка подвинется вместе с ним.
Но мне же необходимо, чтобы большой слой сам автоматически оказывлся по центру при любом разрешении монитора. То есть использовать position absolut тут нельзя. Как же быть? Неужели нет центрированных сайтов, у которых аккуратно реализовано выпадающее меню?
-
Если бы основной слой страницы имел бы тоже position absolute - тогда достаточно было бы просто вложить один слой в другой и задать ему нужные координаты.
Задайте основному слою position: relative
-
>>Задайте основному слою position: relative
пробовал, не работает...
все остается таким же, как раньше...
страница тут: http://timspirit.ru/catalog
попробуйте, сохраните ее и посмотрите вовнутрь:
два слоя:
основной:
align:center;
padding-top:0px;
padding-bottom:0px;
"невидимый":
#drop {
position:absolute;
left:-180px;
top:268px;
width:48px;
height:411px;
z-index:1;
background-color: #FFFFFF;
layer-background-color: #FFFFFF;
border: 1px none #000000;
visibility: hidden;
}
даже если добавить к основному position relative, ничего не изменится. Проверьте сами!
-
Потомок будет позиционирован относительно родителя, позиционированного абсолютно (absolute) или относительно (relative). Если такового не найдется, то относительно body.
Слегка подправил:
body {
text-align: center;
margin: 0;
color: #000000;
}
#page {
position: relative;
margin: 0 auto;
padding: 0;
width: 777px;
}
#drop {
position: absolute;
left: -95px;
top: 268px;
width: 48px;
height: 411px;
z-index: 1;
background-color: #FFFFFF;
border: 1px none #000000;
visibility: hidden;
}
И уберите внешнюю таблицу.
И уходите от табличной верстки!
-
спасибо! ваш варант работает.
что касается таблиц - одну лишнюю :) убрал...
Но в данном случае сайт сделан на oscommerce - там в модулях все намешано из сплошных таблиц, поэтому отказываться особого смысла нет... то же самое с джумлой/мамбой...
а вот когда, скажем, на drupal\'e что-то делаю, таблицами почти не пользуюсь...
-
Да, использование чужих программных продуктов зачастую связано с какими-либо ограничениями.
Еще нюанс по Вашему сайту: про разрешении 800х600 менюшка практически полностью уйдет за край экрана. Придумайте, куда ее отпозиционировать во избежание этого эффекта!