Блоки комментариев на 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 на Хабрахабре


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



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

[Из песочницы] Организация адаптивной верстки в БЭМ с SCSS

Одна из главных сложностей возникающая у многих фронтенд-разработчиков при использовании методологии БЭМ в CSS — это способ организации адаптивной вёрстки. Как известно блоки и элементы должны быть... читать далее

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

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

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

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

Блог им. Andruhon / Проблема с css в firefox при указанном doctype

Сегодня пол часа потратил на необычную для меня проблему: Документ во всех браузерах отображается нормально, а в файрфоксе почему-то не работали стили. Проблема возникла только, после помещения сайта... читать далее

Безумные книги / Книга «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

Архив сайта

Реклама на сайте 747 drawing military on BJ Ambis Art