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

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

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-элементы более востребованы: анализ 8 млн страниц с позиции SEO

Когда долго занимаешься SEO, многие вещи становятся банальными. Прописать title, description, alt для изображений — что...

Подробнее
Еще один способ использовать SVG в React. На этот раз удобный

SVG-изображения можно вставлять непосредственно в html, можно использовать символьные спрайты, теги , и даже . Можно...

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

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

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

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

Подробнее

💬 Комментарии

В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.

🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.

💡 Хотите обсудить материал?

Присоединяйтесь к нашему Telegram-каналу:

https://t.me/tcsecms

Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями

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