01:56

Реквестирую верстальщиков тред. Техподдержка для нубов, крутые примочки для матёрых верстальщиков. Убиваться об вёрстку - в хорошей компании! Вместе веселее.

URL комментария

@темы: эээ, Из жизни команд, ФБ-2014

Комментарии
20.06.2014 в 17:18

В стиле внешнего дива пропиши отступы, к чему лишние страдания?
Жги кодом, анонче @_@ Лично я теряюсь в том, что дайри сожрать могут, а что нет.
К слову, дайри-хтмл не дает же задать общий межстрочный отступ между абзацами?
20.06.2014 в 17:41

Жги кодом, анонче @_@ Лично я теряюсь в том, что дайри сожрать могут, а что нет. К слову, дайри-хтмл не дает же задать общий межстрочный отступ между абзацами?
Междустрочный - не знаю, не пробовал, а отступы в каждом абзаце задаются прописыванием во внешнем диве style="text-indent: значение;", а потом каждый абзац заворачивается в < p >
20.06.2014 в 18:35

Как минимальную прописывать?

например так:


посмотреть как выглядит
20.06.2014 в 18:37

черт, слишком светлый фон...
щас



выглядит так
20.06.2014 в 18:41

К слову, дайри-хтмл не дает же задать общий межстрочный отступ между абзацами?
межстрочный интервал режет - я проверял.
с прописанным межстрочным получается полная порнография, или же я что-то не так прописывал.
брал все про интервалы тут. надо сказать, вообще очень полезное руководство.
20.06.2014 в 18:45

межстрочный интервал режет - я проверял.
Ты меня прямо заинтересовал. Приду домой, попробую поковыряться
20.06.2014 в 18:47

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

анон, поделишься, если у тебя получится?
20.06.2014 в 18:48

анон, поделишься, если у тебя получится?
Агаг
20.06.2014 в 18:56

межстрочный у абзаца или всего текста? я просто задавала тексту и у меня не резалось
20.06.2014 в 18:58

межстрочный у абзаца или всего текста? я просто задавала тексту и у меня не резалось
Абзаца. У текста на дайри вроде все нормально
20.06.2014 в 18:59

межстрочный у абзаца или всего текста? я просто задавала тексту и у меня не резалось
я пытался прописать один раз во всем посте - получилось вообще отсутствие всяких интервалов.
если для прописывания интервалов надо параметр задавать больше пары раз - то нафиг такой код, пусть лучше выставляется автоматически. меньше символов потратится.
20.06.2014 в 19:01

я пытался прописать один раз во всем посте - получилось вообще отсутствие всяких интервалов.
Честно говоря, я понятия не имею, что дайри устраивает в рамках див, а какие коды он не жрет и требует прописывать отдельно для каждого элемента
20.06.2014 в 19:05

Вот это надо?

пример
20.06.2014 в 19:09

Вот это надо?
Ого, не через p. Не знал, не ведал.
20.06.2014 в 19:12

Вот это надо?
ДА! :inlove:
спасибо!
интересно... то есть для всего поста дайр это делать не дает, только для непосредственно текста. вот сволочь.:alles:
20.06.2014 в 19:17

то есть для всего поста дайр это делать не дает, только для непосредственно текста. вот сволочь.:alles:
завернуть весь пост в этот див и делов. на комментарии это естественно влиять не будет, но всё в посте с дивуется.

*анон с примером*
20.06.2014 в 19:20

завернуть весь пост в этот див и делов. на комментарии это естественно влиять не будет, но всё в посте с дивуется.
да проблема в том, что не все дивы дайри жрет.
То есть с тем же цветом ссылки у меня не выходило, но может я неправильно это делал?
20.06.2014 в 19:26

цвет ссылки меняется конкретно у ссылки, задать всему тексту сразу это нельзя, потому что это прописывается в загрузке стиля страницы, а не контента поста. Грубо говоря, в дайри можно прописывать почти всё, но задавать это элементам конкретно, а то, что прописывается обычно у сайтов в HEAD, то есть стиль абзаца, стиль ссылки и пр подобные штуки прописываются исключительно в настройке всего днева, а в посте их придется задавать каждому элементу. да даже используя дивы, по сути мы пост превращаем в элемент и задаем стиль дива, точно так же как мы будем прописывать стиль "а" у ссылок. В общем-то на сайтах та же система работает. :thnk:
А по ссылкам можно менять хоть что, кроме подчеркивания у морей. Хотя и их можно поменять, но это очень длинный код, который не стоит своих усилий.
20.06.2014 в 19:29

Оу, я воспринимал это скорее как кусок цсс. Но это был пример, когда див не помогает и надо писать ручками
20.06.2014 в 19:35

цсс можно задать лично элементу, а можно странице. Страницу мы взломать не можем, значит элементы, а дивы не линки, так что и задать все ссылки нельзя.
20.06.2014 в 19:43

кроме подчеркивания у морей. Хотя и их можно поменять, но это очень длинный код, который не стоит своих усилий.
Чисто из любопытства: а как, анончик? Я пробовал править тот код, что используют сами дайри, но море после этого перестает открываться.
20.06.2014 в 19:44

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

*анон с примером*

а вот нифига.
я как раз это и пытался провернуть.
то ли весь остальной код мешает, то ли на дайри это с какими-то проблемами.
20.06.2014 в 20:07

Анон с примерами кода, спасибо! :red:
Анон с примером, который смотрится через "поделиться", тебе тоже! :white:
20.06.2014 в 20:11

Чисто из любопытства: а как, анончик? Я пробовал править тот код, что используют сами дайри, но море после этого перестает открываться.
diarycss.diary.ru/p189821655.htm

Анон с примером, который смотрится через "поделиться", тебе тоже! :white:
пжлста
20.06.2014 в 20:13

а вот нифига. я как раз это и пытался провернуть. то ли весь остальной код мешает, то ли на дайри это с какими-то проблемами.
Либо ошибка, либо что-то мешается закрыться матрешке. Я тоже нагромождала, но всё пахало :hmm: хотя я не проверяла как оно пашет на р, так что если он использован, то не ручаюсь. У него могут быть свои фишки в цсс по умолчанию у дайри.
20.06.2014 в 20:22

Либо ошибка, либо что-то мешается закрыться матрешке.
скорее всего ошибка. пойду тогда искать. где напорол.
спасибо. :)
20.06.2014 в 20:38

diarycss.diary.ru/p189821655.htm
О, мерси. :)
21.06.2014 в 00:17

Анон, а вываливающиеся из фона картинки, видео и т.п., заодно с расплывающимися в неведомые дали абзацами тебя не бесят?
Чем они меня могут бесить? Если у верстальщика руки не из жопы, в обычном масштабе ничего никуда не вылезает, а масштабировать визуалку смысла нет.
21.06.2014 в 22:10

О, "моя простынка", давно не виделись)) Пасиб, анон)

*******
5. Текст и фон должны быть контрастны, но не вырвиглазны! Например, на этом фоне лучше бы не полностью чёрный шрифт, а текст тёмно-графитового цвета

На Инсайде, кстати, тоже.


*******
6. Выше написали: текст делать покрупнее. Дефолтный размер шрифта этого сообщества неудобный, он мелкий.

Дополню. Для Arial оптимальным считается 14px, для Verdana 12px, для Times New Roman 16px. Первые два считаются более удобными для web-чтения. Вообще шрифты без засечек удобнее для экранов.
На случай возражений: это статистика, на индивидуальность вашего восприятия я не покушаюсь.


*******
8. Межстрочное расстояние изменить хорошо, но учитывайте, что это может не сработать. Дайри обрабатывают не весь HTML-арсенал. Лучше шрифт покрупнее сделать.

Дайри странно работают с этим. Зимой 13-го всё работало, летом-13-го - нет, зимой 14-го всё заработало снова. Прописывайте в px (пикселях), em здесь не работают. Подберите сами, на примере своих дизайнов, здесь всё зависит от вида шрифта, его величины.
Слишком широкий интерлиньяж тоже не айс, будет ощущение "воды".


*******
13. Откажитесь от пёстрого фона. Вообще от фона неоднородного. даже если у вас что-то под древность, а диз имитирует побитый молью и временем пергаментный свиток - нафиг тот свиток. На пёстром фоне читать неудобно. То же самое к звёздам.

Уточнение: это о фоне ПОД ТЕКСТОМ! Вокруг этого текста может быть и пёстро и неоднородно, под ним же - ни-ни.
И то же самое к большинству прозрачностей через CSS. Красиво, но создаёт большую нагрузку при отрисовке браузером. Вы же не одни на отрытой пользователем странице, верно?


*******
17. И если вы можете обойтись без графики - обойдитесь без неё.

Вся важная информация должна быть доступна в режиме отключённой графики. У нас ФБ летом, дача, смарты-планшеты, перерасход траффика.


*******
Левокомент, но пнг-в без прозрачности очень часто легче джипега

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


*******
Мы пару раз с этим пролетели, когда править командную запись лезли люди не отвечающие за верстку ("мне только пару слов добавить", "я только картинку поменяю"), с тех пор строго-настрого запретил всем, кроме меня и второго верстальщика к записям подходить,

Анон, сделай проще: отключи визуальный редактор в настройках сообщества
. В него не полезут потому, что его просто не будет. Я так сразу делаю, даже для себя, чтобы курсором в спешке не промахнуться. Пару раз бывало :facepalm:


*******
Я, конечно, нуб и ламер, но я так и не нашел, где в Хроме можно посмотреть код фрагмента страницы или свойства изображения.

Легко, кстати.
Вспомогательная кнопка мыши, выпадающее меню, конец списка, пункт "посмотреть _код элемента_". Экран разделится на две части горизонтально. Внизу будет код страницы в свёрнутом виде (там можно ходить и разворачивать блоки, отлично видно что во что вложено). Над этим под-экраном есть его, под-экрана, меню. Там пункт resourses/ Заходишь в него, там две колонки. В левой разворачиваешь все папки, в одной из них будут все картинки. Сохранять так: ищешь под картинкой _в правой колонке_ ссылку на неё, нажимаешь вспомогательную кнопку мыши и выбираешь "сохранить ссылку как".
Это же работает для все выкидышей Хрома, как то: Нихром, Яндекс-браузер, Интернет-maill.ru и тому подобные новоделы от всех, кому не лень и жмёт ЧСВ.


*******
Вот, кстати, по поводу этого вопроса. Объясните нубу что делать, если в одном браузере все нормально, а в другом едет?

Открывать браузер в котором проблемы и исправлять их! Анон, пойми, вёрстка для одного браузера это даже не вчера, это сто лет назад. Современная вёрстка _кросс-браузерная_! Не можешь сложное ограничься простым, но видеть его должны и с мобилы и с декстопа, и с IE6-7 и с FF30+. Это высокая планка, конечно, но пусть лучше у тебя будет простенько и без изысков, но читаемо, чем наворочено в любимом Огнелисе, например.И с цирком в остальных.
И поосторожнее с закруглёнными уголками. Оно тренд и мода, но не все браузеры умеют закруглять уголки картинке, вставленной в div.


*******
Я зимой сделал у верстки рамочку с закругленными углами, убился, старательно прописывая все атрибуты, но рамочка так и осталась с прямыми углами. Так всю игру отыграли, а под конец посмотрел в другом браузере - а рамочка-то скругленная!

Поздравляю, ты верстал в старой версии браузера. Делай так и дальше, ты обезопасишь себя от "распидорасило код". Потому что а) не все сидят в супер-современных версиях (они бывают ооочень глючными, приходится откатывать назад), б) есть не раскрученные браузеры с классными функциями типа "фото всей страницы", "разбивка окна на параллельные области" и тому подобное и там нет поддержки всех наворотов CSS3, в) мобильные браузеры не всегда угоняются за прогрессом. Kxit по-старинке, но надёжно.


*******
Нубский вопрос - текст при отключении изображений постоянно под картинку съезжает, а должен быть рядом, сколько бы отступов не задавал, не получается. Верстка блочная.

1. пропиши картинке точную ширину и высоту, при отрисовке страницы под неё зарезервируется место.
2. положи картинку в div фиксированной ширины (ширина картинки д/б 100% от ширины div? прописать обязательно) и "обтеки" этот div текстом.
свойство float тебе в помощь.
21.06.2014 в 22:11

*******
Как выровнять и правильно позиционировать несколько блоков div внутри другого div-блока?



clear: both - принудительно закончили обтекание! Обязательно, а то растаращится ваш код...


*******
Или кто-нибудь магию какую знает?

Никак, анон. Мы работаем в "местных стилях", здесь недоступен @font-face, хоть тресни.
Так что или картинки, если жизненно необходимо или просто придумай диз, куда впишется стандартный шрифт.
Но помни, что _всю важную информацию - текстом_. Заголовки и подзаголовки тоже.


*******
Максимум, если уж совсем неохота с картинками возиться, есть какое-то поле в атрибуте style, которое прописывает альтернативый шрифт - ну на тот случай, если требуемого нету. Вот второй можно поставить какой-нибудь распространённый и хотя бы отдалённо похожий на основной.

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


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

Да-да-да! И про презрение к недо-планшетикам тоже забудьте, и про мелко-телефоны. Резиновая вёрстка вам в помощь. Это так, что в % от ширины экрана.


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

Всё, кроме графики. Текст, структура. Цвета текста, заголовка, ссылок, офтопика. Цвета фонов вышеперечисленного. По-хорошему, можно и без картинок обойтись вообще. Ладно, во всём, кроме портретов персов))


*******
Единственное оформление, которое никого и никак не может напрячь - это полное отсутствие оформления. Но в условиях ФБ это как бы не метод.

Анон, это метод, и очень даже. Но с минимализмом тоже надо уметь работать. Кстати, хороший пример - оформление Инсайда, очень приятное и необременительное. Если вдруг не станет фона и авок от соо, дизайнерского ужоснаха не случится)


*******
Я тебе сходу могу перечислить причины, по которым это может раздражать. Текстовое поле человек привык задавать для себя, кому-то, как ни странно, нравится во всю ширь экрана, и их бесит, когда посреди огромного экрана браузера узкая колонка. Ну, если ты не имел(а) в виду, что "сузить" - это только слегка сжать с боков.

Нууу, тут дело тонкое, но тоже изученное. Оптимальной шириной _текстового поля_ считается 800px. Для компромисса с широкоэкранными декстопами я ставлю 960px.
Анон, это _под текст_. Остальное оформление можно растянуть и на 1920px, масштабировалась бы графика оформления.


*******
Абзацы без отступов и с красной строкой опять же лёгким движением руки отменяются в настройках просмотра, от текста остаётся сплошная каша.

Да, есть такое. А ещё есть особенности восприятия экранного текста. Короче, абзацы через строку - это стандарт, большинству с ними _удобно читать_. Удобство чтения - это ваши голоса.


*******
А всё остальное рисовать уже как нравится, не особо заморачиваясь универсальностью.

Я в фейспалмах как в листьях пальма... Анон,это лучший способ заявить "йа чайнег". Лучше не рисуй ничего, чем так.


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

Ммм, что мешает дать контент обеим ЦА?


*******
Плюс много! У анона широкий экран и он не ленится из принципа пойти сказать команде с узким столбиком, что зря они так. А еще анон, в попытке снизить нагрузку на глаза, привык читать что-то длиннее комментов, настраивая масштаб страницы в 200-250%, и когда у него текст стекается в узкий столбик на три-пять-семь слов с строку или выползает за границы фона, тоже не ленится публично в команду какашками покидаться из любви к искусству.

Анон, каково разрешение и диагональ твоего экрана? Какашек не боюсь, но я за комфорт, постараюсь учесть и тебя.


*******
Анон, а вываливающиеся из фона картинки, видео и т.п., заодно с расплывающимися в неведомые дали абзацами тебя не бесят?

Анон, видео не масштабируется. Просто ставь ширину 450px и давай ссылку на ю-туб с большим разрешением. Картинки масштабируются легко (но с усом, чтобы без пикселизации на декстопах).


*******
Как минимальную прописывать?

min-weight


*******
К слову, дайри-хтмл не дает же задать общий межстрочный отступ между абзацами?

пропиши каждому Р сколько тебе нужно margin-bottom


*******


Ты не прав, анон, вылезает за экран на нетбуке с 1024х600. Нужно добавить между минимумом и максимумом width:100%
Так:




*******
а дивы не линки, так что и задать все ссылки нельзя.

Анон, тебя спасёт style для ссылки. Каждой. Это аналог a:link. К сожалению, мы не можем ничего менять по наведению курсора.

Расширенная форма

Редактировать

Подписаться на новые комментарии