Ознакомьтесь с нашей политикой обработки персональных данных

Сообщество, созданное для помощи пользователям в вёрстке сообщений.
Попытка собрать все советы воедино и выделить отдельную площадку для вопросов по вёрстке. Пополняется постепенно.
Главная специализация - Фандомная Битва.


Полезные ссылки:
WTF Inside
WTF Combat 2015 (основное сообщество Зимней Фандомной Битвы 2015)
Тред советов по вёрстке на WTF Inside
Тред верстальщиков на ФБ: Взгляд изнутри
-------
@Дневники: секреты, тонкости и хитрости
@CSS — стилизация дневников




Для связи - умыл сообщества Diary HTML
URL
  • ↓
  • ↑
  • ⇑
 
08:40 

Правила

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Или их небольшое подобие~

1. Быть адекватными людьми, а не обезьянами.
2. Не забывать о вежливости и конструктивной критике.
3. Помогать собрату-верстальщику и помнить, что съезжающий код может вызвать у того необходимость в паре бутылок валерьянки.
4. Задавать отдельные мелкие вопросы (вроде "почему этот кусок кода едет") в соответствующей теме. Посты, которые хочется видеть на главной странице, нести в анонимный тред заявок.
5. Не вступать в сообщество без намерения стать рабочей лошадью ака модератором и/или выкладывать уроки для широкой общественности.

@темы: организационное

08:44 

Книга жалоб и предложений

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Которая, чувствую, в нашем случае будет весьма актуальна~

@темы: организационное

08:53 

(Анонимный) тред заявок

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Заявки на обсуждение любой интересующей проблемы, связанной с вёрсткой или работой сообщества. Выкладываются на главную страницу.
Посторонние комментарии могут удаляться.

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

@темы: организационное

09:30 

Примеры крутотени

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
07.02.2015 в 09:16


Хочется увидеть примеры крутой по мнению сообщества вёрстки. Делитесь, в какую вёрстку вы влюбились?

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

Убедительная просьба давать непосредственно пример в таком стиле, чтобы по треду было заметно:
• WTF Fandom 2015

(можно не только с ВТФ, разумеется, это просто для примера)

@темы: по нитке мнения с народа, общие заявки

11:14 

Мастер-пост полезных ссылок

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Думаю, понадобится. Желательно не по мелочи, а более-менее глобальные вещи. Ссылка и описание. Или просто ссылка, а описание потом допишем.
Комментарии будут выноситься в сам пост.

htmlbook.ru
Универсальный справочник HTML, CSS и прочих радостей жизни по элементам - поможет как новичку, так и продвинутому пользователю, который что-то запамятовал. Практически один из самых основных ресурсов такого рода - всё просто, понятно и с примерами. Адрес лучше знать наизусть или хотя бы иметь в закладках.

htmlacademy.ru
Хороший учебник вёрстки. От новичка до профессионала.

Многофункциональный генератор
Тени, круглые уголки, колонки, трансформации и прочие радости верстальщика.

Генератор градиентов
Сразу выдаёт код, который можно использовать на дневниках. Задаются вид градиента, направление, цвета, полупрозрачность (rgba).

Проверка читабельности текста
Подбор цвета или ввод имеющихся для машинального определения читаемости текста на фоне и с цветами наоборот.

Сочетания цветов
Для верстальщиков-дизайнеров - подбор гаммы по кругу, разными способами, вывод цветов. В наличии кнопка "примеры", которая показывает как бы могли выглядеть цвета элементов на сайте.

Гаммы цветов
Дизайнерское - готовые коллекции, каждый цвет тыкабелен, в ссылке на него код hex

Типограф и Типограф Лебедева
Замена тире, кавычек, неразрывные пробелы. Лебедев - дополнительно умеет делать br и p

J-иконки
Ака Дайри Аккаунтер. Готовые картинки для замены Собачки, можно картинку в итоговом коде заменить на свою.

@темы: полезные ссылки и информация

14:14 

С чего начинать

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
10.02.2015 в 12:57


Можно советы вот для совсем начинающих? Когда верстальщик не предвидится и приходится знакомиться со всем самому. С чего начинать? Какой общий принцип работы и последовательность?

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

@темы: вопросы

18:12 

<br> и альтернатива

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
10.02.2015 в 18:10


Доброго дня. Я в вопросе верстки новичок, оформляю арты и челлендж с использованием </бр> -

- так приучил верстальщик покруче. Дал шаблон. Вот такойРазумеется, при редактировании съедается часть кода, и это неудобно при наличии дедлайнеров в команде: кучу работ принесли за 10 минут до 00:00 - все пропиши с </бр> на конце и потом вставляй в код. И только потом - неси в пост.

Может, есть вариант оформить попроще - таблицы там или еще что? А то забываю постоянно эти окончания.

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

@темы: вопросы

18:19 

Дайри-функционал

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Здесь собираем функции, нужные для верстки, но не поддерживаемые дайри. И обсуждаем, чем бы их заменить.

1. z-index
2. transformation
3. <dl> <dt> <dd>

Функции, ранее не поддерживаемые, но на момент написания поста рабочие:
1. Показ background для TABLE, TD, DIV. Важно: нужно вставлять ссылку на картинку только из библиотеки изображений дайри.

Работают, но с багами:
1. background-size. Может глючить, если в коде не прописан font-size. Обсуждение.

@темы: мануалы

18:20 

Типичные ошибки верстки

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
19:55 

Проверка разницы отображения в дизайнах

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
10.02.2015 в 19:51

На идею натолкнул пост на инсайде, в котором юзер с темным дизайном жаловался, что в его дизе в постах на фб на светлом фоне светлый непрописанный текст. Как я проверяю, везде ли у меня прописан цвет и нужная гарнитура (бывает, везде прописан, а в ссылках нет).

Положим, я делаю верстку на светлом фоне с темными буквами и шрифтом без засечек (Arial, Tahoma).
В сообществе (или отдельном дневнике, где верстаете) создаете диз с темным фоном, светлым шрифтом и ссылками и другим шрифтом (если используете шрифт без засечек, то в этом дизе сделайте с засечками, Times, Georgia и наоборот).

Когда у меня готов пост с выкладкой, иду в дизайны, жму на дизайн "Темный" правой кнопкой мыши на "Посмотреть" (не тот, что установлен, а специально созданный для проверки, переключать его не нужно!) - открыть в новой вкладке

изображение

И вижу соо в это дизайне, и тут же обнаруживаю, где у меня цвет ссылки не прописан, где шрифт потерялся.

Пара примеров из избранного, быстренько проверенных таким способом:

Вот так выглядит непрописанный шрифт в светлом дизайне с темными буквами
А вот так на темном фоне со светлыми буквами

Прописан цвет текста и гарнитура...
Но не прописан цвет ссылок, если у кого-то в дизайне цвет ссылок совпадет с фоном, в ленте они на месте ссылки увидят пустоту

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

@темы: мануалы

20:57 

Обрезающиеся простыни - считаем знаки

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
22.03.2015 в 18:36


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

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

Таким образом фуррифокс более-менее дает представления о том, сколько в посте реально получается знаков (насчет стопроцентной точности не уверен, но потом попробую вонзит код на 62 001 знак).

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

@темы: мануалы

16:46 

MORE в постах и комментариях

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
07.04.2015 в 13:19

Существует ли ссылка, которая раскрывает моря в комментариях к посту или хотя бы в одном комментарии?

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

Поиск решений и иже с ним. Пост может подниматься по мере других вопросов с тегом.

Важные моменты тега MORE:
1. Каждому more в записи присваивается определённый номер. При указании ссылки формата адрес_поста?oam#more1 (или другое число) пост откроется со всеми открытыми more, но ползунок будет стоять на указанном номере.
2. Ссылка формата адрес_поста?oam просто откроет _все_ more в записи, ползунок будет стоять в начале страницы.
3. В мобильной версии все more в комментариях открыты.

@темы: вопросы

16:02 

Меняем подчёркивание у гиперссылок

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пост для страждущих имени проб и ошибок. Периодически надо сделать так, чтобы подчёркивание гиперссылки было другого цвета, нежели сам текст гиперссылки. Или же чтобы подчёркивания вообще не было. Этим и занимаемся. Пост обновляется по мере нахождения новых путей.

Гиперссылка - вот так выглядит в обычном виде.
Код: <a href="http://www.diary.ru/">гиперссылка</a>

Гиперссылка - вот так выглядит в усложнённом виде, когда мы меняем ей цвет подчёркивания и самого текста.
Код: <a href="http://www.diary.ru/"><span style="text-decoration:underline; color: blue"><span style="color: red">Гиперссылка</span></span></a>

В чём сам принцип: текст гиперссылки мы оборачиваем в теги span дважды. Внешний span задаёт цвет подчёркиванию. Внутренний - самому тексту.
Важный момент: все span'ы должны быть внутри тега <a>. Иначе у вас ничего не получится.

Способ чуть короче, но по смыслу то же самое, вставка одного style внутрь <a>


Теперь к случаю вообще без подчёркивания.

Вариант 1, сложный и длинный, работает не везде, использует rgba (в Хроме и Опере работает, в Firefox - нет):
Гиперссылка - вот так она выглядит без подчёркивания.
Код: <a href="http://www.diary.ru/"><span style="text-decoration:underline; color: rgba(0,0,0,0)"><span style="color: red">Гиперссылка</span></span></a>

Как видно, единственное изменение - это смена цвета в первом span. В действительности мы не убираем подчёркивание, а просто делаем его полностью прозрачным. Ставим любой цвет с прозрачностью 0 (за прозрачность отвечает последнее значение rgba). В данном случае у нас чёрный с полной прозрачностью.
При использовании такого способа подчёркивание не будет видно на любом фоне, это не подделка под какой-то один цвет.

Вариант 2, проще и легче (понятия не имеем, где показывается, а где нет):
Гиперссылка - снова без подчёркивания.
Код: <a style="text-decoration: none; color: red;" href="www.diary.ru">Гиперссылка</a>

Суть в том, что style ставим внутрь самого тега <a>, не добавляя ничего лишнего. Подчёркивание в таком случае отключается, а не становится прозрачным. Color можно ставить, можно не ставить.



Дополнительное украшательство ссылок, если стандартная полосочка не нравится или не вписывается в дизайн.
читать дальше




Касательно изменения ссылки в MORE, в которую просто так стиль не допишешь.

Вариант 1 c rgba (в Хроме и Опере работает, в Firefox - нет):
Абсолютно тот же (первый) принцип работает с тегом MORE, который тоже по сути является гиперссылкой.
Тут на самом деле more - пример.
Код - [MORE=<span style="text-decoration:underline; color: rgba(0,0,0,0)"><span style="color: red">Тут на самом деле more<span></span>]А внутри что-то есть[/MORE]

Вариант 2 c использованием классов:
Тут на самом деле more
Код - [MORE=<span class="postInner" style="color: red">Тут на самом деле more</span>]А внутри что-то есть[/MORE]
Внимание! Использовать этот способ можно только в том случае, если MORE идёт на отдельной строке. В противном случае случится вот это:
Тут на самом деле more - текст после MORE начинает заползать.
Способ обойти заползание - обернуть тег span в дополнительный div, указав ему ширину.


Пробы и разбор полётов в комментариях.

@темы: мануалы

17:23 

Изучаем маркированные списки

Тайя, которая душит романтиков
Не говорите так быстро, я не успеваю класть х*р на ваши слова.
Синтаксис маркированного списка:



Где ul - вид списка (маркированный), li - пункт списка. По умолчанию список обозначается круглыми маркерами. Маркеры меняются через свойство list-style.

Виды маркеров, основное

Оформление маркеров

Положение маркеров


Ссылки по теме: htmlbook.ru/faq/theme/list/ul

@темы: мануалы

18:15 

Пост мелких вопросов

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Для новичков, уставших людей или просто тех, у кого уже замылился глаз.
Мелкие вопросы не выносятся на главную страницу, а решаются прямо в этой теме. Градацию "это ещё мелкий вопрос, а это я хочу нести в анонимный тред заявок" выбирайте сами.
запись создана: 07.02.2015 в 08:48

@темы: организационное, вопросы

01:31 

hover для дайри - ищем решение

Diary HTML
Идеально для всех глаз не бывает, но бывает удобоваримо (с)
Пишет Гость:
15.06.2015 в 01:18


На ШТМЛ вне дайри есть код: изображение, по наведении на него курсора, сменяется другим изображением.
Кому-то подобное попадалось адаптированным под дайри, может? А то коды для этого действия, имеющиеся в интернете, для дайри не подходят.
Или же подобная адаптация в принципе не возможна?
Буду благодарен за ответ.

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

От админа: уже обсуждали, что общеизвестными способами такое сделать не удаётся. Для информации при наведении нужно прописывать hover элементу, чего дайри не позволяет. Ещё одним вариантом обсуждалась возможность всплывающего изображения поверх предыдущей картинки (с подгонкой по пикселам), но конкретный код на дайри глючит, когда отображается поверх картинки.
Возможно, всё-таки найдём решение. Штука полезная.
Любые мысли по теме, если у кого-то есть.

@темы: вопросы

Верстка Фандомной Битвы

главная