JS-маньяк
Покинул форум
Сообщений всего: 2109
Дата рег-ции: Июль 2004
Откуда: Липецк
Карма 17
|
Очень часто табличная вёрстка сайта даёт очень странные эффекты: всё разъезжается, картинки плотно друг к дружке не прилегают, смещаются, бедлам, одним словом. Например:
CODE:<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px">
<img src="image2.gif" height="50px" width="50px">
</td></tr>
<tr><td>
<img src="image3.gif" height="20px" width="100px">
</td></tr>
</table> (Также см. рис. 1)
Отсавим в стороне разговоры о целесообразности такой конструкции и табличной вёрстки сайта вообще. Речь о том, что эти три картинки не будут чётко совмещены. Между ними будет промежуток примерно в 4 пикселя - достаточно, чтобы испортить внешний вид сайта. В чём дело? Ведь кроме картинок в ячейках таблицы ничего нет! На самом деле есть. Это перевод строки. Да-да, тот безобидный символ (или пара символов), который добавляется клавишей Enter! Теоретически, браузер должен обращать на него не больше внимания, чем на стоящий на мониторе кактус, но увы...
Можете скопировать приведённый код в хтмл-файл и посмотреть (отсутствие у вас файлов image-раз-два-три.gif ничего не меняет). Можете заодно поcтавить таблице свойство border="1", дабы увидеть "игнорируемые браузером" переводы строки во всей "красе". Ещё в их поиске очень помогает команда "выделить всё".
Наверняка многие сталкивались с подобной проблемой. Кто-то догадывался, в чём дело и делал естественный вывод: не использовать переводы строки или размещать их иначе, например так:
CODE:<table border="0" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px"><img src="image3.gif" height="50px" width="50px"></td>
</tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"></td>
</tr>
</table> (Рис. 2)
Это, разумеется, работало правильно (переводы строки между слжебными тегами table, tr и td действительно игнорируются, как и пробелы и символы табуляции). Но очень страдает читабельность кода. Тем более, что картинок в ячейке может быть и пять и десять. Такую длинную строку довольно сложно прочесть и тем более править. Есть другой путь! Он основывается на том, что внутри тегов может быть сколько угодно мусора, т.е. CODE:<img src="1.jpg"
alt=":-)"
> вполне работоспособен. Таким образом, приведённый выше пример можно записать так:
CODE:<table border="1" cellpadding="0" cellspacing="0">
<tr><td>
<img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr>
<tr><td>
<img src="image2.gif" height="20px" width="100px"
></td></tr>
</table> (См. рис. 3)
Т.е. перевод строки без ущерба для дела мы смещаем внутрь тега. Приноровившись, можно так писать всегда, даже там, где это не необходимо, т.е. получать примерно такой CODE:<table border="0" cellpadding="0" cellspacing="0"
><tr><td
><img src="image.gif" height="50px" width="50px"
><img src="image3.gif" height="50px" width="50px"
></td></tr
><tr><td
><img src="image2.gif" height="20px" width="100px"
></td></tr
></table> (рис. 4)
Это совсем не сложно.
 Фактически, это статья, впоследствии я размещу её на сайте. Жду критики, замечаний, отзывов
Прикреплено изображение
|
Чат на форуме
Помощь
Поиск
Описание: Перенос строки в коде даёт пробел на странице. Способ борьбы.
=> 
Я сначала не понял даже => 
=> !! 