18 августа 2017

Рамка детская с лягушонком


содержимое рамки 1



HTML код этой рамки:

<table width="600" height="82" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_verkh.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 1</span></td></tr></table>
<table width="600" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_seredina.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 2</span></td></tr></table>
<table width="600" height="170" style="border:0px none #000000;background-image:url(http://lili-lilya2009.narod.ru/kartinki/zhulan/1/ramka_s_ljagushonkom_niz.png)" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" align="center"><span style="color:#000000;font-size:20px">содержимое рамки 3</span></td></tr></table>










содержимое рамки 3



 
.
   Для удобства размещения содержимого в рамке, чтобы текст читался, есть, как минимум, два варианта:
  • вместо слов "содержимое рамки..." первой разместить таблицу в 2 графы, шириной не больше ширины всей этой рамки (в данном случае до 600 px). При создании таблицы ширину правой ячейки, которая будет находится на зеленом фоне) установить не более  ширины зеленого фона (в данном случае до 340 px). И дальше в этой ячейке размещать содержимое (так сделано в этом примере);
  • вместо слов "содержимое рамки..." разместить полупрозрачный фон шириной равной ширине всей этой рамки (600 px).
   Внимание: при размещении содержимого (контента) в любой "сложной" рамке - как в данном примере трехуровневой или, как еще называют, трехслойной - следует следить за соблюдением размеров частей рамки, не допуская искажений. В разных браузерах картина может быть разной.

 

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

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

Related Posts Plugin for WordPress, Blogger...