Вертикальная граница изображения меняет выравнивание, когда экран не развернут - PullRequest
Новая
       3

Вертикальная граница изображения меняет выравнивание, когда экран не развернут

0 голосов
/ 28 апреля 2010

У меня есть довольно простой HTML-код с несколькими таблицами для упорядочивания различных элементов текста или изображений. Все работает отлично, за исключением того, что мне нужно разместить вертикальную границу как с левой, так и с правой стороны экрана. Я могу сделать это с изображением 2x2 пикселей, которое я растягиваю. Когда у пользователя развернут экран, все выглядит отлично. Но когда пользователь нажимает «Восстановить вниз», границы остаются на своих местах, а таблицы сдвигаются вниз, так что они начинаются ниже, где заканчиваются границы, что находится за пределами экрана. другими словами, реляционное выравнивание между границами и таблицами все испорчено. Кто-нибудь знает, как сделать это выравнивание постоянным при восстановлении? Я новичок в html и asp, так что говорите медленно. Если есть лучший способ сделать это, я весь слух. Спасибо.

Вот соответствующий раздел кода: 

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

1 Ответ

0 голосов
/ 28 апреля 2010

Существует гораздо лучший способ сделать то, что вы делаете.

Прежде всего --- вам действительно не следует использовать таблицы вообще.

С учетом вышесказанного вам нужно использовать div.

Контейнер для всего.

Внутри этого, для левой и правой границы. Используйте CSS, чтобы установить фоновое изображение. Повторите на этом.

Твой стол тоже должен быть в таблице. 

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

Если вы столкнулись с проблемами вашего основного контейнера, не считая высоты его дочерних элементов, посмотрите clearfix

...