Iwasawafag 26.02.2011 10:42 какой-то херни

Привет всем, меня зовут Андрей, я кулл рашн дизайнер из замкадья. Хочу чтобы вы посоветовали как мне оформить blockquote как на картинке

Есть несколько вариантов:
1. Сделать очень длинную картинку на фон с кавычкой и бордером и белым цветом слева от бордера. (вложенный во что-то будет выглядеть, как говно)
2. Яваскриптом детектить местонахождение всех блокквотов и абсолютным позиционированием лепить кавычки (возможны прорехи в случае блокквота в спойлере)
3. Яваскриптом заворачивать блокквот в какой-нибудь дополнительный див, которому на фон вешать кавычки.

1. SirAnthony 26.02.2011 10:44 Home

Это цитата, или назвать тебя криворуким и ответить?

2. IwasawafagSirAnthony /1 26.02.2011 10:44 какой-то херни

это серъёзный вопрос, йоба!
как сверстать?

3. DarkElve 26.02.2011 10:46 Home

а что мешает вровнять по левому краю мелкую картинку с кавычкой, а текст марджином сдвинуть вправо на ширину этой фигни?

4. IwasawafagDarkElve /3 26.02.2011 10:48 какой-то херни

картинку бы лучше бэкграундом прикрутить, чтобы не надо было каждый раз руками к блокквоту добавлять. Или скриптом добавить и спозиционировать флоатом и марджином (третий вариант из ОП-поста)

5. DarkElveIwasawafag /4 26.02.2011 10:49 Home

да это, тащемта, делается без скрипта цссом. Картинка именно бэкграундом и пойдет, да.

6. SirAnthonyIwasawafag /2 26.02.2011 10:49 Home

Во первых выкини все мысли о яваскрипте. Он не нужен при версте вообще. Если ты не можешь что-то сверстать, мудак либо ты, либо дизигнер(но тут уже ничего не поделаешь, нужны костыли). Во вторых не нужна длинная полоска, оно же одноцветное, сделай 1px вертикальную в бекграунд и repeat-x; Картинка: есть два варианта: 1. совать ее в тот же див, где и цитата, и толкать позиционированием обратно, при этом накладывая паддинг диву, 2. Либо два дива. В первом ты вставляешь кавычку как картинку, черную полоску, как бекграунд, во втором диве текст, бекграунд — 1px полоска, хотя, наверное даже лучше без картинки вообще, оно же совсем одноцветная, просто цвет бекграунду

7. SirAnthonySirAnthony /6 26.02.2011 10:49 Home

поток мыслей, но ты понел.

8. SirAnthonySirAnthony /6 26.02.2011 10:51 Home

кстати, да, черную полоску можно вообще бордером сделать же

9. DarkElveSirAnthony /8 26.02.2011 10:52 Home

ну кавычку тоже можно на font-size: 52px; насадить, например.

10. DarkElveSirAnthony /8 26.02.2011 10:52 Home

а однотонный цвет в кодах в бэкграунд вогнать :)

11. SirAnthonyDarkElve /9 26.02.2011 10:53 Home

Костыли-костылики, но можно, да.

12. DarkElveSirAnthony /11 26.02.2011 10:53 Home

да ну почему костылики? Я предпочитаю называть это веб2.0 ;) И никаких лишних обращений к серверу.

13. SirAnthonyDarkElve /12 26.02.2011 10:55 Home

Во первых веб20 это совсем другое, учи матчасть. Проблема при этом будет состоять в шрифтах. У заказчика может подефолту стоять что-нибудь безумное, и он не примет, потому что у него выглядит как говно, а у тебя все правильно

14. Iwasawafag 26.02.2011 10:55 какой-то херни

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

blockquote {
line-height: 14px;
font-size: 11px;
margin-left: 64px;
font-style: italic;
background-color: #EEE;
padding: 10px;
border-left: 2px solid #323232;
}

полоска делается бордером, цвет цитаты немного темнее фонового. Кавычки хочу вынести _за_ бордер, то есть влево от блока. Позиционировать бэкграунд-старт, кроме хрома, умеют не многие.
хотелось бы получать желаемый вид из одного лиш блокквота.

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

15. DarkElveSirAnthony /13 26.02.2011 10:56 Home

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

16. IwasawafagDarkElve /12 26.02.2011 10:57

имел в виду css2 ?

17. SirAnthonyIwasawafag /14 26.02.2011 10:58 Home

>цвет цитаты немного темнее фонового в p ее сунь, и там крути ее настройки, это правильнее будет. Сразу задать именно ей паддинги. >Позиционировать бэкграунд-старт даже эксплорер умеет. Пиши длинный вариант описания бекграунда.

18. DarkElveIwasawafag /16 26.02.2011 10:58 Home

нет, просто веб2.0 в свое время приучил людей к мокрым полам и большим шрифтам. Сейчас это уже почти отмерло, к счастью.

19. IwasawafagSirAnthony /17 26.02.2011 10:58 какой-то херни

речь не об отрицательном background-position, а именно что о бэкграунд старте. И то

20. SirAnthonyDarkElve /18 26.02.2011 10:59 Home

Опять же это не веб2.0 это коммерческое говно. Суть веб2.0 в юзабилити а не в круглых углах

21. IwasawafagIwasawafag /19 26.02.2011 10:59 какой-то херни

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

22. DarkElveSirAnthony /20 26.02.2011 11:00 Home

ДА ТЫ ШТО? ПРАВДА? Как неожиданно то!

23. SirAnthonyIwasawafag /21 26.02.2011 11:01 Home

Но зачем это все? Делай позишном, не мучайся, если уж так хочется в бекграунд

24. IwasawafagSirAnthony /23 26.02.2011 11:03 какой-то херни

я не понимаю, как ты предлагаешь это реализовать.

Есть тег блокквот. Всё, чего я могу от него добиться — другого фонового цвета в данной ситуации и бордера. Картинку с кавычкой надо или лепить родителю или соседнему с блокквотом диву, которого по-дефолту нет.
Или рисовать длинную картинку с кавычкой и бордером, а содержимое позиционировать паддингом, как я предложил в ОП-посте.

25. DarkElveIwasawafag /24 26.02.2011 11:05 Home

блокквот можно впердолить внутрь дива, например, и уже внутри этого дива всё выравнивать. Врапперы никто не отменял же.

26. IwasawafagDarkElve /25 26.02.2011 11:10 какой-то херни

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

27. SirAnthonyIwasawafag /24 26.02.2011 11:10 Home

.blockquote { background: url('quote.png') no-repeat -20px 0px #EEE; } Как-то так

28. IwasawafagSirAnthony /27 26.02.2011 11:12 какой-то херни

ок, ты расположил кавычку. Но она уже на сером фоне, ешё и текст на ней, а бордер получится слева. Это уэе совсем не то, что в оп-посте

Разсположить кавычку внутри блокквота и сделать отступ я не просил, спасибо. Ты не смог обоснованно назвать меня криворуким и мудаком.

29. IwasawafagIwasawafag /28 26.02.2011 11:12 какой-то херни

расположить*

30. SirAnthonyIwasawafag /28 26.02.2011 11:13 Home

Оно толкает? Тогда родителю только. Мне негде играться же.

31. SirAnthonyIwasawafag /28 26.02.2011 11:14 Home

Обоснование в идеях использования жс.

32. IwasawafagSirAnthony /31 26.02.2011 11:14 какой-то херни

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

33. IwasawafagIwasawafag /32 26.02.2011 11:15 какой-то херни

в худшем случае те, у кого отключен JS просто не увидят " и только лишь.

34. SirAnthonyIwasawafag /32 26.02.2011 11:15 Home

ты не можешь в шаблоны?

35. Akirame-Miko 28.02.2011 05:27 ConsumeWorkDie

>Яваскриптом
:C
а чего не флешом или не сильверлайтом?

Do you really want to delete ?