Чтобы дизайн сайта не разъехался в google chrome и safari
Структура построения сайта может быть разной. И даже если в коде нет ошибок, некоторые виды браузеров могут неправильно воспринимать код и в итоге отображать объекты дизайна по-своему - не так как нужно нам - то есть дизайн сайта разъезжается. В итоге приходится подстраиваться и под другие браузеры, чтобы быть уверенным, что сайт везде отображается правильно и посетитель видит не какую-нибудь налепленную бурду, а полноценный красивый сайт. Если не переделывать структуру сайта полностью (хотя и там не факт, что все станет на свои места:)), то есть два варианта:
1. Забить
2. Найти причину по которой браузер воспринимает код неправильно.
Первый вариант не очень впечатляет, поэтому стоит выбрать второй.
Для того, чтобы избежать возможных проблем с совместимостью сайта к браузерам google chrome и safari и чтобы шапка нашего сайта вдруг не разъехалась в данных браузерах, например при вставке широкого объекта на страницу, как это однажды случилось у меня. Я нашел оптимальный выход из положения, позволяющий сделать сайт более гибким и надеждым к таким возможным проблемам.
Итак, продолжаем, делаем заключительные корректировки сайта, но для начала вспомним наш код
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>
А теперь перейдем к делу. У нас сайт состоит из одной таблицы, то есть код заключен в одну таблицу, состоящую из нескольких строк и столбцов, и это может оказаться причиной того, что браузер, а именно google chrome, safari неправильно воспримет код и дизайн разъедется в шапке при вставке большого объекта на страницу, например очень широкого баннера. Показываю красным цветом нашу таблицу.
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>
Поэтому чтобы избежать возможных проблем и сделать сайт более гибким следует разбить код на несколько таблиц, как показано на рисунке. Можно каждый блок (шапка, контент, подвал) заключить в отдельную таблицу, но мы сделаем две таблицы, то есть первая таблица будет охватывать только шапку, вторая таблица будет охватывать контент и подвал. Почему именно две таблицы? Просто так захотелось мне, я не увидел надобности делать подвал как отдельную таблицу. Вот и все. Если вы понимаете как это делать, то пожалуйста, можете сделать сразу три, тем более что на следующих уроках мы эту третью колонку добавим. (Если добавите сразу, то и некоторые параметры тоже нужно будет поменять, например, убрать colspan="2"). Почему я сразу не могу добавить третью таблицу? Поймите, уроки делаются на ходу и переделывать потом ничего не хочется - довольно трудоемко. Но это для вас только плюс, больше практики - больше знаний!
Для этого достаточно лишь дописать в конце шапки закрывающийся тег </table> и сразу же после него начать новую таблицу <table width="100%" height="750" border="0" cellpadding="0" cellspacing="0">, а выглядеть это будет так:
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
</table>
</center>
</body>
</html>
НО ЭТО ЕЩЕ НЕ ВСЕ!!! Не спешите пока проверять, еще не все готово. Так как структура сайта поменялась и у нас начинается новая таблица, делаем следующее:
В первой и во второй таблице убираем параметр height="750", потом уберем в обоих строках шапки параметр width="100%", вместо него можем прописать align="left"
после шапки убираем атрибут colspan="2" в строке с контентом, он нам больше не понадобится:)
<tr>
<td height="517" colspan="2" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
Переходим к подвалу сайта
<tr>
<td height="45" colspan="3" background="images/kadrir.jpg"></td>
</tr>
Здесь необходимо поменять параметр colspan="3" на colspan="2", так как новая таблица содержит в себе не три ячейки в строке, а две, в итоге код получается таким:
<tr>
<td height="517" valign="top">На данном сайте вы найдете много интересных статей на тему компьютеров, также можете бесплатно скачать полезные программы.</td>
<td width="214" align="center" bgcolor="#daffbc">Меню сайта</td>
</tr>
Заказать статью
