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_1326559502.html <p>Многие публикации содержат помимо текста - картинки, графики всевозможные, выполненные виде превьюшек. Для более детального ознакомления с графикой придумано много способов и основном для этих целей юзается JavaScript, зачастую не мерянных оъемов.</p> <p>Автор сего блога ни разу не программист и ему проще сваять нечто подобное на чистом html и css.</p> <p>Рассматриваем частную задачу, а именно - есть картинка, клик по ней не отправляет посетителя на новую страницу, он открывает туже картинку (может быть иной) в этом же окне без перезагрузки браузера, клик по любой точке открывшегося слоя все возвращает в исходное состояние.</p> <p>html</p> <pre class="pre"> &lt;div class="clicimg"&gt; &lt;img tabindex="1" src="XXX.xxx"&gt; &lt;dl&gt; &lt;dt&gt;&lt;/dt&gt; &lt;dd&gt;&lt;img src="XXX.xxx"&gt;&lt;/dd&gt; &lt;/dl&gt; &lt;/div&gt; </pre> <p>css</p> <pre class="pre"> .clicimg {margin:10px 25px 0 20px;} .clicimg img { border:none;cursor:pointer; display:block;outline:0;width:200px;height:auto; } .clicimg dl {display:none;} .clicimg dl dd { background:#ccc;cursor:pointer;position:fixed; top:5%;bottom:5%;left:20%;right:20%;z-index:100; vertical-align:middle;width:600px;text-align:center; } .clicimg dl img { border:#ccc 1px solid;margin:4px auto;width:470px;height:auto; } .clicimg dt { background:#000;opacity:0.4;filter:alpha(opacity=40); position:fixed;top:0;left:0;z-index:1;width:100%;height:100%; } .clicimg :focus + dl, .clicimg :active + dl {display:block;} .clicimg dl:hover {display:block\0/;} </pre> <style type="text/css"> .clicimg {margin:10px 25px 0 20px;} .clicimg img { border:none;cursor:pointer; display:block;outline:0;width:170px;height:auto; } .clicimg dl {display:none;} .clicimg dl dd { background:#ccc;cursor:pointer;position:fixed; top:5%;bottom:5%;left:20%;right:20%;z-index:100; vertical-align:middle;width:600px;text-align:center; } .clicimg dl img {border:#ccc 1px solid;margin:4px auto;width:470px;height:auto;} .clicimg dt { background:#000;opacity:0.4; filter: alpha(opacity=40); position:fixed;top:0;left:0;z-index:1;width:100%;height:100%; } .clicimg :focus + dl, .clicimg :active + dl {display:block;} .clicimg dl:hover {display:block\0/;} </style> <div class="clicimg" style="float:left;"> <img tabindex="1" src="../blog/i/image/clikimg1.jpg" title="Рассмотреть подробно"> <dl> <dt></dt> <dd><img src="../blog/i/image/clikimg1.jpg"><p>Какой-то текст</p><p>Много текста...</p></dd> </dl> </div> <p> Пояснений ни к html-коду, ни к стилям не предусмотрено, все достаточно очевидно и прозрачно. Настройки параметров, как в исходном состоянии, так и во всплывающем слое достаточно просты и обладают соответствующей гибкостью для любой разметки web-страницы.</p> <div class="clicimg" style="float:right;"> <img tabindex="1" src="../blog/i/image/clikimg2.jpg" title="Рассмотреть подробно"> <dl> <dt></dt> <dd><img src="../blog/i/image/clikimg2.jpg"></dd> </dl> </div> <p> Есть проблема центрирования картинки по вертикали во всплывающем слое, но предложенное решение лишь только демонстрация возможностей "Каскадных таблиц стилей", позволяющих не использовать JavaScript без необходимости и может пригодиться всем тем, кто далек от программирования или владеет им на уровне метода "научного тыка" :)</p> <p>Все работоспособно в современных браузерах.</p> <p>В IE8 после клика на любую точку всплывающего слоя, необходимо вынести курсор мыши за пределы рабочей области окна браузера.</p> <p>IE6(7) отдыхают :)</p> <p><a href="../blog/i/image/clikimg.htm">Демо-пример</a></p> <p>К плюсам можно отнести отвязку от движка CMS.</p> <p>Может быть актуальным для Gold Shop Lasto при оформлении лотов магазина насыщенных графикой. Простое копирование html-конструкции в тело лота и размещение стилей в оснофном файле стилей во многом упростит работу web-мастера по предоставлению более детальной информации о товаре.</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1326559502.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1326559502.html">All Comments</a></div> <!-- RSS_link_to_post end --> Sat, 14 Jan 2012 22:45:02 GMT http://trifler.ru/blog/post_1321592624.html <p>При просмотре html-кода того или иного ресурса, всегда обращаю внимание на форматирование текста контентной части web-страницы. Что удивительно, в большинстве случаев, многие совершенно не используют возможности «Каскадных таблиц стилей».</p> <p>Об этом и хочется поговорить.</p> <p>Что очень часто приходится лицезреть?</p> <p>Картинка до смешного проста - текст разбит тегами:</p> <pre class="pre"> &lt;p&gt;Текст...&lt;/p&gt; &lt;p&gt;Много текста...&lt;/p&gt; &lt;p&gt;И снова текст...&lt;/p&gt;</pre> <p>И вся эта радость вместо того, чтобы задать для тега &lt;p&gt; в таблице стилей соответствующие поля и отступы:</p> <pre class="pre"> p {margin:XXpx XXpx;padding:XXpx XXpx;}</pre> <p>приобретает лишенного всякого смысла вид:</p> <pre class="pre"> &lt;p&gt;Текст...&lt;/p&gt;&lt;br&gt; &lt;p&gt;Много текста...&lt;/p&gt;&lt;br&gt; &lt;p&gt;И снова текст...&lt;/p&gt;&lt;br&gt;</pre> <p>Кстати тег &lt;br&gt; может находиться и внутри тега &lt;p&gt; перед его закрывашкой, что в общем-то все равно. Казалось бы ну и что в том особенного, как известно на вкус и цвет...</p> <p>Но меня заинтересовал другой вопрос, а сколько, же в пикселях на самом деле высота тега &lt;br&gt;?</p> <p>Эксперимент был проведен тут же, и выяснилось, что высота тега &lt;br&gt; приблизительно составляет 18px.</p> <p>Осталось решить, как оформить запись для тега &lt;p&gt; в таблице стилей. На самом деле тут есть нюанс, связанный с margin, лучшим оказался такой вариант:</p> <pre class="pre"> p {margin:0 XXpx;padding:9px 0;}</pre> <p>Попутно было установлено, что один неразрывный пробел, энным количеством которого создают красную строку в параграфе, имеет ширину в 3px.</p> <p>Оптимальное задание стилей для параграфа может быть таким:</p> <pre class="pre"> p {margin:0 XXpx;padding:9px 0;text-indent:24px;}</pre> <p>На вопрос, как быть, если на ресурсе есть не один десяток постов и удалять тег &lt;br&gt; после включения в файл стилей предлагаемой записи для &lt;p&gt; в ручную лениво, могу посоветовать попробовать такой трюк:</p> <pre class="pre"> br {display:none;} или p br {display:none;}</pre> <p>Имеет право на жизнь, но надо смотреть, что из этого выйдет :)</p><!-- RSS_link_to_post start --> <br> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1321592624.html">Оставить комментарий</a></div> <div style="margin-left:10px;color:#575;font-weight:bold;"><a href="http://trifler.ru/blog/post_1321592624.html">All Comments</a></div> <!-- RSS_link_to_post end --> Fri, 18 Nov 2011 11:03:44 GMT