Выпадающее меню и таблица

hAhol · November 25, 2009

Приветствую.

Имеется любопытное выпадающее меню на CSS/JQuery. А у меня страничка с таблицей на всю область экрана.

При верстке я получаю - таблица закрывает собой меню. Если установить таблице (или её содержимому) z-index, равный скажем "-1", то я вижу меню. Но только элементы-папки. Содержимого нет (равно как и стрелочки вниз). И по наведению/клику не разворачивается (выпадает). Если же не ставить таблице/содержимому z-index, а задать его для менюшки (отдельно в стилях моей страницы либо в тексте css-файла, являющегося частью меню) скажем в значение "5", то не отображается опять же.

Вопрос в том, где мне порыться, где покопать, чтоб смочь сверстать как необходимо (менюшка, полностью функциональная, сверху всего содержимого)

Вот CSS моей странички:


.ch1 {
position: absolute;
left: 0%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch2 {
position: absolute;
left: 50%;
top: 0%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch3 {
position: absolute;
left: 0%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
.ch4 {
position: absolute;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
z-index: 1;
}
#web5 {
display: none;
}
#web6 {
display: none;
}
#web7 {
display: none;
}
#web8 {
display: none;
}
A {
 color: #808080;
}
A:visited {
 color: #808080;
}
#t {
position: absolute;
left: 0px;
top: 0px;
border: 0px;
}
.pic {
width: 100%;
height: 100%
border: 0px;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
}

Первые 4 класса (chX) - для задания размеров ячеек таблицы (их 4, таблица 2х2); t - это собственно сама таблица; pic - для масштабирования изображений под размер/разрешение браузера/монитора (цепляется за размер div'а).

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

Валидаторы ругаются на менюшку - "End tag for ... omitted, but OMITTAG NO was specified", всего две ошибки таких - на тег li и тег ul. Есть еще ошибки на скрипт LightWindow, теги caption. Но это всё стандартно :huh: . Больше ошибок нет. Доктайп -

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Отдельно от моей странички менюшка работает, абсолютно так, как мне нужно. А вот объединить не получается. Заранее спасибо.

hAhol · November 26, 2009

Спасибо, но тут "или-или". Либо автоподгонка размера с помощью "float: left" в классе этого меню, либо выравнивание по центру с помощью "margin: 0 auto".

Я нашел другое решение (кажется ): в свойствах CSS я указываю менюшке по её id два параметра: "display: table; table-layout: auto;". А в CSS-файле самого меню (там все по классам) говорю "margin: 0 auto". Усе работает Если еще и у заказчика заработает, то я счастлив

Clayton · November 26, 2009

)) Код в студию) Ницо так не понятно)

hAhol · November 26, 2009

#myslidemenu {
position: relative;
z-index: 100;
display: table;
table-layout: auto;
}

Это в теле моей странички. Ссылаюсь на id div'а, в котором меню. Собственно, два последних параметра заставляют (я так думаю) быть его резиновым.

А это -

.jqueryslidemenu{
font: bold 12px Verdana;
background: #414141;
margin: 0 auto;

в css файле меню самого. Класс того же самого div'а. Зачем margin, понятно

Edited November 26, 2009 by hAhol

Sign In

Выпадающее меню и таблица

Question

hAhol

Link to comment

Share on other sites

28 answers to this question

Recommended Posts

hAhol

Link to comment

Share on other sites

Clayton

Link to comment

Share on other sites

hAhol

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information