В этой статье я расскажу об особенностях html, которые должен знать
каждый. Я расскажу как обойти ошибки на которые я сам натыкался.
Нередко возникают вопросы у веб-мастеров о html. Рано или поздно сам
находишь ошибки которые совершал раньше. В статье я буду говорить по
большей части о табличном html. Именно сложная структура сайта лежит в
таблицах и именно в них происходят сбои. В большом количестве таблиц
можно лекго запутаться и когда потом открываешь свой код немного позже
бывает сложно что-то найти и изменить.
Всем
известно что для того чтобы страничка корректно отображалась при
разрешении 800x600 и 1024x768 нужно таблице прописывать width=100%. В
следствии чего она просто растягивается на весь экран в ширину. И
прописывать height=100% если вы хотите чтобы она растягивалась по
высоте. Вот код такой таблицы:
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td width=100%>
</td></tr><table>
Вроде бы всё нормально должно работать.
Но может возникнуть ситуация при которой таблица работает несовcем
правильно. Например, у вас две ячейки. Одна меню, другая - там где
новости пишутся. Вы хотели, чтобы меню имело ширину 200, и ячейка с
новостями растягивалась на всю остальную страницу (width=100%).
Обрадовавшись вы напишите вот что:
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0><tr>
<td width=200>меню</td>
<td width=100%>новости</td>
</td></tr><table>
Но работать она к сожалению не будет
правильно. Почему? Потому что ячейка с новостями растянется на всю
абсолютно страницу, т.е. меню не будет видно(если конечно что-нибудь не
вписать туда). Но даже если туда что-то вписать она не будет иметь
ширину 200 пикселей. Как же быть. Вот ответ:
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=200>
<table width=200 border=0 cellpadding=0 cellspacing=0><tr><td width=200>
меню
</td></tr></table>
</td>
<td width=100%>
<table width=100% border=0 cellpadding=0 cellspacing=0><tr><td width=200>
новости
</td></tr></table>
</td>
</tr></table>
Для того чтобы ячейка с меню устоялась
впихиваем туда таблицу с такой же шириной. Для новостей уже не
обязательно вписывать табличку, но на всякий случай не помешает. А
теперь пора поговорить о багах которые могут произойти в этом случае.
Например, у вас сверху картинка (логотип на сайте). Для неё вы создаёте
ячейку. А потом следующую за ней с таким фоном, как у картинки чтобы
как-бы продолжался топ. Для этой второй ячейки вы ставите width=100%.
Далее переходите ниже - делаете меню и новости. Вроде бы всё хорошо и
всё работает при всех разрешениях. Вот код:
<table width=100% height=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=1><img src=pix.gif border=0></td>
<td width=100%></td>
</tr>
<tr>
<td width=200 height=100%>
<table width=200 height=100% border=0 cellpadding=0 cellspacing=0>
<tr><td>
меню
</td></tr></table>
</td>
<td width=100% height=100%>
новости
</td>
</tr>
</table>
Но попробуйте в новости запихнуть баннер
768x60. Или написать слово из 50 символов. У вас сразу появиться нижний
скроллинг. Табличка с новостями будет работать не правильно, она будет
растягиваться не так. Чтобы избежать ячейки где логотип помещён
поставить значение ширины 100%. А вторую ячейку убрать. Даже если вам
надо ещё в конце картинку - вы её ставите во вторую ячейку, а первой
всё равно ставите width=100%.
|
Копирование материалов разрешено,