05 июля 2017

Рамка многослойная "столбиком"

Для размещения материала в сообщении столбцом, можно использовать многослойные рамки - "столбики".  Размещаются рамки в таблице с соответствующим числом колонок, например, 1 строка и 2 колонки (1 х 2).

HTML код таблицы следующий:



 Пример:

д
-- 1
содержимое рамки 2
со---------------3
содержимое рамки 1
содержимое рамки 2
содержимое рамки 3


 HTML код бежевой рамки:

<table width="300" height="58" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/1/ramka_bezh_s_frukt_vverkhukh3001.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:2px">содержимое рамки 1</span></td></tr></table> <table width="300" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/1/ramka_bezh_s_frukt_vverkhu12.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:16px">содержимое рамки 2</span></td></tr></table> <table width="300" height="48" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/1/ramka_bezh_s_frukt_vverkhu123.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:2px">содержимое рамки 3</span></td></tr></table>

   В этих рамках только второй слой безразмерный и растягивается вниз. Верхний и нижний слои очень небольшой длины, они не предназначены для размещения в них содержимого. Кроме того, длина ограничена рисунком.
   Границу таблицы убираем, изменив в HTML коде таблицы значение "border" 2 на 0.

   HTML код рамки трехслойной столбиком:

<table width="ШИРИНА в px" height="ДЛИНА в px" style="border:0px none #000000;background-image:url(http://АДРЕС ССЫЛКИ НА КАРТИНКУ 1.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:16px">содержимое рамки 1</span></td></tr></table> <table width="ШИРИНА" style="border:0px none #000000;background-image:url(http://АДРЕС ССЫЛКИ НА КАРТИНКУ 2.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:16px">содержимое рамки 2</span></td></tr></table> <table width="ШИРИНА" height="ДЛИНА" style="border:0px none #000000;background-image:url(http://АДРЕС ССЫЛКИ НА КАРТИНКУ 3.jpg)" cellspacing="0" cellpadding="0"><tr><td style="padding:10px" align="center"><span style="color:#000000;font-size:16px">содержимое рамки 3</span></td></tr></table>

   Отредактировать указанный HTML код:
   Проставить размеры картинок. Если верхняя и нижняя картинки искажаются, изменить размеры шрифта (зависит от рисунка). 

Комментариев нет:

Отправить комментарий

Related Posts Plugin for WordPress, Blogger...