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

А я-то воображала, что теперь он будет моей сучкой. Потому что, не в силах извлечь профит из психологического образования, я начала вместо этого учиться МАГИИ вёрстке сайтов. Эта идея укрепилась в моей голове ещё полгода назад, и, покончив с дипломом, я безотлагательно приступила к её реализации.
Обучаюсь я с помощью интерактивных курсов на сайте html academy. Там очень круто: никакой воды, сплошная практика, присуждение ачивок за каждый чих.
Расфасованная на сотни маленьких заданий, вёрстка вовсе не кажется сложной. Конечно, поломать голову иногда приходится; для этого существуют задания-испытания, где надо привести какой-то кавардак в соответствие с образцом при помощи новых знаний. Некоторые из них – довольно трудные, но не настолько, чтобы опрокидывать столы, набрасываться с кулаками на компьютер или вызывать съёмочную бригаду ТВ3.
Легко одолев дюжину курсов, я возомнила о себе и решила, что пора применить изученные заклинания в решительной схватке с дневником.

C первого дня существования текущего дизайна я была недовольна тем, как расположила свой ник и название дневника. Но никакого макета у меня не было, а творческие поиски в рамках самого кода – занятие неблагодарное. В общем, я просто-напросто не придумала, куда приткнуть эти два элемента, и оставила их неловко болтаться в воздухе.

Страшное

Прошло уже больше года. И вот настал день, когда я сказала: «Хватит это терпеть!» Полчаса перестановок в фотошопе – и эстетичное решение было найдено.
Но претворить его в жизнь оказалось сложнее, чем я думала.
Передо мной стояла простая и понятная задача: заменить текстовые элементы на картинки.
Текст названия послушно скрылся, когда я написала «color: transparent». А вот с именем автора это почему-то не прокатило. Оно плевать хотело и на color, и на opacity, и на микроскопический шрифт, который я ему назначила. Проклятая надпись маячила над картинкой неумолимым и злобным призраком, игнорируя все селекторы, которыми я к ней взывала.

читать дальше

В конце концов, она отозвалась на #authorName span, но сделалась не прозрачной, а очень маленькой. Получилось не совсем то, что надо, но close enough – по крайней мере, я перестала видеть её с компьютера. И всё было прекрасно, пока я не зашла на дайри с телефона, чей убогий браузер, по всей видимости, не поддерживает такие мелкие шрифты. Пришлось трахаться дальше.
Наконец, до меня дошло, почему не работало свойство opacity. Потому что полная прозрачность – это 0, а вовсе не 1, как подсказывает логика. Узнав об этом впервые, я сразу подумала, что этот нонсенс не уложится в моей голове – и оказалась права.
Исправив свою ошибку, я заставила злополучную надпись сгинуть. И всё же — почему «color: transparent» работает в одном случае и не работает в другом? Буду признательна, если кто-нибудь растолкует этот загадочный феномен.
Однако мятеж на мятеже не стал единственным развлечением прошлой ночи. Параллельно с этим мне пришлось расхлёбывать ещё одну напасть.
К сожалению, формально имя автора и название дневника входят в состав меню; сделать их независимыми никак не можно. Что же происходит с вассальными элементами после разлогина, когда меню становится короче на несколько пунктов?
Текстовые просто сдвигаются. А картинки… с картинками происходит вот что.

Смотреть педерасты танца, watch’em до упаду!

Чего я только не делала, к каким только силам я не обращалась, какие только ругательства не раздавались во мраке ночи! Оказалось – надо было всего лишь задать ширину меню в процентах.
Теперь всё заебись.



Вот только в меню образовалась бесячая плешь. Я не вижу её со своего логина, но сам факт её существования лишает меня покоя.

читать дальше

Увеличение отступов проблему не решает. Если настраивать их для всего меню, то название получает их в наследство, и наступает пиздец. Если задавать их отдельным пунктам, то меню, которое вижу я, перестаёт помещаться в одну строчку.
В общем, я пока не знаю, что делать, и это вызывает у меня нешуточные опасения по поводу будущего. Что, если для верстальщицы я слишком тупая? Что, если мне суждено работать промоутером в костюме сосиски или гамбургера?
Наверное, для подобных выводов пока рановато, но попробуйте донести это до моей внутренней белки-истерички.

Радует лишь то, что теперь я могу менять размер картинок прямо в черновиках, прописывая ширину в теге <img>. Раньше я предварительно уменьшала каждую в каком-нибудь графическом редакторе, что выливалось в довольно муторную эпопею, если их было много. Дайте-ка угадаю! Все мало-мальски сообразительные люди додумались до этого давным-давно – даже при нулевых познаниях в области вёрстки?
В какой-то момент мне показалось, что ещё рациональнее будет зафиксировать нужную ширину в коде дизайна. К сожалению, я как-то не подумала о том, что <img> относится не только к полноценным изображениям, но и к аватаркам, и, о ужас, к смайликам.
И вот что я узрела после обновления страницы.