Background-color применяется не корректно к body
224
06 февраля 2018, 07:53
Есть сверстаный сайт. Сверстан, конечно коряво. Но вот проблема с background-color никак не ожидалось. Проблема заключается в том, что в процессе серфинга по сайту background-color к тегу body применяется не всегда. Применяется, где-то в 80% случаев. При чем, остальная верстка ложится как и ожидается. Такое поведение замечено как в Хроме так и в Мозилле. В идеале, конечно, нужно дать ссылку на сайт, но я не хочу позориться). Может кто сталкивался с такой проблемой?
Вот все стили, которые применяются к body.
body {
min-height: 250vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgb(179,213,103);
}
Элементов, которые бы по величине были бы с body и могли бы его перекрывать - нет. normalize.css не влияет - я его и включал и выключал
П.С.: Раззадорил меня модератор, не верит на слово) Попробовал я купировать проблему, вроде бы получилось даже круче - срабатывает постоянно). Только, пробовать, наверное, надо у себя на компе. Здесь не воспроизводится
body{
min-height: 250vh;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: rgb(179,213,103);
}
#bodyWrapper {
flex-grow: 4;
position: relative;
left: 5%;
width: 90%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
#cap {
width: 100%;
height: 7vh;
align-self: flex-start;
display: flex;
justify-content: flex-end;
align-self: flex-end;
}
#header {
height: 25vh;
display: flex;
justify-content: space-between;
/*border: 1px solid;*/
margin-bottom: 1vh;
}
#contentWrapper {
flex-grow: 5;
}
#footer {
background-color: powderblue;
height: 20vh;
}
#constructInfoWrap {
display: none;
justify-content: center;
/*background-color: rgba(0,0,0,0.7);*/
position: fixed;
width: 100%;
height: 100%;
z-index: 1000;
}
#constructInfo {
top: 20vh;
position: absolute;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid red;
width: 25%;
height: 25%;
background-color: white;
border-radius: 10px;
}
#constructInfo p {
font-size: 25px;
padding-left: 10px;
padding-right: 10px;
}
#constructInfo button {
font-weight: bold;
color: #236277;
text-shadow: 0 1px #c2ecf9;
background: #61cdf3;
border-color: #6fbad1 #3fa3c0 #3583ab;
box-shadow: inset 0 1px #c5f0fd, inset 0 0 0 1px #8ad1eb, 0 1px #3583ab, 0 3px #3f9db8, 0 4px #3583ab, 0 5px 2px rgba(0, 0, 0, 0.4);
background-image: linear-gradient(to bottom, #9be5fa, #61cdf3 70%, #5fbde8);
border-radius: 5px;
margin-bottom: 3%;
align-self: center;
width: 30%;
height: 18%;
}
#constructInfo button:hover {
cursor: pointer;
background: #61cdf3;
border-top-color: #3eaac9;
}
#constructInfo button:active {
cursor: pointer;
background: #61cdf3;
border-top-color: #3eaac9;
vertical-align: -5px;
margin-bottom: 2%;
padding: 1px 13px 0;
border-width: 0;
border-radius: 5px;
box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 1px white;
}
/*************************C A P**************************/
#cap a{
margin-left:4vh;
margin-right: 4vh;
box-sizing: border-box;
display: flex;
align-items: center;
padding: 2px;
text-decoration: none;
font-size: 2vh;
cursor: pointer;
}
#cap a:visited, #cap a:link {
color: black;
}
#cap a p{
display: inline-block;
margin: 0px;
text-align: center;
}
/**********************H E A D E R ******************/
#logo{
position: relative;
width: 33%;
height: 100%;
}
#center {
position: relative;
width: 33%;
height: 100%;
flex-grow: 1;
display: flex;
flex-direction: column;
}
#phone {
height:80%;
display: flex;
flex-direction: row;
justify-content: space-between;
}
#phone img{
margin-left:3%;
align-self: center;
height: 35%;
}
#numberPhone{
width:85%;
display: flex;
}
#numberPhone p{
font-size: 18px;
margin: 0px;
margin-left: 3vh;
text-align: left;
align-self: center;
line-height: 6vh;
border-radius: 5px;
}
#search {
height: 20%;
display: flex;
flex-direction: row-reverse;
justify-content:flex-start;
}
#search input{
width: 80%;
height: 60%;
border-radius: 10px 10px 10px 10px;
margin-right:21%;
}
#btn_search {
background-image: url(../img/button-search.png);
background-repeat: no-repeat;
background-position-x: center;
background-position-y: center;
background-size: 50%;
position: absolute;
right: 20%;
width: 5vh;
height: 14%;
cursor: pointer;
}
.cartWrap {
width: 33%;
height: 100%;
/*border: 1px solid;*/
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
cursor: pointer;
}
#svgLoaderAjax {
align-self: center;
display: none;
}
#cart {
width: 70%;
height: 70%;
display: flex;
flex-direction: column;
}
#cart h3,h5{
margin: 1vh;
}
#miniCart {
background-color: white;
position: absolute;
top: 32vh;
width: 33%;
border: 1px solid blue;
z-index: 10000;
display: none;
flex-direction: column;
}
.miniCart_product {
display: flex;
justify-content: space-between;
border-bottom: 2px dotted;
margin-top: 2px;
font-size: 14px;
}
.miniCart_product_link{
border: 1px solid;
}
.miniCart_product_link img{
width: 7vh;
height: 9vh;
margin: 5px;
}
.miniCart_product_info {
flex-grow: 2;
display: flex;
/*border: 1px solid;*/
}
.miniCart_product_info p{
margin: 0px;
text-align: left;
width: 50%;
padding-left: 2px;
padding-top: 1vh;
}
.miniCart_product_name {
text-align: center;
margin: 0px;
width: 40%;
padding-top: 1vh;
}
.miniCart_product_delete{
align-self: center;
border: 1px solid;
width: 2vh;
height: 2vh;
cursor: pointer;
}
.none{
width: 33%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/***************************main_nav*****************************/
#sdfs {
height: 4vh;
}
.main_nav_class {
background-color: #CBADD2;
color: white;
position: relative;
display: flex;
align-items:center;
/*justify-content: center;*/
height: 6vh;
}
.fixed {
width:90%;
background-color: #CBADD2;
top:0;
color: white;
position: fixed;
display: flex;
align-items:center;
height: 6vh;
z-index: 10;
}
#main_nav_ul{
list-style: none;
padding: 0px;
margin: 0px 0px 0px 0px ;
display: flex;
flex-direction:row;
justify-content: flex-start;
}
#main_nav_ul> .navList:nth-child(1) {
background-color: #cbadd2;
}
#main_nav_ul> .navList:nth-child(2) {
background-color: #00B7CE;
}
#main_nav_ul> .navList:nth-child(3) {
background-color: #f888b3;
}
#main_nav_ul> .navList:nth-child(4) {
background-color: #9C71AE;
}
#main_nav_ul> .navList:nth-child(5) {
background-color: #F14941;
}
.navList{
padding-left: 3vh;
padding-right: 3vh;
position: relative;
text-transform: uppercase;
height: 6vh;
display: flex;
flex-direction: column;
justify-content: center;
}
.navList a{
text-decoration: none;
cursor: pointer;
}
.navList a:link, .navList a:visited {
color:white;
}
.navListItem {
box-sizing: border-box;
display:block;
font-size: 19px;
margin-top:2vh;
transition-duration: 0.5s;
text-transform: none;
text-align: left;
min-width: 25vh;
cursor: pointer;
}
.navList__div {
background-color: inherit;
position: absolute;
top: 6vh;
display: none;
justify-content: space-between;
flex-direction: row;
transition-duration: 0.5s;
border-radius: 0px 0px 10px 10px;
left: 0vh;
padding-bottom: 2vh;
z-index: 100;
}
.navList:hover > .navList__div{
display: flex;
}
.navListItem:hover {
padding-left: 2vh;
}
.ul__navList {
padding: 0px;
padding-right: 3vh;
padding-left: 2vh;
}
/*************************contentWrapper*********************/
.contentWrapper {
margin-top: 3vh;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
background-color: white;
}
.contentWrapperCategory {
margin-top: 3vh;
display: flex;
justify-content: space-between;
background-color: white;
}
/******************************left_content_column***************************/
#left_content_column{
flex-grow: 0;
flex-shrink: 0;
flex-basis: 20%;
border: 1px solid;
display:none;
}
#left_content_column h1{
text-align: center;
font-size: 4vh;
color: red;
}
label {
margin-left: 2vh;
padding-right: 1vh;
}
/**********************************rigth_content_column********************************/
#rigth_content_column {
flex-grow: 5;
display: flex;
justify-content: space-between;
background-color: white;
flex-direction: column;
}
.content {
flex-grow: 7;
display:flex;
justify-content: space-around;
flex-wrap: wrap;
align-content: flex-start;
}
.category {
display: flex;
flex-direction: column;
justify-content: space-between;
margin-top: 4vh;
border: 2px solid;
height: 50vh;
width: 40vh;
border-radius: 10px;
margin-left: 2vh;
margin-right: 2vh;
margin-bottom: 0px;
}
.category_link {
height: 38vh;
flex-grow: 2;
display: flex;
justify-content: center;
}
.category_name {
display: flex;
justify-content: center;
height: 7vh;
margin: 0px;
cursor: pointer;
}
.category_name a{
align-self: flex-start;
cursor: pointer;
font-size: 3vh;
text-decoration: none;
}
.category_name a:link, .category_name a:visited{
color: black;
}
.category_link img{
align-self: center;
width: 85%;
height: 85%;
} <div id="bodyWrapper">
<div id="cap">
<a href="#"><p>Условия <br>сотрудничества</p></a>
<a href="#"><p>Условия <br>доставки и оплаты</p></a>
<a href="#"><p>Контакты</p></a>
</div>
<header id="header">
<article id="logo"> <a href="#"> logo</a></article>
<div id="center">
<div id="phone">
<img src="img/ico-phone.png" alt="">
<div id="numberPhone"><p>(097)111-11-11<br>(093)111-11-11<br>(050)111-11-11</p></div>
</div>
<div id="search">
<!-- <div id="btn_search"></div> -->
<input id="inputSearch" type="text">
</div>
</div>
<div id="cartWrap" class="cartWrap">
<div id="cart">
<h3>Ваша корзина</h3>
<h5>Товаров - <span id="spanValueCartProduct">0</span></h5>
<h5>На сумму - <span id="spanSumCartProduct"> 0 грн.</span></h5>
</div>
<div id="miniCart">
<section><h3>Корзина пуста</h3></section>
</div>
</div>
</header>
<div id="sdfs">
<nav id="main_nav" class="main_nav_class">
<ul id="main_nav_ul">
<li class="navList"><a href="index.html">HOME</a></li>
<li class="navList"><a href="#"> Для мальчиков</a>
<div id="navList__forBoy" class="navList__div">
<ul class="ul__navList">
<li class="navListItem"><a href="category/boy/blouse/boyBlouse.html">Кофты/Жилетки</a></li>
<li class="navListItem"><a href="category/boy/pants/boyPants.html">Штаны/Шорты</a></li>
<li class="navListItem"><a href="category/boy/cap/boyCap.html">Головные уборы</a></li>
<li class="navListItem"><a href="category/boy/shirt/boyShirt.html">Рубашки</a></li>
<li class="navListItem"><a href="category/boy/t-shirt/boyT_shirt.html">Футболки</a></li>
</ul>
<ul class="ul__navList">
<li class="navListItem"><a href="category/boy/shoes/boyShoes.html">Обувь</a></li>
<li class="navListItem"><a href="category/boy/pullover/boyPullover.html">Гольфы/Свитера</a></li>
<li class="navListItem"><a href="category/boy/jackett/boyJackket.html">Курточки/Комбинезоны</a></li>
<li class="navListItem"><a href="category/boy/underwear/boyUnderwear.html">Белье</a></li>
</ul>
</div>
</li>
<li class="navList"><a href="#">Для девочек</a>
<div id="navList__forGirl" class="navList__div">
<ul class="ul__navList">
<li class="navListItem"><a href="category/girl/blouse/girlBlouse.html">Кофты/Жилетки</a></li>
<li class="navListItem"><a href="category/girl/pants/girlPants.html">Штаны/Шорты</a></li>
<li class="navListItem"><a href="category/girl/cap/girlCap.html">Головные уборы</a></li>
<li class="navListItem"><a href="category/girl/shirt/girlShirt.html">Блузки/Рубашки</a></li>
<li class="navListItem"><a href="category/girl/t-shirt/girlT_shirt.html">Футболки</a></li>
</ul>
<ul class="ul__navList">
<li class="navListItem"><a href="category/girl/shoes/girlShoes.html">Обувь</a></li>
<li class="navListItem"><a href="category/girl/pullover/girlPullover.html">Гольфы/Свитера</a></li>
<li class="navListItem"><a href="category/girl/jackett/girlJackket.html">Курточки/Комбинезоны</a></li>
<li class="navListItem"><a href="category/girl/underwear/girlUnderwear.html">Белье</a></li>
</ul>
</div>
</li>
<li class="navList"><a href="category/toy/toy.html">Игрушки</a>
</li>
<li class="navList"><a href="category/books/books.html">Книги</a></li>
</ul>
</nav>
</div>
<div id="contentWrapper" class="contentWrapper">
<div id="left_content_column" class="content_column" >Случайные товары</div>
<div id="rigth_content_column" class="content_column">
<article id="filtr" style="display:none;" ></article>
<div class="content">
<section class="category">
<a class="category_link" href="category/boy.html">
<img src="img/forBoy.jpg" alt="Одежда для мальчиков">
</a>
<h2 class="category_name"><a href="category/boy.html">Товары для мальчиков</a></h2>
</section>
<section class="category">
<a class="category_link" href="category/girl.html">
<img src="img/forGirl.jpg" alt="Одежда для девочек">
</a>
<h2 class="category_name"><a href="category/girl.html">Товары для девочек</a></h2>
</section>
<section class="category">
<a class="category_link" href="category/toy/toy.html">
<img src="img/toys.jpg" alt="Игрушки">
</a>
<h2 class="category_name"><a href="category/toy/toy.html">Игрушки</a></h2>
</section>
<section class="category">
<a class="category_link" href="category/books/books.html">
<img src="img/books.jpg" alt="Книги">
</a>
<h2 class="category_name"><a href="category/books/books.html">Книги</a></h2>
</section>
</div>
</div>
</div>
<footer id="footer">Footer</footer>
</div>body:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>магазин</title>
<link rel="stylesheet" href="style.css">
</head>
Answer 1
Скорее всего в стилях есть что-то в духе
#bodyWrapper {
background: white;
}
Для определения элемента, который задаёт фон, надо выделить любой элемент на неустравающем фоне через Inspect Element и выполнить в консоли
for (var x=$0, pc=getComputedStyle(x).backgroundColor, c; x=x.parentElement; pc=c) if ((c=getComputedStyle(x).backgroundColor)!=pc) console.log(x)
На выведенных в консоль элементах надо посмотреть фон.
Возможно, кроме backgroundColor надо обратить внимание на background.
-
10:16
-
17:54
-
22:01
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47550 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30491 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23623 visits
- Как через css изменить цвет png изображения? 10346 visits
- Blob video url download 9956 visits
- Php curl запрос через прокси с авторизацией 9205 visits
- Работа с captcha vk api 8088 visits
© "hostciti.net" 17.11.2024 | 19:42