Alignement des modifications verticales de l'image lorsque l'écran n'est pas agrandi

Question

J'ai un code HTML assez simple avec quelques tableaux pour organiser divers éléments de texte ou d'images. Tout fonctionne bien, sauf que je dois placer une bordure verticale à la fois sur les côtés gauche et droit de l'écran. Je suis capable de le faire avec une image 2x2 pixels que je m'étends. Lorsque l'écran de l'utilisateur est maximisé, tout est superbe. Mais lorsque l'utilisateur clique sur "Restaurer vers le bas", les bordures restent en place, mais les tables sont déplacées pour qu'elles commencent en dessous de la fin des bordures, ce qui est hors écran. en d'autres termes, l'alignement relationnel entre les bordures et les tables est complètement bousillé. Est-ce que quelqu'un sait comment rendre cet alignement cohérent sur une restauration? Je suis à peu près un débutant avec html et asp, alors parlez lentement. S'il y a une meilleure méthode pour accomplir cela, je suis tout ouïe. Merci.

Voici la section pertinente du code:

<form id="form1" runat="server"> 
<asp:Image ID="LeftBorder" src="../Images/Border_Blue.jpg" runat="server" 
      WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="left"/> 

<asp:Image ID="RightBorder" src="../Images/Border_Blue.jpg" runat="server" 
      WIDTH="15" HEIGHT="1000" BORDER="0" alt="Image Missing" align="right" /> 

<table id="BannerTable" style="height: 100px"> 
     <tr> 
      <td width="934px"> 
      <img src="../Images/Header.jpg" 
       alt="Image Missing" id="ImgBanner" align="left"/></td> 
     </tr> 
</table> 

Answer 1

Il y a une façon beaucoup mieux fais ce que tu fais.

Tout d'abord --- vous ne devriez vraiment pas utiliser de tables du tout. Cela étant dit, vous devez utiliser divs.

Un conteneur pour tout contenir.

A l'intérieur, un pour la bordure gauche et droite. Utilisez CSS pour définir l'image d'arrière-plan. répétez-y dessus.

Votre table devra également entrer dans un.

<div class="container"> 
    <div class="leftBorder"></div> 
    <div> 
     Your table 
    </div> 
    <div class="rightBorder"></div> 
</div> 

Si vous rencontrez des problèmes de votre conteneur principal non la hauteur en supposant qu'il enfants, regardez dans clearfix