Ответы пользователя по тегу HTML
  • Как выровнять иконки?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    Очень интересный код.
    Ссылки на нужные разделы потеряны, а зато зачем-то картинки в разметке.

    <ul class="header__nav">
        <li class="nav__item">
          <a class="nav__link nav__link--favorites" href="">
            <span class="visually-hidden">Избранное</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link nav__link--profile" href="">
            <span class="visually-hidden">Профиль</span>
          </a>
        </li>
        <li class="nav__item">
          <a class="nav__link nav__link--card" href="">
            <span class="visually-hidden">Корзина</span>
          </a>
        </li>
    </ul>


    .header__nav {
      display: flex;
      gap: 42px;
    }
    
     .nav__link {
      display: block;
      width: 44px;
      height: 44px;
      border-radius: 8px;
      background-color: rgb(246, 246, 246);
    }
    
    /* доступно скрываем текст */
    .visually-hidden {
      position: fixed;
      transform: scale(0);
    }

    И в модификаторы пишете фоны для модификаторов ссылок. Или для их псевдоэлементов, как удобнее.

    Если с псевдо, то либо делаем их инлайн-блочными и vertical-align: top; и дописываем сcылкам
    align-content: center;
    text-align: center;


    либо ссылки делаем флексами и стандартно
    display: flex;
      align-items: center;
      justify-content: center;



    https://jsfiddle.net/wav1q8kr/
    Ответ написан
  • Как найти js код который обрабатывает событие?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Нежно люблю верстку
    Открыть вкладку Event Listeners и посмотреть.

    Обратите внимание на галочку Ancestors - она покажет или скроет родительские события.

    6655e404c893c179855975.jpeg
    Ответ написан
    Комментировать
  • Как правильно перестроить элементы?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    есть ли вариант чтобы верстка перестраивалась на больном расширении согласно макета чтобы не пршлось скрывать или показывать объекты?

    Да, конечно и даже не один.
    Вы совершенно верно в вопросе указали теги флекс и грид. Вот с их помощью.

    Флекс
    Десктоп: Оборачиваем контентyю часть в div. Родителю задаем флекс. Два элемента встают в ряд.
    Мобилки: для контентного div задаем display: contents, после этого он станет как будто прозрачным или как будто его нет.
    Ну и дальше с помощью order расставляем элементы в нужном порядке.

    Грид
    Несколько вариантов.
    Первый с такой же оберткой как для флекса.
    Второй - все элементы россыпью и просто меняем сетку.
    Ответ написан
    1 комментарий
  • Как лучше обратиться к кнопке через id или через class?

    Ankhena
    @Ankhena Куратор тега JavaScript
    Нежно люблю верстку
    id - уникален, т.е. по id можно обратиться только к конкретному элементу.
    class - можно обратиться ко всем элементам с таким классом. Но обычно на классы завязана стилизация, они могут быть переименованы, удалены и т.д.
    data-атрибуты - мне нравится этот вариант. Можно поставить нужным элементам сколько угодно раз, можно задать разные data-атрибуты, можно ими свободно манипулировать. Отделены от стилизации. Хотя, конечно, можно стилизовать и по ним, но меньше вероятность, что будут удалены из разметки верстальщиком.
    Ответ написан
    Комментировать
  • Как правильно обращаться к элементам при добавление класса?

    Ankhena
    @Ankhena Куратор тега CSS
    Нежно люблю верстку
    1. Совсем банальный: вешайте класс на родительский блок.

    2. Через :has
    .catalog__info:has(.catalog-filter.active)  .catalog__wrapper {
        margin-bottom: 50px;
    }
    
    .catalog__info:has(.catalog-filter.active)  .catalog__btn {
        display: none;
    }


    3. Самый интересный: с помощью кастомных свойств.
    .catalog-filter {
      --open-btn-display: block;
      --margin: 0;
    }
    
    .catalog-filter.active {
      --open-btn-display: none;
      --margin: 50px;
    }
    
    .catalog__wrapper {
      margin-bottom: var(--margin);
    }
    
    .catalog__btn {
      display: var(--open-btn-display);
    }


    p.s. Зачем вам две кнопки, если они в одном месте в разметке, я не придумала. Меняете текст и стили и всё. Тогда уж логичнее закрывающую засунуть внутрь всего открываемого блока, тогда и не нужно с ней отдельных манипуляций.
    Ответ написан
    Комментировать
  • Как указать высоту для 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...
    Ответ написан
    Комментировать
  • Как скрыть элемент при изменении размеров экрана с помощью медиа запросов?

    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: иконка
    }

    Либо флексом.
    Ответ написан
    Комментировать