"Висячая" пунктуация. Как ее сверстать дивами?

[IceBerg]

Други, подскажите пожалуйста, как сверстать в дивах сие чудо? Я имею в виду конструкцию типа: открывающая кавычка, текст, который весь смещен вправо относительно этой кавычки, закрывающая кавычка, которая тоже смщена вправо относительно всего текста.

[Padonak]

ничо непонелл

[IceBerg]

Хочу, чтоб выглядело так:

Код: Выделить всё

" | первая строчка текста|
  | втарая строчка       |
  | третья и т.д. и т.п. |
      ...........
  | последняя            | "


И чтоб без табличек

[Muerto]

IceBerg
Можно попробовать что-нибудь типа такого:

Код: Выделить всё

<style>
q {
   padding:0 20px;   
   background:url(closequote.gif) 100% 100% no-repeat;
   display:list-item;
   width:500px;
   list-style-image: url(openquote.gif);
}
</style>
<q>
Зайти в гостевую любого пользователя, окрыть окно вставки сообщения, выбрать "Вставить видео", ссылка "Расширенный вариант". Появится возможность залить ролик в произвольный альбом.

Что касается вставки фото, то сейчас расширенная форма вставки фото дефектная-рядом со словом "альбом" вообще нет ничего, пусто. И фотографии сейчас принудительно заливаются в альбом "_guestbook".

Все ли верно, господа разработчики? В блогах, ответах, на форуме система совсем другая-при заливке по умолчанию предлагается служебный альбом, а пользователь сам в итоге решает как ему поступить удобнее-хранить в закрытом альбоме картинку, или в открытом-чтобы не копировать картинку по альбомам. Может не стоит нарушать корпоративные общие правила?
</q>

Хотя нет полной уверености, что это будет работать ваще, а уж тем более - нормально под разными браузерами. Пишу на коленке, проверять времени нету.

[IceBerg]

Muerto, присланный тобою же ранее в аське вариант был лучше и работал поти как мне это было надо. Разбираюсь.

[Muerto]

IceBerg
Дык там вложенные дивы! Семантика кода отсутствует! Надо этот вариант дорабатывать!

[Berezkin]

А как у Лебедева сделано?

[Muerto]

У Лебедева в таблице сделано.

Код: Выделить всё

<table><tr>
<td width="8%" align="right"><img src="http://img.artlebedev.ru/kovodstvo/sections/144/../i/q1.gif" alt="" width="32" height="31" hspace="10"></td>
<td width="51%">
<p>
Если хочешь сделать зловоние, возьми человеческий кал и&nbsp;мочу, вонючую лебеду, если&nbsp;же у&nbsp;тебя ее&nbsp;нет, капусту и&nbsp;свеклу, и&nbsp;вместе положи в&nbsp;стеклянную бутылку, хорошо закупоренную, и&nbsp;в&nbsp;течение месяца держи под навозом, затем брось, где хочешь произвести зловоние, так, чтобы она разбилась.

</td>
<td valign="bottom" width="33%"><img src="http://img.artlebedev.ru/kovodstvo/sections/144/../i/q2.gif" alt="" width="32" height="31"></td></tr>
</table>

Лишний код я вырезал.

[Berezkin]

А вот и нифига, там стилями... ну да ладно, порывшись пять минут в гугле нашел пример реализации. Правда там используется ЯваСкрипт.
http://archon.name/trash/quotes/

[Muerto]

Berezkin
Код выдрал из "ководства", зуб даю. http://www.artlebedev.ru/kovodstvo/sections/144/
А по ссылке я не обнаружил ничего напоминающего кавычки с отступом. Смотрел в ИЕ и ФФ.

[IceBerg]

Muerto, нет, по ссылке от Berezkinа как раз именно висячая пунктуация. В строчке начинающейся с «крап», это отчетливо видно. Левая кавычка печатается вне области текста. Это классический случай "типографской" висячей пунктуации. Если бы текст был еще и с правой выключкой, то знаки препинания (кавычки, запятые и тире) в конце строчек тоже висели бы за текстом. Но это не совсем то, что надо было мне (или все-таки то? :)). Работает эта дрянь в ИЕ7, фф3.0.4, но не работает в опере 9.62.

А твой вариант с тегами <q>...</q> так ни фига и не подгоню, чтоб везде отображалось одинаково.

[Muerto]

Добавь строчку
quotes: "" "";

[IceBerg]

Muerto, да я это уже сделал.
В моем случае все это теперь выглядит так:

Код: Выделить всё

...
<style>
q {
  padding:0 20px;
  margin-left: 20px;   
//   background:url('/images/template7/q2.gif') 100% 100% no-repeat;
  display:list-item;
//   width:500px;
  list-style-image: url('/images/template7/q1.gif');
  quotes: "" "";
}
.text {
  font-family: Times, Times New Roman;
  font-style: italic;
  font-size: 105%;
  color: #000000;
  text-align: left;
  line-height: 140%;
  margin-left: 5px;
}
</style>
<body>
  <q><span class="text>Текст</span></q>
...


Лишний код убран. В опере и ФФ я вижу почти то, что и хочу. А в ИЕ7 вижу ерунду. Откуда берется вторая открывающая кавычка?

[Muerto]

ИЕ7 не поддерживает quotes самое простое - поменять тег на cite. Кстати, в твоём случае это и семантически правильней будет. Мой недогляд, сорри. Виновата плохая водка, предновогодняя запара на работе и космос ещё чем то влияет.

[IceBerg]

Muerto, ты гений. я добился чего хотел.

[Muerto]

IceBerg
Ты код то выложи. Вдруг кому пригодится.

[Berezkin]

Muerto
Не оттуда выдирал
http://www.artlebedev.ru/kovodstvo/sections/120/ предпоследний абзац.

[Muerto]

Berezkin
Там картинка, не код. Да не совсем то надо было, что там описано. Просто взять в кавычки некий блок, чтобы кавычки лежали вне текста (а остальная пунктуация внутри). Но без излишних блоков кода. Т. е. в одном теге. Я просто забыл, что q сам добавляет кавычки, а cite не добавляет. Потом ещё у нас пошла идея чтобы закрывающая кавычка не висела вне блока, а закрывала по последнему символу. Я предложил псевдокласс after, но там для ИЕ надо экспрешн писать и мы отказались.

[Padonak]

Muerto, ты гений...

что есть то есть я тоже много раз это замечал за ним

[Muerto]

Padonak
Ну вот! А то всё алкаш, да алкаш!

[IceBerg]

Короче так, я поставил задачу, сделать некие блоки текста (цитаты людей) взятые в кавычки. Хотелось также, чтоб кавычки эти были вне области текста (висячая пунктуация). Затем задача несколько трансформировалась - закрывающую кавычку захотелось прилепить в конец последней строчки текста, а не выносить за границу блока. Благодаря Алексу задача порешалась так:

Сами кавычки выполнены картинками openquote.gif и closequote.gif.
В css написано:

Код: Выделить всё

cite {
  padding:0;
  margin-left: 25px;
  margin-top: 5px;
  vertical-align: top;
  display:list-item;
  list-style-image: url('openquote.gif');

  font-family: Times, Times New Roman;
  font-style: italic;
  font-size: 105%;
  color: #000000;
  text-align: left;
  line-height: 140%;
}


Ниже в теле html написано так:

Код: Выделить всё

  <cite>Собстна текст&nbsp;<img src="closequote.gif" class="qu"></cite>


В css в классе qu описано лишь, что картинку там надо по вертикали выровнять по нижнему краю. Иллюстрацию того как сие чудо выглядит, привожу картинкой. Если кому надо - пользуйте :)

[Padonak]

вот тоже решил поучаствовать. вижу требования к кавычкам немного изменились у тебя но это не страшно. просто в классах .quotemark_l и .quotemark_r надо убрать нах display: block в таблице стилей. маусовер и маусаут там чисто для прикола можно и отключить либо путем комментирования соотв. строк в скрипте либо их удалением.

[Alkeeper]

Код: Выделить всё

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru" lang="ru">
<head>
   <meta http-equiv="Content-Type" content="text/html;encoding=utf-8"/>
   <title>Квоте</title>
   <style type="text/css">
   #wrapper blockquote {
      display: block;
      border-left: 2px solid #757575;
      background-color: #EAEAEA;
      padding: 30px;
      width: 300px;
      font: 18px Tahoma, sans-serif;
      text-indent: -11px;
   }
   </style>
</head>
<body>
   <div id="wrapper">
      <blockquote>
         «В Омериках есть мнеого чудных идиотов, но все они почему-то богаты и знамениты»<br/>
         Иван Хуев, 1911 год, Париж.
      </blockquote>
   </div>
</body>
</html>

[kost]

Мне кажется, вы тут не к месту употребляете выражение «„висячая“ пунктуация». Это, скорее, декоративное оформление цитаты.