В этой статье я расскажу о особенностях в html которые должен знать
каждый. Я расскажу как обойти ошибку на которые я сам натыкался. Без
того что я расскажу будет сложно в будущем. Нередко возникают вопросы у
веб-мастеров о html. Рано или поздно сам находишь ошибки которые
совершал и раньше. В статье я буду говорить по большей части о
табличном html. Именно сложная структура сайта лежит в таблицах и
именно в них происходят сбои. В большом количестве таблиц можно лекго
запутаться и когда потом открываешь свой код немного позже бывает
сложно что-то найти и изменить.
Всем известно что для того чтобы страничка корректно отображалась при
разрешении 800x600 и 1024x768 нужно таблице прописывать width=100%. В
следствии чего она просто растягивается на весь экран в ширину. И
прописывать height=100% если вы хотите чтобы она растягивалась по
длине. Вот код такой таблицы:
Вроде бы всё нормально должно работать. Но может возникнуть ситуация
при которой таблица работает не совcем правильно. Например у вас две
ячейки. Одна меню, другая там где новости пишутся. Вы хотели бы чтобы
меню имело ширину 200, и ячейка с новостями растягивалась на всю
остальную страницу (width=100%). Обрадовавшись вы напишите вот что:
Но работать она к сожалению не будет правильно. Почему? Потому что
ячейка с новостями растянется на всю абсолютно страницу, т.е. меню не
будет видно(если конечно что-нибудь не вписать туда). Но даже если туда
что-то вписать она не будет иметь ширину 200 пикселей. Как же быть. Вот
ответ:
Для того чтобы ячейка с меню устоялась впихиваем туда таблицу с такой
же шириной. Для новостей уже не обязательно вписывать табличку, но на
всякий случай не помешает.
А теперь пора поговорить о багах которые могу произойти в этом случае.
Например у вас сверху картинка(логотип на сайте). Для неё вы создаёте
ячейку. А потом следующую за ней с таким фоном как у картинки чтобы как
бы продолжался топ. Для этой второй ячейки вы ставите width=100%. Далее
переходите ниже - делаете меню и новости. Вроде бы всё хорошо и всё
работает при всех разрешениях. Вот код:
Но
попробуйте в новости запихнуть баннер 768x60. Или написать слово из 50
символов. У вас сразу появиться нижний скроллинг. Табличка с новостями
будет работать не правильно, она будет растягиваться не так. Чтобы
избежать ячейки где логотип помещён поставить значение ширины 100%. А
вторую ячейку убрать. Даже если вам надо ещё в конце картинку - вы её
ставите во вторую ячейку, а первой всё равно ставите width=100%
