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 --><!-- 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 --><!-- RSS_comment_snippet start --> <br> <div style="float:right;margin-right:25px;color:#797;">Fri, 18 Nov 2011 11:36:35 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Это ж-ж-ж неспроста...</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">На самом деле есть масса ресурсов, которым по десять лет, и контент которых начинался создаваться еще до того, как CSS стал известен авторам :) <br> <br> Само собой, сейчас корректировать этот контент за все десять лет лениво. <br> Никто этим заниматься точно не будет. <br> <br> Плюс. <br> <br> Штуки вроде рсс каналов, на том конце которых ридеры, не понимающие стилей (они в RSS поток и не идут) тоже против убирания перевода строки. В ридерах абзацы зачастую ляпаются впритирку, читать просто невозможно. <br> <br> Поэтому BR-у быть и здравствоватть. <br> Недаром его высота зафиксирована на уровне HTML стандарта :) <br> Неспроста же...</div> <div style="clear:both;"></div> <div style="margin:10px;color:blue;text-decoration:underline;"><a href="http://trifler.ru/blog/connect_6c61IJ6f40E6e626fN2eHK.html">Lasto</a></div> <div style="clear:both;"></div> <!-- RSS_comment_snippet end --><!-- RSS_comment_snippet start --> <br> <div style="float:right;margin-right:25px;color:#797;">Fri, 18 Nov 2011 12:05:41 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Ничего против...</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Стандарты, стандартами, но... <br> Должны быть какие-то общепринятые правила правильного оформления текста, что собственно и укладывается в грамотную верстку оного и как следствие - "ничего лишнего" в html-коде быть не должно. <br> <br> То, что лениво, то как же без того, что сначала создаем себе проблемы, а потом пытаемся преодолеть возникающие трудности :) <br> <br> С RSS, да есть такая фишка, но все течет, все меняется :) <br> <br> Но, как написал, больше всего интересовал вопрос, сколько же весит высота BR в пикселях :)</div> <div style="clear:both;"></div> <div style="margin:10px;color:blue;text-decoration:underline;">gordi</div> <div style="clear:both;"></div> <!-- RSS_comment_snippet end --><!-- RSS_comment_snippet start --> <br> <div style="float:right;margin-right:25px;color:#797;">Mon, 12 Dec 2011 02:01:13 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Почему же никто не будет?</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Совсем недавно проделала такую штуку, заменив в файлах старых постов BR на пустоту. :) <br> Естественно, не ручками - для этого пригодно море софта, который проделает данную операцию для сотен файликов в считанные секунды. <br> Никаких проблем.</div> <div style="clear:both;"></div> <div style="margin:10px;color:blue;text-decoration:underline;"><a href="http://trifler.ru/blog/connect_6dA64MA64626f6f6b40O616e64AN2eHK.html">VM</a></div> <div style="clear:both;"></div> <!-- RSS_comment_snippet end --><!-- RSS_comment_snippet start --> <br> <div style="float:right;margin-right:25px;color:#797;">Mon, 12 Dec 2011 15:11:24 GMT</div> <div style="clear:both;"></div> <div style="margin-left:10px;color:#575;font-weight:bold;">Старые привычки...</div> <div style="clear:both;"></div> <div style="margin:10px;color:#333;">Многим просто удобно, добавлять пустоту с помощью BR :) <br> Привыкли, в чем нет ничего плохого и иногда это является альтернативой стилям. <br> <br> </div> <div style="clear:both;"></div> <div style="margin:10px;color:blue;text-decoration:underline;">gordi</div> <div style="clear:both;"></div> <!-- RSS_comment_snippet end --><!-- 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