HTML-элемент перекрывается - PullRequest
Новая
       3

HTML-элемент перекрывается

0 голосов
/ 30 марта 2011

Я работаю над веб-страницей ASP.Net с двумя таблицами, расположенными в центре страницы, одна поверх другой. Таблица сверху содержит поля ввода, которые динамически генерируются выделенным кодом, поэтому количество полей ввода варьируется. Таблица внизу содержит контент, который является постоянным и не изменяется. Макет страницы фиксирован и должен оставаться таким. Мой вопрос заключается в том, как сделать так, чтобы нижняя таблица динамически корректировалась по вертикали, чтобы она не перекрывалась с полями верхней таблицы. Общий HTML-макет страницы выглядит примерно так: 

<body style="vertical-align: middle; text-align: center;">
    <div id="container" style="position: relative; width: 910px; margin: 0px auto;">
    <form>
         <div style="width: 908px; text-align: center; margin: 75px auto; position: absolute; top: 0px; visibility: visible;">
             <table id="topTable"></table>
         </div>

         <table id="bottomTable" style="width: 908px; margin: 0px auto; position: absolute; top: 400px;"></table>
    </form>
    </div>
</body>

Эффект, который я пытаюсь достичь, следующий:

Содержание верхней таблицы

Поле 1: ...

Поле 2: ...

Поле 3: ...

.

.

.

и т.д.

Нижняя таблица содержимого

Кнопка отправки

Я думаю, что мог бы обернуть нижнюю таблицу в div, но я не уверен, какой конкретный стиль даст желаемый эффект. Я в основном хочу сохранить фиксированное положение по горизонтали, но отрегулируйте вертикальное выравнивание, чтобы не перекрывать верх.

UPDATE:

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

enter image description here

ОБНОВЛЕНИЕ 2:

Я обновил приведенный выше пример HTML стилями, которые используются в данный момент.

Ответы [ 2 ]

1 голос
/ 30 марта 2011

Причина переполнения в том, что вы используете абсолютное позиционирование. (position: absolute;) Ожидается переполнение, которое вы испытываете, потому что ваша нижняя таблица также расположена абсолютно.

Если вы хотите, чтобы нижняя таблица была ниже верхней таблицы, попробуйте следующее: 

<div style="position: absolute; top: 0px;">
    <table id="topTable">
    ...
    </table>
    <table id="bottomTable">
    ...
    </table>
</div>

Здесь мы поместили нижнюю таблицу в div, который оборачивает верхнюю таблицу, а также удалили абсолютное позиционирование.

0 голосов
/ 30 марта 2011

Когда вы перечисляете два элемента div в последовательности, второй элемент div будет увеличиваться или уменьшаться с уменьшением или увеличением размера первого элемента div. (без float = clear: как CSS, так и абсолютное позиционирование)

вам просто нужно удалить свою позицию: свойство absolute css из ваших элементов и правильно размещать ваш элемент в ваших таблицах. не забудьте не назначать высоту элементам div или table.

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

просто измени свой код так: 

<body style="vertical-align: middle; text-align: center;">
<div id="container" style="position: absolute;top:0px; width: 910px; 
     margin: 0px auto;">
   <form>
      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="topTable"></table>
      </div>

      <div style="width: 908px; text-align: center; margin: 75px auto;">
          <table id="bottomTable" style="width: 908px; margin: 0px auto;"></table>
      </div>
   </form>
</div>

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...