Пропадает слой

Тема в разделе "HTML, CSS, XML, JavaScript", создана пользователем MiXOH, 19 сен 2007.

  1. MiXOH

    MiXOH Гость

    Привет всем!

    Задача: мне нужно сделать сдвиг слоев, т.е. пользователю задается вопрос, и предлагаются варианты ответов. При выборе ответа, появляется следующий вопрос с вариантами ответа. Все вопросы находятся в div-ах, и естественно не видны пока пользователь не выберет ответ. Также они сдвинуты в виде лестницы, т.е. следующий появляется правее предыдущего. Организовал это так <div id="div1" style="display: none;position:relative;left:5%;z-index:1">.

    Проблема: при попытке раскрыть все ответы, некоторые из предыдущих пропадают (становяться не видны).

    Подскажите, пожалуйста, решение проблемы или другой способ решения задачи.
     
  2. MiXOH

    MiXOH Гость

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

    Вот код для примера:
    Код (Text):
        <script>
    function show(toShow) {
    var t_show = document.getElementById(toShow);
    if(t_show.style.display=="none") t_show.style.display = "";
    else t_show.style.display="none";
    }
    </script>

    <a href="java script:show('div1')"><b>div1</b></a> <br>
    <div id="div1" style="display:none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div1<br>
    <a href="java script:show('div2')"><b>div2</b></a> <br>
    <div id="div2" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div2<br>
    <a href="java script:show('div3')"><b>div3</b></a> <br>
    <div id="div3" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div3<br>
    </td></tr>
    </table>
    </div>
    <a href="java script:show('div4')"><b>div4</b></a>
    <div id="div4" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div4<br>
    </td></tr>
    </table>
    </div>
    </td></tr>
    </table>
    </div>
    <a href="java script:show('div5')"><b>div5</b></a>
    <div id="div5" style="display: none;position:relative;left:5%;z-index:1">  
    <table width="95%" border="1">
    <tr><td>
    div5<br>
    <a href="java script:show('div6')"><b>div6</b></a> <br>
    <div id="div6" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div6<br>
    </td></tr>
    </table>
    </div>
    <a href="java script:show('div7')"><b>div7</b></a>
    <div id="div7" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div7<br>
    </td></tr>
    </table>
    </div>
    </td></tr>
    </table>
    </div>
    <br><br>
    </td></tr>
    </table>
    </div>
    <a href="java script:show('div8')"><b>div8</b></a> <br>
    <div id="div8" style="display:none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    <a href="java script:show('div9')"><b>div9</b></a>
    <div id="div9" style="display: none;position:relative;left:5%;z-index:1">  
    <table width="95%" border="1">
    <tr><td>
    div9<br>
    <a href="java script:show('div10')"><b>div10</b></a> <br>
    <div id="div10" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div10<br>
    </td></tr>
    </table>
    </div>
    <a href="java script:show('div11')"><b>div11</b></a>
    <div id="div11" style="display: none;position:relative;left:5%;z-index:1">
    <table width="95%" border="1">
    <tr><td>
    div11<br>
    </td></tr>
    </table>
    </div>
    </td></tr>
    </table>
    </div><br>
    <a href="java script:show('div12')"><b>div12</b></a>
    <div id="div12" style="display: none;position:relative;left:5%;z-index:1"> 
    <table width="95%" border="1">
    <tr><td>
    div12<br>
    </td></tr>
    </table>
    </div>     
    <br>
    </td></tr>
    </table>
    </div>
    <br>
     
  3. MiXOH

    MiXOH Гость

    z-index:1 это для другой части скрипта, в этом примере кода можно опустить (лень было удалять).
    Проблема в том, что пропадает информация, пропадает в смысле перестает отбражаться.
    Если, Вы, создадите страничку и вставите туда код из примера, и попробуете раскрыть все div-ы, то, Вы, увидите, что некоторая информация будет исчезать, а должна отображаться. В этом и суть проблемы.
     
  4. MiXOH

    MiXOH Гость

    Для: sax_ol
    Большое спасибо!!!

    Ваш ответ натолкнул меня на мысль и я решил проблему.
    Насамом деле, ничего убирать не надо (если убрать, то дивы не будут распологаться в виде лестницы, а будут идти просто друг под другом).
    Надо наоборот, добавит в свойства таблицы style="position:relative;", и после этого все работает как надо.
     
  5. MiXOH

    MiXOH Гость

    Для: sax_ol
    Таблицы нужны! Т.к. див смещается в лево и если в нем много информации то она выходит за правую границу экрана, а скролинг горизонтальный НЕ ПОЯВЛЯЕТСЯ. Поэтому, при использовании таблицы внутри дива с width = (100% - (смещение дива)) информация распологается на странице (получается, что правая граница таблицы проходит по правой границе окна).
     
Загрузка...

Поделиться этой страницей