Что делать если не задаётся бэкграунд на nav?
<header class="header"> <div class="container header-container"> <ul class="logo"> <li class="list-item"> <img src="img/logo.png" alt=""> </li> <li class="list-item">+7 9999999999</li> <li class="list-item-left"> <svg width="21" height="12" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.59 1.41L14.17 5H0V7H14.17L10.58 10.59L12 12L18 6L12 0L10.59 1.41ZM19 0V12H21V0H19Z" fill="#CC9933"/> </svg> <a href="">Личный кабинет</a> </li> </ul> <nav class="nav"> <ul class="nav-list"> <li class="nav-item">О нас</li> <li class="nav-item">Услуги</li> <li class="nav-item">Преимущества</li> <li class="nav-item">Размещение</li> <li class="nav-item">Блог</li> <li class="nav-item">Контакты</li> <li class="nav-item"> <button class="btn">Хочу тур</button> </li> <li class="nav-item"> <button class="btn">Обратный звонок</button> </li> </ul> </nav> </div> </header> |
<header class="header"> <div class="container header-container"> <ul class="logo"> <li class="list-item"> <img src="img/logo.png" alt=""> </li> <li class="list-item">+7 9999999999</li> <li class="list-item-left"> <svg width="21" height="12" viewBox="0 0 21 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M10.59 1.41L14.17 5H0V7H14.17L10.58 10.59L12 12L18 6L12 0L10.59 1.41ZM19 0V12H21V0H19Z" fill="#CC9933"/> </svg> <a href="">Личный кабинет</a> </li> </ul> <nav class="nav"> <ul class="nav-list"> <li class="nav-item">О нас</li> <li class="nav-item">Услуги</li> <li class="nav-item">Преимущества</li> <li class="nav-item">Размещение</li> <li class="nav-item">Блог</li> <li class="nav-item">Контакты</li> <li class="nav-item"> <button class="btn">Хочу тур</button> </li> <li class="nav-item"> <button class="btn">Обратный звонок</button> </li> </ul> </nav> </div> </header>
css * { box-sizing: border-box; background: #E5E5E5; } .container { max-width: 1170px; margin-right: auto; margin-left: auto; display: flex; padding: 30px; } .header-container { display: flex; flex-direction: column; padding: 0; } .logo { display: flex; align-items: center; padding: 30px 0; } .nav { background: #ffffff; } .list-item-left { margin-left: 540px; } .nav-list { display: flex; align-items: center; height: 70px; justify-content: space-around; } |
css * { box-sizing: border-box; background: #E5E5E5; } .container { max-width: 1170px; margin-right: auto; margin-left: auto; display: flex; padding: 30px; } .header-container { display: flex; flex-direction: column; padding: 0; } .logo { display: flex; align-items: center; padding: 30px 0; } .nav { background: #ffffff; } .list-item-left { margin-left: 540px; } .nav-list { display: flex; align-items: center; height: 70px; justify-content: space-around; }
Дополнительно:
Положить в фиддл и описать конкретно чего не работает не судьба?
Что значит "не задаётся бэкграунд"? Всё накидывается и работает в соответствии с тем, что указано в css.
У nav белый фон, у списка внутри - серый, согласно универсальному селектору
* { box-sizing: border-box; background: #E5E5E5; } |
* { box-sizing: border-box; background: #E5E5E5; }
(без чёткого понимания всех нюансов этого селектора использовать его не рекомендуется).
- бэкграунд всей страницы работает, блок nav должен быть белый, как указано в css, но свойство почему-то не работает
- Никита Соколов, так у вас стоит на
* { box-sizing: border-box; background: #E5E5E5; }
* { box-sizing: border-box; background: #E5E5E5; }
(всему ставить серый фон)
что за рахитное написание кода?
задайте background для body а не для *
уберите его
т.к у вас внутри nav стоят элементы ul li a
которым соответственно задается серый фон - Никита Соколов, я вам именно это и объяснил. Объяснил почему он серый.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Если у вас возникают проблемы с заданием фона для элемента nav на вашем веб-сайте, есть несколько шагов, которые вы можете предпринять, чтобы исправить эту проблему.
1. Проверьте CSS правила: Убедитесь, что у элемента nav есть правильные CSS правила для задания фона. Например, вы можете использовать свойство background-color для задания цвета фона, или background-image для задания изображения в качестве фона. Убедитесь, что вы указываете правильный путь к изображению, если используете его.
2. Проверьте порядок CSS правил: Убедитесь, что правила для элемента nav и его фона не переопределяются другими CSS правилами в вашем файле стилей. Порой, неправильный порядок правил может привести к тому, что заданный вами фон не отображается.
3. Используйте !important: Если у вас есть другие CSS правила, которые могут переопределять задание фона для элемента nav, вы можете использовать ключевое слово !important после свойства background, чтобы убедиться, что ваше правило будет применено в любом случае. Например:
nav { background-color: #f0f0f0 !important; }
4. Проверьте поддержку браузеров: Убедитесь, что выбранный вами фоновый стиль поддерживается всеми браузерами, которые вы хотите поддерживать. Некоторые стили фона могут не отображаться в старых версиях браузеров, поэтому важно убедиться, что ваш выбранный стиль совместим со всеми популярными браузерами.
Следуя этим шагам, вы сможете исправить проблему с заданием фона для элемента nav на вашем веб-сайте. Не забывайте также очистить кэш браузера после внесения изменений в CSS, чтобы увидеть обновленный результат.