Chevauchement des éléments HTML

Je travaille sur une page Web ASP.Net avec deux tables positionnées au centre de la page l'une au-dessus de l'autre. Le tableau en haut contient les champs d'entrée qui sont générés dynamiquement par le code-behind, de sorte que le nombre de champs d'entrée varie. Le tableau en bas contient un contenu constant et qui ne change pas. La disposition de la page est fixe et doit le rester. Ma question est de savoir comment faire pour que la table du bas s'ajuste de façon dynamique verticalement afin qu'elle ne chevauche pas les champs de la table du haut. La mise en page générale HTML de la page est quelque chose comme ce qui suit:Chevauchement des éléments 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>

l'effet que je suis en train de réaliser est la suivante:

Haut Tableau contenu

Champ 1 : ...

Champ 2: ...

Champ 3: ...

.

.

.

etc.

Contenu Tableau Bas

Submit Bouton

Je pense que je pourrais envelopper la table de fond dans une div, mais je ne suis pas sûr de ce que le style spécifique atteindra l'effet désiré. Je veux fondamentalement maintenir le positionnement fixe horizontalement, mais faire ajuster l'alignement vertical pour éviter le chevauchement avec le dessus.

MISE À JOUR:

Voici un plafond d'écran qui montre les deux tables qui se chevauchent. Les boutons que vous voyez sont dans la table du bas, les champs sont censés être en haut, tous les éléments sont positionnés absolument au centre de l'écran du navigateur.

enter image description here

MISE À JOUR 2:

Je mis à jour l'échantillon HTML ci-dessus avec les styles qui sont actuellement en cours d'utilisation.

Source

2011-03-29 kingrichard2005

Je ne suis pas sûr de comprendre. C'est le comportement par défaut pour plusieurs tables. Pouvez-vous montrer un exemple où ils se chevauchent? – Sam

Par défaut, les éléments de bloc se développent verticalement pour s'adapter à son contenu. Vous avez évidemment CSS qui vous cause ce comportement indésirable. Vous devez nous fournir le CSS. – Llyle

Désolé, j'ai ajouté le style à l'exemple HTML ci-dessus. J'ai également oublié d'inclure le fait que les tableaux sont à l'intérieur d'un formulaire, pas sûr si cela fait une différence ou non. – kingrichard2005

La raison pour laquelle le débordement se produit parce que vous utilisez le positionnement absolu. (position: absolute;) Le débordement que vous rencontrez est attendu car votre table du bas est également positionnée en absolu.

Si vous manquez le tableau du bas pour être en dessous de la table puis essayez ceci:

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

Ici, nous avons mis la table en bas à l'intérieur du div qui enveloppe le dessus de table et également supprimé le positionnement absolu.

Source

2011-03-29 22:16:18 Llyle

Lorsque vous liez deux éléments div dans une séquence, la seconde div augmente et diminue avec la taille décroissante ou croissante du premier élément div. (sans float = clear: à la fois CSS et positionnement absolu)

vous avez juste besoin de supprimer votre position: la propriété css absolue de vos éléments et de placer correctement votre élément dans vos tableaux. N'oubliez pas de ne pas attribuer de hauteur aux éléments div ou table.

Si vous placez chaque élément, dans la cellule de droite de la table, aucun mal ne se produit. alors faites-le, mais soigneusement.

il suffit de changer votre code comme ceci:

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

Source

2011-03-29 20:42:39

Chevauchement des éléments HTML

Répondre

Questions connexes