Меню на div'ах, перекрытие элементов

@Таня Слепнева · Регистрация: 02.09.2011

Author24 — интернет-сервис помощи студентам

Я все со своими слоями...

Верстала меню - смысл такой - фон div-а - gif с прозрачностью (там где пункты меню), в этом диве другие дивы, которые и являются пунктами меню. Собственно пункты меню должны перекрываться слоем из парентового дива.

Верхний див, в котором дивы с менюшками.

CSS

div.top_menu_bg
{
position:relative;
overflow:hidden;
z-index: 9999;
width:931px;
height:118px;
background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;
}

див первой менюшки

CSS

div.top_menu_bt_1
{
position:relative;
overflow:hidden;
z-index: 1;
margin-left:25px;
width:95px;
height:26px;
text-align:center;
padding-top:10px;
float:left;
cursor:pointer;
}

Другими словами - http://www.teplo-sbit.ru/ - пункт меню "Главная" должен иметь закругленный левый верхний угол. В чем я опять накосячила? Люди добрые... научите глупую правильно работать...

@Alorian · 06.09.2011, 18:20

Нужно сделать так, чтобы блок был ниже фона родителя.

Теоретически если верить спецификации такое возможно:
http://www.w3.org/TR/CSS2/visu... ef-z-index

Stacking contexts are not necessarily related to containing blocks

На практике тоже можно добиться чтобы элемент был ниже фона родителя.

CSS

1
2
3

#asd1{width:100px; height:100px; background:#F00; position:relative; z-index:0;}
#asd2{width:100px; height:100px; background:#0F0; position:relative; left:10px;}/*position:relative можно убрать в этой стрке*/
#asd3{width:100px; height:100px; background:#00F; position:relative; z-index:-1; left:20px; top:20px;}

HTML5

<div id="asd1">
    <div id="asd2">
        <div id="asd3">aaaaaaa</div>
    </div>
</div>

Суть в том что для asd2 не задан z-index и для asd3 z-index отрицателен.

Но тем не менее, пусть это возможно и разрешено мне такое решение не нравится. Слишком громоздкое и ненадежное. Если уж реализовать круглые уголки перекрытием сверху, то лучше сделать два дива рядом, верхний по коду — само меню, нижний — с фоном, а потом сдвинуть нижний на верхний так чтобы он его закрыл. Да и тоже мне как-то не очень нравится.

@Таня Слепнева · 06.09.2011, 20:18 **[ТС]**

Теоретически все верно, но у себя в коде все равно не могу понять где ошибка... Вроде родительский див имеет наивысший z-index, а все равно дочерние дивы его перекрывают...

@Alorian · 06.09.2011, 20:45

Сообщение от Таня Слепнева

Теоретически все верно

Где верно то? Вообще разная структура.

HTML5

  <div class="top_menu_bg">
    <div class="top_menu_elem"></div>
    <div class="top_menu_bt_1 grd1">Главная</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_2 grd0">Магазин</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_3 grd0">Как оформить заказ?</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_4 grd0">Доставка и оплата</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_5 grd0">О магазине</div>
    <img src="/img/null.gif" class="ts" alt="">
    <div class="top_menu_bt_6 grd0">Контакты</div>
  </div>

и

HTML5

<div id="asd1">
        <div id="asd2">
                <div id="asd3">aaaaaaa</div>
        </div>
</div>

@Таня Слепнева · 06.09.2011, 20:59 **[ТС]**

Да а толку-то?

HTML5

<div class="top_menu_bg">
<br><br><br><br><br>
    <div style="position:relative;">
        <div class="top_menu_bt_1 grd1">Главная</div>
    </div>
</div>

CSS

div.top_menu_bg
{
position:relative;
overflow:hidden;
z-index: 0;
width:931px;
height:118px;
background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;
}
 
div.top_menu_bt_1
{
position:relative;
overflow:hidden;
z-index:-1;
margin-left:25px;
width:95px;
height:26px;
text-align:center;
padding-top:10px;
float:left;
cursor:pointer;
}

Без изменений!

@Alorian · 06.09.2011, 21:22

Мда, последний раз попробую объяснить и хватит.
Три дива вложено друг в друга если ты именно это решение все таки выбрала.
Первый див создает отдельный контекст форматирования. Он нужен только для z-index:0
Второй содержит фон.
Третий содержит меню.

Второй в итоге будет над третьим. У тебя второй оказывается над третьим, но стилей то у него никаких нет. Фон у тебя применен к первому, который так и остается внизу.

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

@Таня Слепнева · 06.09.2011, 22:16 **[ТС]**

Да не работает Ваш код с изображением.

HTML5

<div style="position:relative;z-index:0;width:931px;height:118px;">
    <div style="width:931px;height:118px;background: #f8fbfc url('../img/bg/top_menu.gif') no-repeat center top;">
        <div style="position:relative; z-index:-1;">
 
            <div class="top_menu_bt_1 grd1">Главная</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_2 grd0">Магазин</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_3 grd0">Как оформить заказ?</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_4 grd0">Доставка и оплата</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_5 grd0">О магазине</div><img src="/img/null.gif" class="ts" alt="">
            <div class="top_menu_bt_6 grd0">Контакты</div>
        </div>
    </div>
</div>

Фон второго дива перекрывает кнопки... к сожалению.

Добавлено через 10 минут
С фоном работает, а с изображениями -- нет. Либо я не могу Вас понять.

@Alorian · 06.09.2011, 22:28

Сообщение от Таня Слепнева

С фоном работает, а с изображениями -- нет. Либо я не могу Вас понять.

Скорее всего второе

Третий див оказывается под вторым. Если в фоне есть дырка то он оттуда будет выглядывать. Если дырки нет то соответственно второй див будет его полностью заслонять. Этот способ работает только с изображением у которого есть прозрачная часть. background-color должно быть не установлено либо в значении transparent.

Дальше уже только готовый код сюда вставлять. Не понимаю зачем верстать способом который вообще не понятен. Во первом сообщении я привел хотя и тоже корявый, но более легкий варинт.

@Таня Слепнева · 06.09.2011, 22:30 **[ТС]**

Хмм... методом научного тыка начало получаться...

Да, "дырка" есть

Vovan-VE · 07.09.2011, 16:28

Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы.

@Таня Слепнева · 07.09.2011, 18:46 **[ТС]**

Сообщение от Vovan-VE

Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы.

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

))) Поэтому пришлось немного переделать, костыльно вышло, но на более совершенное решение пока времени нет.

Спасибо всем за помощь! Чует мое сердце, не раз еще напишу в этом форуме!

@Таня Слепнева 5 / 5 / 1 Регистрация: 02.09.2011 Сообщений: 43
	06.09.2011, 20:18 [ТС]	3
	Теоретически все верно, но у себя в коде все равно не могу понять где ошибка... Вроде родительский див имеет наивысший z-index, а все равно дочерние дивы его перекрывают... 0

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	06.09.2011, 21:22	6
	Мда, последний раз попробую объяснить и хватит. Три дива вложено друг в друга если ты именно это решение все таки выбрала. Первый див создает отдельный контекст форматирования. Он нужен только для z-index:0 Второй содержит фон. Третий содержит меню. Второй в итоге будет над третьим. У тебя второй оказывается над третьим, но стилей то у него никаких нет. Фон у тебя применен к первому, который так и остается внизу. Не зря же я код в первом сообщении привел который от всего лишнего очищен. Надо было в браузер вставить его отдельно и посмотреть что там происходит. 1

@Alorian 694 / 534 / 40 Регистрация: 22.06.2009 Сообщений: 1,293
	06.09.2011, 22:28	8
	Сообщение от Таня Слепнева С фоном работает, а с изображениями -- нет. Либо я не могу Вас понять. Скорее всего второе Третий див оказывается под вторым. Если в фоне есть дырка то он оттуда будет выглядывать. Если дырки нет то соответственно второй див будет его полностью заслонять. Этот способ работает только с изображением у которого есть прозрачная часть. background-color должно быть не установлено либо в значении transparent. Дальше уже только готовый код сюда вставлять. Не понимаю зачем верстать способом который вообще не понятен. Во первом сообщении я привел хотя и тоже корявый, но более легкий варинт. 0

@Таня Слепнева 5 / 5 / 1 Регистрация: 02.09.2011 Сообщений: 43
	06.09.2011, 22:30 [ТС]	9
	Хмм... методом научного тыка начало получаться... Да, "дырка" есть 0

Vovan-VE 13208 / 6596 / 1041 Регистрация: 10.01.2008 Сообщений: 15,069
	07.09.2011, 16:28	10
	Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы. 0

@Таня Слепнева 5 / 5 / 1 Регистрация: 02.09.2011 Сообщений: 43
	07.09.2011, 18:46 [ТС]	11
	Сообщение от Vovan-VE Нельзя засунуть курицу в яйцо, чтобы скорлупа была поверх курицы. На самом деле я обыграла все это, сделала немного иначе. Но этот способ рабочий, сделать я сделала, но т.к. менюшка была под слоем фона, что я по-глупости изначально не предусмотрела, онховер на кнопки не работал! ))) Поэтому пришлось немного переделать, костыльно вышло, но на более совершенное решение пока времени нет. Спасибо всем за помощь! Чует мое сердце, не раз еще напишу в этом форуме! 0