Блоки комментариев на css без изображений


Собственно, ничего принципиально нового или фантастического. Просто способ сделать такие вот стильные блоки без использования изображений:

Блоки комментариев на css без изображений


Думаю, это много кому может пригодиться. У меня, например, есть несколько проектов, на которых этот способ было бы целесообразно использовать.

Код html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="www.w3.org/1999/xhtml" xml:lang="ru" lang="ru"><head><title>title</title><link rel="stylesheet" type="text/css" href="comments.css" /></head><body><h3>Летят как-то Петька с Василь Иванычем в самолёте</h3><p class="name">Вассиль Иваныч</p><div class="lt"><</div><div class="line"></div><p class="comments">Петька!!! Приборы!!!!</p> <div style="clear: both;"></div><p class="name">Петька</p><div class="lt"><</div><div class="line"></div><p class="comments">Триста сорок пять!!!!</p> <div style="clear: both;"></div><p class="name">Вассиль Иваныч</p><div class="lt"><</div><div class="line"></div><p class="comments">Что «триста сорок пять»!??</p> <div style="clear: both;"></div><p class="name">Петька</p><div class="lt"><</div><div class="line"></div><p class="comments">А что, б%%%ь, «приборы»!?</p> </body></html>




Код css:
* {font: normal 12px arial;}.name {float: left;width: 150px;display: block;text-align: right;padding-top: 8px;clear: both;}.comments {float: left;width: 30%;border: 2px solid red;padding: 10px 15px;}.line {height: 14px;width: 2px;float: left;position: relative;left: 2px;background: #fff;top: 23px;//top: 13px;}.lt {float: left;position: relative;left: 8px;top: 11px;//top: 1px;font: normal 28px verdana;z-index: 5;color: red;}


Само собой разумеется, код можно оптимизировать и совершенствовать. Тут показан только сам принцип.

Преимущества и недостатки метода описывать не буду — истина родится в комментариях :-)


Источник: Уроки CSS на Хабрахабре


Уважаемые посетители,
Если Вы хотите оставить заказ на разработку сайта или получить предварительную консультацию воспользуйтесь формой по ссылке ниже.
Обратная связь
Наш специалист ответит вам в течении суток.



Похожие публикации

Шаблон версии для печати print.tpl для DLE

Страница сайта предназначаемая для печати в современном вебе уже не так актуальна как во времена ЭЛТ-мониторов и отстуствия постоянного онлайна, но в некоторых областях до сих пор есть спрос на... читать далее

Хак сортировка новостей по цифровому коду

Хак предназначен для версии DLE 10.3 Добавляет возможность ручной установки "рейтинга" для новостей (в диапазоне от 1 до 999). После указания необходимого цифрового кода остается в настройках... читать далее

Оформление заглушки для сайта на время его обновления или ремонта

Время от времени возникает необходимость отключить сайт для проведения профилактических работ по обновлению скриптов. В движке ДЛЕ для этого есть специальный шаблон, позволяющий выводить статическую... читать далее

Как добавить виджет комментарии вконтакте для ДЛЕ-сайта

При помощи виджета ВКонтакте Вы можете за 5 минут добавить на Ваш сайт возможность комментирования статей и других материалов. 80 миллионов пользователей не только смогут моментально делиться своим... читать далее

Безумные книги / Книга «HTML, скрипты и стили. Наиболее полное руководство»

Перед нами «Наиболее полное руководство» — заявляется на обложке книги Вадима Дунаева. Сразу следует отметить, что книга издана в 2005 году, когда слово «стандарты» уже не было пустым звуком. Также... читать далее

Web-разработка / Верстка для мобильных устройств

Общая информация Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо... читать далее

Комментарии (1)

  1. #1 написал: Talik
    Группа: Администраторы
    24 июля 2009 10:50

    живой пример тоже вышел не плохо в целом :)

    • 0

       

Прокомментировать


@

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent

Архив сайта

Реклама на сайте