Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> img внутри перекрытых div-ов, изображение вылезает за края дива 
:(
    Опции темы
woodo
Дата 2.6.2009, 12:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Есть 9 дивов, оформленных в виде таблицы. 
В каждом диве - картинка
Код

<div class="main">

            <div class="nav" id="1"></div>
            <div class="nav" id="2"></div>
            <div class="nav" id="3"></div>
            
            <div style="clear: left"></div>
            
            <div class="nav" id="4"></div> 
            
                        <div onclick="onClickNav()" class="nav" id="5">
                <div class="div_t" id="t"></div>                
            </div>
            
                        <div class="nav" id="6"></div>
            
            <div style="clear: left"></div>    
            
            <div class="nav" id="7"></div>
            <div class="nav" id="8"></div>
            <div class="nav" id="9"></div> 
</div>

.
Код

function OnLoadMain() {
    for (var i = 0; i < 9; i++) { 
            document.getElementById(i + 1).innerHTML += "<div style=\"clear: both;\"></div><img id=\"i_" + (i + 1) + "\" src=\"123.bmp\" /><div style=\"clear: both;\"></div>";
        }
    }
}

function onClickNav() {
    document.getElementById("t").style.display = "inline";
    document.getElementById("t").style.top = -30;
}


Код

.nav {
    border: 1px solid;
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    width: 201px;
    height: 114px;
    position: relative;
    float: left;
}

.div_t {
    width: 200px;
    height: 25px;
    border: 1px solid;
    position: relative;
    padding: 0px;
    margin: 0px;
    border-spacing: 0px;
    display: none;
    background-color:#00FF00;
    opacity: 0.6;
    float: left;
}

img {
    float:left;
}

Картинки загружаются функцией OnLoadMain() при загрузке страницы. 
Необходимо сделать так, чтобы при клике на центральный div (id=5) появлялся div с id=t, который бы отображался выше на картинке.
Проблема заключается в том, что картинка центрального дива съезжает вниз. Я как понимаю, это происходит от того, что сначала div id=t отображается внутри центрального дива, смещает картинку, а потом переносится выше.

----------------------------------------------------------------------------------------------|
|                                       |                                       |                                    |
|                                       |                                       |                                    |
|                                       |___________________ |                                    |
|                                       |            div_t                   |                                    |
|___________________ |___________________ |__________________|
|                                       |        пусто                      |                                    |
|                                       |___________________ |                                    |
|                                       |                                       |                                    |
|                                       |            img                      |                                    |
|___________________ |___________________ |__________________|
|                                       |                                       |                                    |
|                                       |                                       |                                    |
|                                       |                                       |                                    |
|                                       |                                       |                                    |
|___________________ |___________________ |__________________|

Если нет картинок, дивы не разъезжаются, все отображается норм.


PM MAIL   Вверх
bazzjr
Дата 2.6.2009, 15:07 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



woodo исправь на  вот это document.getElementById("t").style.top = "-30px";

и будет тебе счастье... smile

Это сообщение отредактировал(а) bazzjr - 2.6.2009, 15:11
PM MAIL ICQ   Вверх
woodo
Дата 2.6.2009, 16:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



Исправил, но счастья нет. Я теперь в центральный div вставляю сначала изображение, а потом div_t. Это помогло, но теперь если div_t переместить вправо или вниз, то он накроется картинкой справа или снизу соответственно.
Перемещение вверх и влево работает.
z-index не помогает.
PM MAIL   Вверх
bazzjr
Дата 2.6.2009, 16:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



зачем такие сложности обьясни? что в конечном итоге нужно получить?

Так же попробуй z-index:-1 прописать у картинок (не у div_t а у картинок)

Добавлено через 44 секунды
Кстати у меня все робит нормально, непонимаю почему у тебя не работает....
PM MAIL ICQ   Вверх
woodo
Дата 2.6.2009, 17:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



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

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



может я вообще по неверному пути иду. Я хотел сделать навигацию по картинкам. Есть 9 картинок, одна активная. У активной картинки по краям стрелки (div_t). Щелкаем на стрелку слева,  активная картинка становится та, что слева, и у нее появляются стрелки.

PM MAIL   Вверх
bazzjr
Дата 2.6.2009, 17:40 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


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

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



хммм... по этому поводу много написанно уже, погуглить непробовал?
Так же естькуча готовых скриптов по этой теме.

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

Так же и с рядом картинок можно поступить.. Например у тебя есть мето трех картинок, и в центре нужная, по клику меняются картинки в этих трех местах... Все это легко реализовать с помощью javascript.
PM MAIL ICQ   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0817 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.