Всем привет!
О самоизоляции - буквально пару слов скажу.
Отключение меня от всяких соцсетей и прочего, им подобного, оказалось довольно действенным, я даже кое-что для канала написала и даже - опубликовала.
Однако вторая неделя с самого начала не задалась, и снова самоизолироваться получилось только во вторник, да и то не полностью.
Но и так нормально.
Задачки решаются, тесты сдаются, знания накапливаются и скоро, согласно всесильно-верному учению, количество должно перейти в качество - и тогда придёт время "Средиземья" и чего-нибудь пиратско-исторического, для чего я пока не придумала названия.
Пока же тренируюсь на кошках на небольших одностраничных сайтах, типа рекламных лендингов.
Мало ли, вдруг захочу ИП создать.
Вот для него я уже название придумала.
И несколько версий логотипа.
А почему я пока не хочу браться за серьёзные проекты - в смысле стилизации и подключения скриптов - сейчас расскажу.
Черновая вёрстка на чистом HTML потихоньку идёт, и кроме истории адмирала Хокинса есть уже и история капитана Инглэнда (в изложении Билли Бонса), но выглядит оно так, как выглядели сайты девяностых годов.
Привести же к виду современному не позволяет проклятая диалектика - ну, это самое качество, в которое должно перейти количество.
Никак не переходит, зараза.
И иногда даже чувствую себя не Гарри Поттером - на редкость бестолковый персонаж, по-моему. А кем-то средним между Гермионой Грейнджер (такая же заучка) и Роном Уизли - когда у него сломалась волшебная палочка и результат его колдунства даже сам Дамблдор предсказать бы не смог.
Свойство position - палочка Рона Уизли
Краткий курс зельеварения от профессора Снегга CSS я уже два раза прошла.
И поэтому решила, что сделать стильную страничку, наподобие тех, что кишмя кишат на просторах интернета для меня труда не составит.
Альбус, я ошиблась...
Действия программиста вообще, и веб-разработчика - в частности, со стороны действительно напоминают какой-то магический ритуал.
Вот он сидит, клавиатурой щёлкает, на мониторе мелькают непонятные символы - а если писать не в блокноте, а нормальной IDE, это выглядит не только загадочно, но ещё и красиво.
А потом произносит главное заклинание, добавляет главный ингредиент, жмёт на главную кнопку - чтобы убедиться в том, что его творение работает так, как должно, и делает то, что должно...
В 90% случаев - не работает, и не делает.
Не зря профессор Снегг считал зельеварение одним из самых сложных предметов.
У меня в итоге получилось вот что.
Вроде бы симпатично, хотя положение нижнего логотипа кажется чуть-чуть странным - его бы спустить немного ниже.
Но он не опускается ниже!
А на широком экране вообще находится точно посередине.
Положение задаётся отступами сверху и слева - top и left, можно использовать отступы справа и снизу - right и bottom - но какие бы значения я не вводила, ниже он не опускался. Хотя выше поднять было можно.
Такое загадочное поведение вызвало у меня приступ восхищения упорством бездушной картинки.
И нервный тик от осознания собственной тупости.
Почесав репу, в смысле - тыкву, в смысле - голову, я наконец вычесала оттуда здравую мысль.
Всё дело было в позиционировании.
Точнее - в уже упомянутом свойстве position, которое по умолчанию определено как static, но если изменить значение на absolute - элемент будет исключён из потока*.
А значение relative задаст новую точку отсчёта, ориентируясь на статическую позицию.
- А-а-а-а-а, - обрадовалась я, - так вот в чем правда, она же - сила, брат! А делать-то чё???
Из подобных ситуаций всего два выхода - либо исправлять наделанное, либо всё сломать и начать заново. Исправлять...
Я представила, как нахожу все упоминания position, подбираю, что лучше - absolute или relative, маюсь с высчитыванием координат и размерами элементов - они должны быть относительными, чтобы страничка адаптировалась под экраны с разным расширением. В результате содержимое страницы окончательно превращается в кашу, я психую, всё удаляю, и начинаю заново.
- Ну и к чему эти промежуточные этапы?
Однако удалять всё мне тоже не хотелось. В конце-концов, помимо позиционирования, я уже назначила стили кнопкам и навигационным ссылкам. И ещё кое-что - что, тоже всё заново начинать?
К счастью, у меня есть голова, на голове - волосы, и их довольно много. Есть что чесать, и иногда оттуда вычёсываются дельные мысли.
- Резервная копия!!!
Ну, не совсем резервная, но всё равно, копия.
Сделать новый файл CSS в котором заняться исключительно позиционированием.
А потом, когда элементы будут расположены в нужном мне порядке, перенести уже определённые для них стили из старого файла.
Файл HTML тоже лучше продублировать, в нём менять я ничего не собиралась, но и переключаться между двумя CSS файлами я не собиралась тоже.
Поэтому я скопировала файл HTML в другую папку, переименовала и вернула этот, точно такой же файл, только с другим именем, в папку проекта. И уже к этой новой версии я подключила новый файл CSS, пустой, разумеется.
Чтобы элементы расположились в потоке - а чтобы увидеть их визуально, в браузере - в новом CSS файле определила для главных элементов стили - рамки и отступы, ну и размер картинки установила 100%, чтобы она не выползала за границу блока div, в который я её предусмотрительно запихнула.
Сейчас моя рекламка выглядит как сайт 90-х, о чём я и писала в начале.
И, собственно, с этого и нужно было начинать.
Ну а теперь я перечитаю главу учебника, посвящённую позиционированию - проблема ведь была не в самой картинке, а в блоках header, main и footer - они идут друг за другом, начиная с header, что и называется потоком.
И со свойством position я что-то сделала не так - и header, и main, и footer уютно расположились в самом верху экрана, а остальные элементы, которые вообще-то должны быть у них внутри (нижний логотип в блоке footer, например), вылезли за их пределы.
Вот что бывает, когда колдуешь сломанной палочкой!
Алёна ©
*Поток - это всего лишь выполнение компьютером инструкций программы. Здесь у него, как у богатыря на распутье, три пути:
Последовательность - выполнение инструкций по порядку;
Итерация - выполнение одной инструкции несколько раз, пока соблюдается заданное условие;
Ветвление - выбор одного из двух вариантов, в зависимости от условия.
Кто-то может заметить, что вариантов может быть больше двух - но так уж устроены компьютеры, что выбор всё равно придётся сначала свести к двум вариантам, а потом ещё к двум, и ещё... и ещё...
Столько раз, сколько понадобится.
P.S. А вот так располагаются header, main и footer, когда палочка не сломана 🤭🤗🥰