Русскоязычные документы веб-мастеру готовы к употреблению
Где вы зарабатываете больше всего?
Яндекс.Директ
Google Adsens
Sape
Begun
Setlinks
Mainlinks
Blogun

В этой статье я расскажу о особенностях в 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%.

Автор статьи - Zealot www.rupixel.com

Комментарии

Имя 

 

[15.10.08] Урок фотошоп Рисование фракталов

[14.10.08] Плагины для Photoshop Добавлено парочку новых.

[13.10.08] Пиксельные шрифты Добавлено 11 шрифтов.

[10.10.08] Урок фотошопа Как нарисовать дерево.

[05.10.08] JavaScript Новая документация.

[03.10.08] Plug-ins Пару новых плагинов для фотошопа.

[01.10.08] Урок фотошопа Старая фотография.

[01.10.08] Урок фотошопа Сказочный текст.

[30.09.08] PERL статьи 3 новых интересных статьи.

[30.09.08] PHP статьи Полосатая таблица.

[29.09.08] WEB документация На сайте появились учебники и книги.

[18.09.08] Урок Фотошопа Ледяной текст 2.

[16.09.08] Урок Фотошопа Mp3 Player.

[15.09.08] Урок Фотошопа Огненный текст.

Все новости
Рейтинг@Mail.ru
Александр Акимов
ICQ:
Mail: odvd@ya.ru