Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > z-index наложение div на rollOver image

Автор: Killer_13 22.5.2009, 00:39

Здраствуйте,
нужно вот мне на ролловер картинку засунуть текст который находится в div - тоисть div засунуть на ролловер картинку.
Если можно обойтись без позиционирования.
У меня свойство float строит в горизонтальный ряд 4 дива (пункты меню).

вот исходные коды

Код


<div class="menu">
    <div class="lin">
        <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('m1','','images/menu2.jpg',1)"><img src="images/menu1.jpg" alt="m1" name="m1" width="212" height="59" border="0" id="m1" /></a>
         <div class="linvert" style="width:55px;"><a href="index.html" target="_parent">Home</a></div>
    </div>

<div class="lin"><div class="linvert" style="width:55px;"><a href="work.html" target="_parent">Work</a></div></div>
<div class="lin"><div class="linvert" style="width:55px;"><a href="about.html" target="_parent">About</a></div></div>
<div class="lin"><div class="linvert" style="width:85px;"><a href="contacts.html" target="_parent">Contacts</a></div></div>
</div>

Код


div.menu {
    float:left;
    padding-top:37px;
    text-align: left;
    margin: auto;
    width: 848px;
    height: 59px;
}

div.lin {
    float:left;
    text-align: center;
    font-weight:bolder;
    color:#FFFFFF;
    font-size:16px;
    width: 212px;
    height: 59px;
    z-index:1;
    
}

div.linvert{
margin-left:auto;
margin-right:auto;
    width:50px;
    margin-top:20px;
    z-index: 2;
    }

Скриншот - заранее благодарен за помощь.

Автор: Killer_13 22.5.2009, 00:55

Догнал сам,
вот подчитал чуток.
Но как теперь сделать логическое выравнивание по центру?
под словом логическое имею введу, без указания конкретных величин, к примеру к свойству margin-left.

Код


<div class="lin">
     <div class="roll"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('m1','','images/menu2.jpg',1)"><img src="images/menu1.jpg" alt="m1" name="m1" width="212" height="59" border="0" id="m1" /></a></div>
     <div class="linvert" style="width:55px;"><a href="index.html" target="_parent">Home</a></div>
    </div>

Код


div.linvert{
position:absolute;
margin-left:auto;
margin-right:auto;
    width:50px;
    margin-top:20px;
    z-index: 2;
    }
div.roll{
position:absolute;
    width: 212px;
    height: 59px;
z-index:1;
}

Получившийся скриншот.

Автор: Killer_13 22.5.2009, 01:24

Вот - постал еще один вопрос, - можно ли сделать нижний и верхний дивы (с индексами 1 и 2) сделать взаимонаводимыми. smile

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

Ухх, устроил здесь себе монолог. smile

Автор: bazzjr 22.5.2009, 01:28

В твоем варианте лучше всего если у тебя будет просто один div, и с помощью javascript, будем задавать у этого дива фон. Так как уже используется функции яваскрипта.

Если не ва, то прийдеться позиционировать position:relative; top:-100%; left:0px, и писать хак для IE6

Добавлено через 5 минут и 50 секунд
Однозначно надо все делать в помощью javascript. Зачем себе голову морочить с position:absolute ???

Мне вот интересно, а если у тебя динамически меню меняться будет? опять таки прейдется использовать яву чтобы поменять стили, поэтому лучше сразу сделать все на яве ИМХО.