VPF::z-index наложение div на rollOver image - Форум программистов

Killer_13

Дата 22.5.2009, 00:39 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Здраствуйте,
нужно вот мне на ролловер картинку засунуть текст который находится в 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;
    }

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

Присоединённый файл ( Кол-во скачиваний: 6 )

3.jpg 33,59 Kb

Killer_13

Дата 22.5.2009, 00:55 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

Догнал сам,
вот подчитал чуток.
Но как теперь сделать логическое выравнивание по центру?
под словом логическое имею введу, без указания конкретных величин, к примеру к свойству 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;
}

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

Присоединённый файл ( Кол-во скачиваний: 4 )

4.jpg 30,07 Kb

Killer_13

Дата 22.5.2009, 01:24 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 740
Регистрация: 12.1.2008
Где: Germany

Репутация: нет
Всего: 1

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

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

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

bazzjr

Дата 22.5.2009, 01:28 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 460
Регистрация: 27.12.2007
Где: Россия, Пермь

Репутация: 2
Всего: 6

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

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

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

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

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »