Ответы пользователя по тегу HTML
  • Как указать высоту для main?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Хорошо, конечно, что вы уверены, что высота точно 60. Что вас не волнует никакое переполнение шапки ни по какой из причин (увеличенный шрифт у пользователя, отвалился дизайнерский шрифт, использование переводчиков и другие банальные причины)
    Если так, то да, calc и вперед.

    Разумнее, задать родителю высоту 100vh и грид. В котором первой строке задан min-content, а для main 1fr, т.е. все оставшееся пространство.
    grid-template-rows: min-content 1fr
    Аналогично можно сделать и флексом и flex-grow для main.

    Так получится универсальное решение, не зависящее от высоты шапки.
    Ответ написан
    Комментировать
  • Зачем комментарии на сайте оборачивать в тег article?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    Могу ответить и на вопрос где это написано. Вот тут, прямо в спеке.
    А также попробую перевести, что там написано.

    Там идет речь о том, что комментарии можно оборачивать в article, когда они являются дочерними элементами "большого" article. Т.е. той самой независимой конструкцией является внешний article, сама статья.
    И тогда всё логично, сама статья, вместе с комментариями к ней (если нужно) может быть использована где угодно, в том числе и на других сайтах без потери контекста.
    Ответ написан
    Комментировать
  • Как средствами CSS/HTML создать сегмент круга, который можно будет залить внутренней тенью?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не ясно зачем и чем это лучше clip-path и svg, но пусть будет.
    Дальше доводите до ума, чтоб ничего не торчало

    https://codepen.io/AnnaSummer/pen/GReWpPy
    Ответ написан
    Комментировать
  • Можно ли svg спрайт вставлять в псевдоэлементы?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Нужно сделать так называемый стек из svg, а не символьный спрайт.
    И его можно вставлять куда угодно, как обычно в use или в img или в CSS (псевдо, фоны, маски...).
    https://telegra.ph/Stack--sprajt-zdorovogo-chelove...

    Если вы имеете в виду вставку непосредственно в свойство content псевдоэлемента, то да, тоже можно, но прямо скажем неудобно потом с этим работать. Но это верно и для всего остального, отличного от текста.
    Ответ написан
    Комментировать
  • Как передвинуть отдельную букву, но не сдвинуть другие?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Используйте относительное позиционирование. Оно сдвинет элемент относительно текущего положения, не повлияв на окружение.
    https://developer.mozilla.org/ru/docs/Learn/CSS/CS...
    Ответ написан
    Комментировать
  • Почему ломается адаптив когда добавляю flex-direction: column?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Потому что:
    1. flex-shrink по умолчанию 1
    2. flex-shrink работает вдоль главной оси

    => ось повернули, flex-shrink перестал работать в горизонтальном направлении => содержимое растянулось по заданным размерам. Т.к. 1140 никак не влезает ~730 (или на какой там ширине вы смотрите), всё развалилось.
    Ответ написан
    3 комментария
  • Как скрыть элемент при изменении размеров экрана с помощью медиа запросов?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Если вы меняете картинку, то используйте специально для этого придуманный тег picture
    Ответ написан
    Комментировать
  • Как сделать, чтобы текст в атрибуте title переносился на строки?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    Атрибут title не стилизуется.
    Можно сделать псевдо content: attr(title). Но перенос будет только за счет ширины.
    Либо использовать обычный div или span или p с br и стилизовать как душе угодно.
    Ответ написан
    1 комментарий
  • Grid выходит за границы сайта. Что делать?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Давайте расскажу, что вы делаете:
    Грид на 2 равных столбца - ок.
    Зачем-то у него отрицательные margin.
    Ещё зачем-то он флекс на другой ширине. Почему бы ему не быть гридом всегда и без отриц отступов?
    Дальше карточке задана ширина 320.
    Но проверяете на ширине 469.
    Было бы странно, если бы оно влезло.
    Что происходит дальше?
    Дальше вы решаете, что 320 тут лишние и убираете их.
    Что остается?
    Остается width: 50%.

    Получаем карточку на половину ячейки грида.

    Что делать?
    Я бы избавилась от:
    - флексов (не нужно будет задавать ширину карточкам)
    - отрицательных margin
    - ширины карточек (пусть грид определяет ширину карточки)

    Также можно попробовать добавить в грид minmax и уменьшить количество media.

    Если что, всё это написано в инструментах разработчика, хорошо видно какие свойства в итоге применились.
    Ответ написан
    5 комментариев
  • Как задать название кнопок для доступности Google PageSpeed?

    Ankhena
    @Ankhena Куратор тега HTML
    Нежно люблю верстку
    Перевожу на русский: в кнопке должен быть текст. Доступный для всех технологий, в том числе для скринридеров.
    Если визуально в кнопке его нет, то используется доступно скрытый текст. Гуглите паттерн visually-hidden.
    Ну или хотя бы атрибут aria-label.
    Ответ написан
  • Почему не отображается картинка в css?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Не работает, потому что вы в backgroung-image кроме картинки понаписали ещё кучу всего.
    Пишите либо всё в сокращенное свойство либо всё по отдельности. А не кашей, как сейчас.

    64a945c2293e0370666866.jpeg
    Ответ написан
    Комментировать
  • Почему JS не находит нужный элемент?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    При такой структуре разметки вам не нужен для этого JS.

    Поменяйте id="info_block" на class="info_block" и добавьте css

    .info_block {
      disply: none;
    }
    .open_link:hover + .info_block {
      disply: block
    }


    Правда, лучше немножечко видоизменить, чтобы наведение было на общего родителя.
    Ответ написан
    2 комментария
  • Почему родительский блок больше по высоте чем дочерний?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Для .container задан flex. Значит, задавать для .block inline-block - бесполезно, потому что будет всё равно блок (если мы не будем сейчас думать о "на всякий случай").
    Но уже внутри .block есть дочерний элемент .block-item тоже имеющий inline-block.
    А после них браузер делает "пробел". И то, что вы видите красное - это он и есть.

    Как лучше чинить зависит от макета, вашей схемы недостаточно. Ну разве что банальные советы поменять на флекс или обычный блок или разобраться с vertical-align.
    Ответ написан
    Комментировать
  • Как сделать заголовок в две строки и логотип справа от первой строки?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    <h1 class="main-title">
          мои <span class="big-logo"><img class="graficlogo" src="assets/img/Logo.png" alt="Logo"></span><br>
          достижения
    </h1>


    А, поскольку, это скорее украшение строки, а нормальный логотип уже есть наверху слева, то нет смысла его дублировать как img и можно сократить до:
    <h1 class="main-title">
         <span class="main-title__beautiful-string">мои </span>
          достижения
    </h1>


    .main-title__beautiful-string {
      display: block;
    }
    
    .main-title__beautiful-string::after {
      content: "";
      display: inline-block;
      vartical-align: middle;
      bg: иконка
    }

    Либо флексом.
    Ответ написан
    Комментировать
  • Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Лень компилировать всё это в мозгу. На будущее, делайте песочницы с видимой проблемой на codepen.io.

    Но вы же переопределили transform.
    Пока scale(0) он по центру, потому что есть translate, а при scale(1) никакого translate уже нет.

    Что имеет смысл сделать:
    1. Большинство современных браузеров позволяет стилизовать радио и чекбоксы с помощью appearance, без вот этой дичи со спанами.
    2. Если всё таки спан, то для серого фона нет смысла делать псевдо, можно покрасить сам span.
    3. + лучше делать фоном (или маской), а не в content, будет легче управлять. Опять же, шрифт в content может сбивать центрирование, потому что так нарисован символ.
    4. after не вешать абсолютом, а разместить в центр, например, флексом.
    5. Либо вообще не делать after, а регулировать bg size (mask size) для появления крестика.

    Итого: можно сократить огромный кусок мусора, избавиться от трансформаций и абсолюта.
    Ответ написан
  • Почему не вставляется фон?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Браузер не умеет работать с scss.
    Ваш код сначала нужно скомпилировать в css.
    Посмотрите в сторону Gulp (для верстки за глаза).

    Также можно заменить препроцессорные переменные на кастомные свойства css. Но их работа различается.
    Ответ написан
    2 комментария
  • Как растянуть svg изображение в before на всю ширину экран?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    но у svg в коде есть определенная ширина и из-за этого картинка становиться или в левый или в правый край

    Ну не из-за этого, а из-за того, что по умолчанию, svg не меняет пропорции.
    Но это меняется с помощью атрибута preserveAspectRatio
    Ответ написан
  • Не срабатывает анимация при заполнении текста в input?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Плейсхолдер забыли
    Чтобы срабатывал :placeholder-shown (и в сочетании с :not) он должен быть.

    https://codepen.io/AnnaSummer/pen/xxYygyK
    Ответ написан
  • Как сделать шрифт тонким?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Добавляйте что-нибудь типа font-variation-settings: 'wght' 1000, 'CONT' 1000
    Ответ написан