Ознакомьтесь с нашей политикой обработки персональных данных
  • ↓
  • ↑
  • ⇑
 
Записи с темой: мануалы (список заголовков)
17:23 

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

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



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

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

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

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


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

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

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, указав ему ширину.


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

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

20:57 

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

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


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

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

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

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

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

19:55 

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

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

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

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

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

изображение

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

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

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

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

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

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

18:20 

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

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

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

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

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

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

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

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

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

главная