Как предотвратить перемещение HTML-элемента при изменении размера окна? - PullRequest
0 голосов
/ 24 октября 2010

У меня есть простая php-страница с основным содержимым, помещенным в таблицу по центру. Я хочу разместить меню, которое начинается в верхнем правом углу. Код такой:

    echo "<table class=\"center\">";
    while($row= mysql_fetch_array($query))
    {
        echo "<tr>";
        echo "<td>";
        ... content...
        echo "</td>";
        echo "</tr>";
    }
    echo "</table>";

    echo "<table class=\"topRightTable\">";
    while($row= mysql_fetch_array($query2))
    {
   echo "<tr>";
    echo "<td>";
    ... content ...
    echo "</td>";
    echo "</tr>";
    }
    echo "</table>";

С этим css:

    table.center 
    {
    margin-left: auto; 
     margin-right: auto;
    text-align: left;
    }

    table.topRightTable
    {
    position:absolute;
    top:50;
    right:50;
    }

    body
    {
    min-width: 600;
    }

Это работает нормально, пока размер окна не изменится. Тогда правое меню будет плавать вместе с окном, располагаться поверх других элементов. Как избежать перемещения пункта меню вместе с окном?

Я попытался установить минимальную ширину страницы равной 600, и надеялся, что это предотвратит дальнейшее перемещение меню, но безуспешно.

Вопрос: как предотвратить столкновение правой таблицы меню с центральной таблицей

Ответы [ 2 ]

3 голосов
/ 24 октября 2010

Другой ответ правильный. Предполагая, что родитель вашего стола это body:

body, html{
    margin:0px;
    padding:0px;
    width:100%;
    min-width:600px;
}
table.center {
    margin-left: auto; 
    margin-right: auto;
    text-align: left;
}

table.topRightTable{
    float:right;
}

Если <body> не является родителем, измените его на .parent{ min-width:600px;}

1 голос
/ 24 октября 2010

Вы разместили таблицу как абсолютную, что означает, что она не будет отображаться в той же плоскости, что и другие элементы. Если вы хотите, чтобы таблица оставалась позиционной: абсолютной, сделайте так, чтобы другие элементы также позиционировались как абсолютные, и поместите все их в контейнер, который позиционирован: относительно установленной ширины. Или (еще лучше) плавать элементы.

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