Перейти к содержимому

Форум ZiSMO.biz


Купить ссылку здесь
Фотография

поплыла шапка при добавлении карточек товара

Форум ZiSMO.biz
шапка html css
2
Сообщений в теме: 2

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 6ч 50м
0

Здравствуйте. Имеем следующий код:

 

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>TEST.COM   test</title>
<link href="source/style.css" type="text/css" rel="stylesheet"/> 
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js "></script>
</head>
<body>
<div class="header">
<div class="container clearfix">
<h1 id="logo">NEAT-SHOP.COM</h1>
<nav>
<a href="">Главная</a>
<a href="">Контакты</a>
<a href="">Поддержка</a>
</nav>
</div>
</div>  


<div class="row">




<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">ВЕНИК</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка одноразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро одноразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Веник двухразовый</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка двухразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро двухразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="broom">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Веник трехразовый</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="stool">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Табуретка трехразовая</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>




<div class="product" data-category="pail">
<img class="product-img" src="https://loremflickr.com/200/200/" alt="">
<h3 class="product-name">Ведро трехразовое</h3>
<p class="product-description">Здесь должно быть много добрых слов о замечательном товаре</p>
<p class="product-cost">999$</p>
</div>








</div>




</div>


<script src="js/script.js"></script>
</body>
</html>
body{
font-family: 'Yanone Kaffeesatz', sans-serif;
} 
* {
  margin: 0;
  padding-left: 0;  
} 


.header {
width: 100%;
height: 100px;   /*шапка верт.*/
overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #3b8dbd;
    -webkit-transition: height 0.3s;
    -moz-transition: height 0.3s;
    -ms-transition: height 0.3s;
    -o-transition: height 0.3s;
transition: height 0.3s;
}
.header h1#logo {
display: inline-block;
height: 150px;
float: left;
margin-left: 50px;
font-family: "Oswald", sans-serif;
font-size: 60px;
color: white;
font-weight: 400;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav {
display: inline-block;
float: right;
margin-right: 50px;
}
.header nav a {
line-height: 150px;
margin-left: 20px;
color: #9fdbfc;
font-weight: 700;
font-size: 18px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
transition: all 0.3s;
}
.header nav a:hover {
color: white;
}




























.container{
  max-width: 960px;
  margin: 3rem auto;
}
.choice{
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}
.choice-item{
  padding: .4rem 1rem;
  border: 1px solid black;
  margin-right: 1rem;
  cursor: pointer;
}
.choice-item:last-of-type{
  margin-right: 0;
}
.choice-active{
  background-color: olive;
  color: white;
}
.row{
  display: flex;
  flex-wrap: wrap;
}
.product{
 width: 33.333%;
padding: 1rem;
}


.product-img{
display: block;
width: 100%;
height: auto;
}


.product-name{
  text-align: center;
}


.product-description{
  text-align: center;
}


.product-cost{
  color: blue;
  font-size: 2rem;
  text-align: center;
  margin-top: 0;
}










































@media all and (max-width: 660px) {
    .header h1#logo {
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 100px;
text-align: center;
    }
    .header nav {
display: block;
float: none;
height: 50px;
line-height: 50px;
text-align: center;
margin: 0 auto;
    }
    .header nav a {
line-height: 50px;
margin: 0 10px;
    }

JS

var product = $('.product');


$('#choice > .choice-item').click(
function(){
  productChoice($(this));
});


function productChoice(self){
  self.siblings().removeClass('choice-active');
  self.addClass('choice-active');
  var productCategory = self.attr('data-choice');
  if(productCategory != 'all'){
    product.map(
      function(){
        if($(this).attr('data-category') === productCategory){
          $(this).css('display','block');
        }
        else{
          $(this).css('display','none');
        }
      }
    );
  }
  else{
    product.css('display','block');
  }
}

Дело в том, что шапка и карточки товара сместились и получается неразбериха. Можете подсказать в чём дело?

 


    • 0
  • Наверх

Поделиться этим:

OFFLINE Отправлено

Dinver
Постоянный
  • Онлайн:30д 20ч 33м
21

Накидал в jsfiddle чтобы код не скидывать: http://jsfiddle.net/vL78am0t/1/


Сообщение отредактировал Dinver: 14 01 2019 - 09:00

    • 0
  • Наверх

OFFLINE Отправлено

_ivan777
Активный
  • Онлайн:1д 6ч 50м
0

Накидал в jsfiddle чтобы код не скидывать: Ссылка

 Спасибо друг, как мне тебя отблагодарить?


    • 0
  • Наверх

Рекламный пост

OFFLINE Отправлено

Leongram
Premium plus
  • Онлайн:41д 1ч 4м
92

*
Популярное сообщение!

Внимание! Вышла новая версия программы Lеongram.com 3.0 - лучшая бесплатная программа для раскрутки в instаgram по мнению форума ZiSMO. 

 

Функции: Подписка ++ Отписка ++ Лайкинг ++ Автопостинг ++ Планировщик ++ Отмечалка по фото ++ Чистка от ботов

in-img1.png

В первый же день привлечете новых клиентов. Instagrаm не банит. Увеличится количество живых подписчиков, лайков и комментариев сразу же.

[Скачать бесплатно]

 

Функций больше, чем в других программах ++ Пользуйтесь бесплатно без ограничений по времени ++ Можно не оставлять компьютер включенным. 


Сообщение отредактировал The_Dark: 21 09 2018 - 23:50

Изображение
    • 49
  • Наверх