Iwasawafag
26.02.2011 10:42 какой-то херни
Привет всем, меня зовут Андрей, я кулл рашн дизайнер из замкадья. Хочу чтобы вы посоветовали как мне оформить blockquote как на картинке 
Есть несколько вариантов:
1. Сделать очень длинную картинку на фон с кавычкой и бордером и белым цветом слева от бордера. (вложенный во что-то будет выглядеть, как говно)
2. Яваскриптом детектить местонахождение всех блокквотов и абсолютным позиционированием лепить кавычки (возможны прорехи в случае блокквота в спойлере)
3. Яваскриптом заворачивать блокквот в какой-нибудь дополнительный див, которому на фон вешать кавычки.
35 comments
recommend
bookmark
subscribe
Это цитата, или назвать тебя криворуким и ответить?
это серъёзный вопрос, йоба!
как сверстать?
а что мешает вровнять по левому краю мелкую картинку с кавычкой, а текст марджином сдвинуть вправо на ширину этой фигни?
картинку бы лучше бэкграундом прикрутить, чтобы не надо было каждый раз руками к блокквоту добавлять. Или скриптом добавить и спозиционировать флоатом и марджином (третий вариант из ОП-поста)
да это, тащемта, делается без скрипта цссом. Картинка именно бэкграундом и пойдет, да.
Во первых выкини все мысли о яваскрипте. Он не нужен при версте вообще. Если ты не можешь что-то сверстать, мудак либо ты, либо дизигнер(но тут уже ничего не поделаешь, нужны костыли). Во вторых не нужна длинная полоска, оно же одноцветное, сделай 1px вертикальную в бекграунд и repeat-x; Картинка: есть два варианта: 1. совать ее в тот же див, где и цитата, и толкать позиционированием обратно, при этом накладывая паддинг диву, 2. Либо два дива. В первом ты вставляешь кавычку как картинку, черную полоску, как бекграунд, во втором диве текст, бекграунд — 1px полоска, хотя, наверное даже лучше без картинки вообще, оно же совсем одноцветная, просто цвет бекграунду
поток мыслей, но ты понел.
кстати, да, черную полоску можно вообще бордером сделать же
ну кавычку тоже можно на font-size: 52px; насадить, например.
а однотонный цвет в кодах в бэкграунд вогнать :)
Костыли-костылики, но можно, да.
да ну почему костылики? Я предпочитаю называть это веб2.0 ;) И никаких лишних обращений к серверу.
Во первых веб20 это совсем другое, учи матчасть. Проблема при этом будет состоять в шрифтах. У заказчика может подефолту стоять что-нибудь безумное, и он не примет, потому что у него выглядит как говно, а у тебя все правильно
ну да, допихать к каждому блокквоту дивов не проблема. Сейчас это выглядит так:
blockquote {
line-height: 14px;
font-size: 11px;
margin-left: 64px;
font-style: italic;
background-color: #EEE;
padding: 10px;
border-left: 2px solid #323232;
}
полоска делается бордером, цвет цитаты немного темнее фонового. Кавычки хочу вынести _за_ бордер, то есть влево от блока. Позиционировать бэкграунд-старт, кроме хрома, умеют не многие.
хотелось бы получать желаемый вид из одного лиш блокквота.
и что-то я не пойму, как ты это предлагаешь реализоват.
это не заказчик, это я себе шаблон верстаю
матчасть выучил, кэп. А если следовать логике говна у заказчика — проще пойти по пути японских дизайнеров и делать вообще весь сайт одним большим изображением.
имел в виду css2 ?
>цвет цитаты немного темнее фонового в p ее сунь, и там крути ее настройки, это правильнее будет. Сразу задать именно ей паддинги. >Позиционировать бэкграунд-старт даже эксплорер умеет. Пиши длинный вариант описания бекграунда.
нет, просто веб2.0 в свое время приучил людей к мокрым полам и большим шрифтам. Сейчас это уже почти отмерло, к счастью.
речь не об отрицательном background-position, а именно что о бэкграунд старте. И то
Опять же это не веб2.0 это коммерческое говно. Суть веб2.0 в юзабилити а не в круглых углах
и то оно позволяло не в пикселях задавать, кажется, а говорить откуда и до куда заливать. С учётом маргинов, без, с бордерами/без, с паддингами/без
ДА ТЫ ШТО? ПРАВДА? Как неожиданно то!
Но зачем это все? Делай позишном, не мучайся, если уж так хочется в бекграунд
я не понимаю, как ты предлагаешь это реализовать.
Есть тег блокквот. Всё, чего я могу от него добиться — другого фонового цвета в данной ситуации и бордера. Картинку с кавычкой надо или лепить родителю или соседнему с блокквотом диву, которого по-дефолту нет.
Или рисовать длинную картинку с кавычкой и бордером, а содержимое позиционировать паддингом, как я предложил в ОП-посте.
блокквот можно впердолить внутрь дива, например, и уже внутри этого дива всё выравнивать. Врапперы никто не отменял же.
ну в итоге это уже нетривиальный блокквот к которому руками надо прикручивать див. Каждый раз.
Такой костыль я конечно рассматривал, но вот заворачивать в див предлагал JS-ом, чтобы не пихать к блокквоту костылей руками.
.blockquote { background: url('quote.png') no-repeat -20px 0px #EEE; } Как-то так
ок, ты расположил кавычку. Но она уже на сером фоне, ешё и текст на ней, а бордер получится слева. Это уэе совсем не то, что в оп-посте
Разсположить кавычку внутри блокквота и сделать отступ я не просил, спасибо. Ты не смог обоснованно назвать меня криворуким и мудаком.
расположить*
Оно толкает? Тогда родителю только. Мне негде играться же.
Обоснование в идеях использования жс.
ебошить каждый раз к блокквоту тысячи дивов считаю более не уместным, чем JS.
в худшем случае те, у кого отключен JS просто не увидят " и только лишь.
ты не можешь в шаблоны?
>Яваскриптом
:C
а чего не флешом или не сильверлайтом?