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

Скрипты и советы | 23 июля 2009

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 на Хабрахабре
Web-разработка / Верстка для мобильных устройств

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

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

Время от времени возникает необходимость отключить сайт для проведения профилактических работ по обновлению скриптов. В...

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

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

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

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

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

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

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

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

Подробнее

Написать комментарий

  • Смайлы и люди
    Животные и природа
    Еда и напитки
    Активность
    Путешествия и места
    Предметы
    Символы
    Флаги
  1. живой пример тоже вышел не плохо в целом :)

    Talik Talik 24 июля 2009 10:50 Ответить