Осваиваем ярмарку

вторник, 02 июня 2020

00:42

все записи пользователя в сообществе Котики Инсайда

Ешь, молись, собирай ссылки.

Тред для обмена опытом и идеями (а также кодами) верстальщиков на АО3

1. туториал по всплывашкам и сноскам, на АОЗ (англ)
2. Как добавить ссылку, используя разметку HTML? (англ)
3. Как сделать море (рус)
4. Варианты стандартной верстки подложка/тени/рамки (англ)
5. Макет визитки анона с котиками
6. Пример всплывашки на css (рус)
7. Моря с ограничением (рус)
8. Рабочий пример с левым и правым углами (рус)
9. Теги, разрешенные на АОЗ (англ)
10. css свойства, разрешенные на АОЗ (англ)
11. Минигайд анона с котиками
12. сайты, с которых АОЗ поддерживает вставку медиа
13. Как сделать изображения подходящими для мобильных браузеров (англ)

запись создана: 03.03.2020 в 22:04

@темы: Верстка, АО3, Все хорошо

URL

Комментарии

06.03.2020 в 00:24

Гость

Вот европейские мамы и до верстки добрались...

URL

06.03.2020 в 00:36

Гость

Аноны, а тут реально просто завербовать кого-нибудь, кто сможет сверстать что-то наподобие внесенного аноном 2020-03-05 в 03:16? Весь визуал предоставим, всекомандную любовь гарантируем.
Да подожди набора, поднимут темы поиска людей.
Или сейчас в них покричи. Вообще найти реально, у нас цсс программист с прямыми руками в команде, уже разбирается со всем необходимым.

URL

06.03.2020 в 00:46

Гость

Аноны, а тут реально просто завербовать кого-нибудь, кто сможет сверстать что-то наподобие внесенного аноном 2020-03-05 в 03:16? Весь визуал предоставим, всекомандную любовь гарантируем.
Просто чем больше я смотрю на этот тред, тем меньше понимаю

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

URL

06.03.2020 в 11:03

Гость

Аноны, а тут реально просто завербовать кого-нибудь, кто сможет сверстать что-то наподобие внесенного аноном 2020-03-05 в 03:16?
Вам коды этого ужаса отдать ахах?) Мне не жалко, я все равно не верстак нигде :lol:

URL

06.03.2020 в 14:07

Гость

Вам коды этого ужаса отдать ахах?)
Дай, пожалуйста, анончик :heart:

Или, хочешь, верстаком-консультантом к нам приходи)

URL

06.03.2020 в 15:30

Гость

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

То что нужно засунуть в нтмл

<div class="letter">
<div align="center">
<img src="https://funkyimg.com/i/32Nji.png" class="img2" />
div class="innerletter">
<div align="center"><h4>Когда руки не из того места...</h4>
<div class="innerletter2">
<img src="https://funkyimg.com/i/32Nje.gif" class="img1" />
<div class="text">- Оу, сюда кто-то заглянул? Автор не верстак и не писатель, поэтому чем заполнять визитку не знает. </div></div>
<div align="center">У кого стоит автоматический гугл переводчик, советую его отключить, не знаю по какой причине, но эта зараза исправляет под себя мой текст, похлеще чем Т9 ^^"
<img src="https://funkyimg.com/i/32Njm.png" class="img3" />
<p>Боюсь даже представить как эта колбаса выглядит с телефона...поэтому, те кто планирует таки верстать визитки,  лучше не увлекаться блоками как я хе-хе...
Лучшим вариантом будет сделать что-то простенькое, но относительно удобное. Для этого минимума функций должно хватить...
Тут нету каких-то полезных гайдов, только мои мысли и котики. С котиками всегда веселее~</p>
<div class="innerletter2">
<img src="https://funkyimg.com/i/32Njg.gif" class="img1" />
<div class="text">
- А ну полож что взял! </p></div></div>
<div align="center">
Они у меня немного балованные^^"
<div class="innerletter2">
<img src="https://funkyimg.com/i/32Njh.gif" class="img1" />
<div class="text">-  И вот чего вам не спится... </p></div></div>
<div align="center">Возможно со временем люди привыкнут к css, а может и нет. Я не знаю...но попробовать стоит... упс у меня опять все уехало Т_Т </div>
<img src="https://funkyimg.com/i/32Njf.gif" class="img4" /></p></div></div></div></div>
<div align="center"><br />
Аминь...
<img src="https://funkyimg.com/i/32Njk.png" class="img3" /></div></div>

То что должно быть прописано в скинах.

#workskin .img1 {
  width: 35%;
  float: left;
  margin: 7px 7px 7px 0;
  padding: 3px;
}

#workskin .img2 {
  width: 85%;
  padding: 3px;
}

#workskin .img3 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 45%;
}

#workskin .img4 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 35%;
}

#workskin .text {
  min-height: 10em;
  display: table-cell;
  text-align: justify;
  padding: 7px;
  vertical-align: middle;
  border: 2px dotted DeepPink;
}

#workskin .letter {
  border-radius: 25px;
  border: 2px solid #000;
  background: White;
  color: #000;
  padding: 5px;
  width: 95%;
  margin: 0 auto 30px;
  display: block;
  box-shadow: 0 3px 3px rgba(0,0,0,0.12), 0 5px 5px rgba(0,0,0,0.12);
}

#workskin .innerletter {
  background: #fff;
  position: center;
  color: #000;
  text-align: justify;
  padding: 10px;
  width: 80%;
  margin: 10px;
  display: inline-block;
  border: 2px solid #000;
}

#workskin .innerletter2 {
  background: #fff;
  position: relative;
  color: #000;
  text-align: justify;
  padding: 2px;
  width: 80%;
  margin: 10px;
  display: inline-block;
}

Сейчас глядя на это я уже понимаю что центрирование можно было сразу тексту задать через скин. Но то такое...еще покручу. Но основа у вас есть.
Теперь что бы все это работало запомните несколько важных вещей которые я поняла.
1. Если вы все прописали и ничего не работает. Возможно вы не выбрали нужны вам скин при создании поста... тут внимательней.
2. #workskin .innerletter2 - то что выделено жирным пишется обязательно, то что курсивом может иметь любое имя которое захотите, но наверно желательно на анг, я хз на русском писать не пробовала еще )
3. то что идет за скобками, это характеристики вашего элемента - цвет, размер, рамочки и тд. Это может быть картинка, блок или текст. К примеру:

#workskin .img2 {
  width: 85%;
  padding: 3px;
}

где img2 это вот эти характеристики что прописаны в скине.

<img src="https://funkyimg.com/i/32Nji.png" class="img2" />

URL

06.03.2020 в 15:33

Гость

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

URL

06.03.2020 в 15:39

Гость

Блин, ребята, посмотрите какое-нибудь видео типо "цсс для чайников" на 15 минут, потому что видеть в теме для верстки то что идет за скобками, это характеристики вашего элемента ну совсем уровень дна, я не знаю, смешно это или грустно
Вы не открываете Америку, это и есть нормальный хтмл и цсс, по нему море инфы в интернете, и почти все будет работать, если просто копировать из примеров в скины, а не переписывать, как для дайри

URL

06.03.2020 в 15:40

Гость

На здоровье :shuffle:

Впрочем на примере всегда понятней чем вот так в теории )) Ну а вообще главное экспериментируйте. Много гайдов про css есть где можно надергать нужный свойств ) Я старалась как-то что бы и с тел и с компа смотрелось более менее)

URL

06.03.2020 в 15:42

Гость

Вы не открываете Америку, это и есть нормальный хтмл и цсс, по нему море инфы в интернете, и почти все будет работать, если просто копировать из примеров в скины, а не переписывать, как для дайри
У нас появился доброволец написать гайд?

URL

06.03.2020 в 15:49

Гость

Здесь приносили уже ссылку на самые простые примеры верстки

Варианты стандартной верстки типа "цветная подложка плюс тени" или "подложка плюс рамки"
Берите да меняйте цвета.
archiveofourown.org/works/11549178/chapters/259...

Зы. А визитки останутся в связи с переездом? Я так понял, что могут стать не обязательными. Надо ждать подробного поста с правилами от оргов и организацией, а потом вот это все обсуждать.

URL

06.03.2020 в 15:51

Гость

Человеку пытаются объяснить простыми словами, буквально на крокодилах. Почему же тогда все те кто "не дно дна" сидят на попе ровно и молчат? Уже давно бы написали нормальный гайд с примерами. :-/

URL

06.03.2020 в 15:54

Гость

У нас появился доброволец написать гайд?
Какой гайд, вы гоните что ли
Зайдите на какой-нибудь htmlacademy и пройдите пару вводных уроков, если интуитивно не получается понять, что есть отдельно контент, а есть отдельно список стилей для этого контента, а не в кучу все, как на дайрах
Больше никакой разницы, если вы могли верстать тут, то можете и на ао3

URL

06.03.2020 в 15:55

Гость

Уже давно бы написали нормальный гайд с примерами
И зачем мне это делать, скажи, пожалуйста?
Гиенить над лапчатыми утками куда интереснее, чем писать для них гайды.

URL

06.03.2020 в 15:58

Гость

Уже давно бы написали нормальный гайд с примерами.
А гайд "как рисовать арты на фб" вам не подогнать? Как-то артеры справляются с гуглом, ищут туториалы не на инсайде
Тут то же самое, можно найти кучу общих уроков в интернете, а здесь обсуждать уже конкретные примеры для конкретного сайта, а не рассказывать, что стили пишутся в скобочках

URL

06.03.2020 в 16:00

Гость

Знаешь анон, у нас на работе есть люди которые научились в программе выполнять опр порядок действий. Им для работы этого хватает. Но когда нужно сделать что-то иное, у них уже начинается паника. Женщины работают в этих программах уже больше десяти лет. Это я к тому что они выучили какую-то команду и все, они не понимают как это работает. Тоже самое и тут анон. Просто прйми это и успокойся, такие люди есть которые могут не понимать что-то даже перечитав хренову тучу гайдов. Для них все это китайский язык :nope:

URL

06.03.2020 в 16:00

Гость

Писать нормальный гайд с примерами по хтмл и цсс - это просто переписывать то, про что уже есть в интернетиках двадцать тысяч нормальных гайдов, учебников, обучающих игр и видеокурсов.
Погуглите.
Для начала - что такое html-документ и что такое css-документ, и какая информация в том и другом хранится. Вас уже после этого резко осенит, что же это на АО3 происходит такое сложное в скинах работ и в теле поста.

URL

06.03.2020 в 16:06

Гость

А гайд "как рисовать арты на фб" вам не подогнать? Как-то артеры справляются с гуглом, ищут туториалы не на инсайде
Ты забываешь одну деталь анон. Если я не артер, а меня ситуация обязывает рисовать то да, я бы хотел что-то простое, по типу как нарисовать кошечку поэтапно. :nope:

И я ее нарисую
Но когда мне скажут нарисовать кошечку с видом сверху, у меня уже будет ступор.

URL

06.03.2020 в 16:10

Гость

Узнаю токсичное сообщество программистов :lol:

URL

06.03.2020 в 16:10

Гость

Почему же тогда все те кто "не дно дна" сидят на попе ровно и молчат?

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

URL

06.03.2020 в 16:12

Гость

Ты забываешь одну деталь анон. Если я не артер, а меня ситуация обязывает рисовать то да, я бы хотел что-то простое, по типу как нарисовать кошечку поэтапно
Если ты не умеешь верстать и не хочешь этому учиться, то именно на ао3 у тебя есть уникальная возможность НЕ ВЕРСТАТЬ. Особенно в начале марта.

URL

06.03.2020 в 16:13

Гость

Я не пишу и не помогаю назло эмигрантам.
А зачем ты тут сидишь?

URL

06.03.2020 в 16:26

Гость

А зачем ты тут сидишь?

1. Научиться полезному. То, что я не буду играть на АО3 на фб не значит, что мне не интересно его насиловать.
2. Временами злорадствую.
3. А прост.

URL

06.03.2020 в 16:27

Гость

Если ты не умеешь верстать и не хочешь этому учиться, то именно на ао3 у тебя есть уникальная возможность НЕ ВЕРСТАТЬ. Особенно в начале марта.
И тут ты снова ошибаешься анон. Есть такая вещь как кокуренция. Если бы на аозе в принципе не было возможности верстать (или бы такой конкурс как визитка канул в прошлое), тогда ок все находятся в относительно равных условиях и меряются ~~письками~~ контентом уже в самих выкладках. Но пока существует визитка, все будут друг поперед другом как павлины выхаживать распушивая свои хвосты.
Знаешь у меня есть знакомая , такая смешная, я с нее угораю все время. Она ходит и всем своим подружкам рассказывает о внутренней красоте, что косметика только хуже делает и нафиг ее, что зачем следить за своим телом ты и так норм. А сама главное и красится и в спортзал ходит... и вот знаешь анон, вы чем-то с ней похожи :lol:

URL

06.03.2020 в 16:27

Гость

Анон с кодами :inlove:

URL

06.03.2020 в 16:33

Гость

Если ты не умеешь верстать и не хочешь этому учиться, то именно на ао3 у тебя есть уникальная возможность НЕ ВЕРСТАТЬ. Особенно в начале марта.
Плюсую!

анон, оравший в соседнем треде, что НЕ БУДЕТ ВЕРСТАТЬ

URL

06.03.2020 в 16:37

Гость

Плюсую!
Но анон, на дайри ведь тоже никто не заставлял верстать. Орг минимум визитки, что требовался - это аватарки и баннеры )) :facepalm:

URL

06.03.2020 в 16:38

Гость

Или вас там кнутами били без верстки?)

URL

06.03.2020 в 16:41

Гость

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