Comment empêcher le déplacement d'un élément HTML lors du redimensionnement de la fenêtre?

J'ai une simple page php, avec le contenu principal placé dans une table qui est centrée. Je veux placer un menu qui commence dans le coin supérieur droit. Le code est comme ceci:Comment empêcher le déplacement d'un élément HTML lors du redimensionnement de la fenêtre?

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>";

Avec cette css:

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

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

    body 
    { 
    min-width: 600; 
    }

Cela fonctionne bien, jusqu'à ce que la fenêtre redimensionne. Ensuite, le menu de droite flottera avec la fenêtre, sera positionné sur d'autres éléments. Comment éviter l'élément de menu se déplaçant avec la fenêtre?

J'ai essayé de définir la largeur minimale de la page à 600, et espéré que cela empêcherait le bon menu de bouger plus loin, mais sans succès.

Le qustion est: comment empêcher le droit menu table d'entrer en collision avec le centre table

Source

2010-10-24 eflles

Assurez-vous que vous avez défini la largeur min pour tous les parents de la table. De plus, vous devez donner des unités (comme 'px' ou' em'). Donc 'min-width: 600px;' – BudgieInWA

L'autre réponse est correcte. En supposant que le parent vous table est corps:

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; 
}

Si le <body> n'est pas le parent, modifiez à .parent{ min-width:600px;}

Source

2010-10-24 18:00:21 Jason

Vous avez placé la table absolue qui signifie qu'il ne sera pas rendu dans le même plan que d'autres éléments . Si vous souhaitez que la table reste positionnée: absolute, placez les autres éléments également positionnés en absolu et placez-les tous dans un conteneur positionné: relatif avec une largeur définie. Ou (encore mieux) faire flotter les éléments.

Source

2010-10-24 17:56:40

Comment empêcher le déplacement d'un élément HTML lors du redimensionnement de la fenêtre?

Répondre

Questions connexes