http://trifler.ru/blog/ Lasto Blogging Engine ru gordi serg_gordi@mail.ru serg_gordi@mail.ru http://trifler.ru/blog/i/lastoblog.png http://trifler.ru/blog/ http://trifler.ru/blog/post_1279918596.html <p>В большинстве случаев подобного рода изыск нужен только для того, чтобы при отключенной графике на ее месте появлялся текст.</p> <p>В основном это касается шапки сайта.</p> <p>Ситуация выглядит следующим образом:</p> <ul><li>Основная часть header состоит из одного или нескольких графических файлов и имеет неоднородный фон, скажем градиент.</li> <li>На этом фоне расположен логотип – картинка или картинка с текстом на прозрачной подложке.</li> <li>Необходимо спрятать текст под логотипом.</li> <li>Логотип и текст появляющийся при отключенной графике должны быть кликабельны.</li></ul> <pre class="pre"> &lt;body&gt; &lt;div id="header"&gt; &lt;h1&gt; &lt;a href="путь к главной сайта"&gt;Имя сайта&lt;/a&gt; &lt;span onclick="location.href='путь к главной сайта'"&gt;&lt;/span&gt; &lt;/h1&gt; &lt;/div&gt; #header { background:url(header.jpg) no-repeat;position:relative; } #header h1 {position:absolute;top:XXpx;left:XXpx;} #header h1 a {font:bold XXpx Georgia;} #header h1 span { background:url(logo.png) no-repeat; position:absolute;top:XXpx;left:XXpx; } </pre> <p>Данный код лишь частный случай, все справедливо, если только logo.png имеет цвет подложки, совпадающий с header.jpg или в отсутствии header.jpg с его фоновой заливкой.</p> <p>Скриншоты:</p> <img src="i/image/text_01.jpg" style="display:block;margin:10px auto;width:498px;height:115px;"> <img src="i/image/text_02.jpg" style="display:block;margin:10px auto;width:382px;height:118px;"> <img src="i/image/text_03.jpg" style="display:block;margin:10px auto;width:498px;height:108px;"> <p>Нижний скриншот наглядно показывает проблему, если бы графический текст был бы выполнен на прозрачной подложке.</p> <p>Возможно, решение существует и оно намного проще моего, но то, что удалось сделать за пару минут, полностью меня устроило и искать, что-либо не было необходимости.</p> <p>Чип и Дейл, а вернее абсолютное позиционирование спешит на помощь.</p> <pre class="pre"> &lt;body&gt; &lt;a class="title_site" href="путь к главной сайта"&gt;Имя сайта&lt;/a&gt; &lt;div id="header"&gt; &lt;h1 onclick="location.href='путь к главной сайта'"&gt;&lt;/h1&gt; &lt;/div&gt; #header { background:url(header.jpg) no-repeat;position:relative; } #header h1 { background:url(logo.png) no-repeat; position:absolute;top:XXpx;left:XXpx; } a.title_site { font:bold XXpx Georgia;position:absolute; top:XXpx;left:XXpx; } </pre> <p>Для стилей в первом и во втором случае ряд параметров не указан, в частности это высота и ширина для logo.png и цвет фоновой заливки header’a.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1279918596.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1279918596.html">All Comments</a></div> <!-- RSS_link_to_post end --><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1279918596.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1279918596.html">All Comments</a></div> <!-- RSS_link_to_post end --> Sat, 24 Jul 2010 03:56:36 GMT