исправлены верхний и нижний колонтитулы с прокручиваемым контентом + гиперссылка без клика - PullRequest
Новая
       11

исправлены верхний и нижний колонтитулы с прокручиваемым контентом + гиперссылка без клика

0 голосов
/ 28 февраля 2020

У меня проблема с тем, что мой верхний и нижний колонтитулы не отображаются, когда я прокручиваю страницу, если я прикрепляю изображение, изображение как бы перекрывается и становится над заголовком. это код css: 

*{
    padding: 0;
    margin: 0;
}
.header{
   height: 80px;
 width: 100%;
    background: url(images/header.jpeg);
    position: fixed;
}
.bar{
    width: 100%;
    height: 43px;
    background: url(images/menu-boarder.jpeg);
    flex-flow: row wrap;
  align-items: center;
    position: fixed;
}
body{
     margin-left: auto;
  margin-right: auto;
  margin-bottom: 100px;
  margin-top: 20px;
  overflow: auto;
  width: 80%;
}
.menu{
    float: left;
    list-style: none;
    margin-top: 10px;

}
.menu li{
    display: inline-block;

}
.menu li a{
    color: #fff;
    text-decoration: none;
    padding: 10px;
    font-family: sans-serif;
    font-size: 24px;

}
.menu li a:hover{
    background: #fff;
    color: #333;
    padding: 43px;
    font-weight: bold;
}

.search {
  display: flex;
  float: right;
  padding-top: 7px;
  position: relative;
  right:80px;


}

.searchTerm {
  width: 400%;
  border: 3px solid #000000;
  color: #000000;
  border: 3px solid #000000;
  padding-bottom: 10px;
  padding-top: 20px;
  padding-right: 25px;
  padding-left: 15px;
  height: 20px;
}

.searchTerm:focus{
  color: #000000;
}

.homeage_product {
  position: relative;
  width: 50%;
}


.homeage_but {
  width: 100%;
  height: auto;
}

.searchButton {
  width: 100px;
  border: 1px solid #000000;
  background: #000000;
  padding-right: 8px;
  padding-left: 10px;
  color: #FFFFFF;
  border-radius: 0 5px 5px 0;
  cursor: pointer;
  font-size: 20px;
}
.fa-shopping-cart, .glyphicon-user{

    color: #000000;

}
#lblCartCount {
    font-size: 12px;
    background-color: crimson;
    color: #fff;
    padding: 0 5px;
    vertical-align: top;
}
.form-inline {
   display: flex;

}


.footer{
    width: 100%;
    height: 100px;
    background: url(images/footer.jpeg);
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    margin-bottom: 0px;
}

код html: 

<!DOCTYPE html>
<html>
<head>
<meta charset= "utf-8">
<title>Cookie|Bakery shop</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
        </div>
    <br><br><br><br>
 <div class="bar">
        <ul class="menu">
        <li><a href="">Home</a></li>
            <li><a href="">Contact us</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Product</a></li>
        </ul>



      <div class="search">
         <form class="form-inline">
              <input type="text" class="searchTerm" placeholder="What are you looking for?">
              <button type="submit" class="searchButton"><i class="fa fa-search"></i></button> 
            </form>

и здесь я не могу понять, почему следующий тег <div> не активен (имеется в виду пользователь и тележка для покупок): 

<div class="icons">
 <a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">
      <asp:Label ID="lblCartCount" ForeColor="White"/>3</i></a>
 <a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
 </div>
 </div>

остальной код html: 

       </div>
    <div class="content">
    <!-- Image of a product with button refrence to the product it self  -->
<div class="homeage_product" >
  <img src="images/cake.jpg" alt="" style="width:100%; height:300px; padding: 0;">

    <button class="homeage_but" >CLICK ME!</button>

</div>
        </div>

        <h4><center><u>Welome to our Bakery shop!</u></center></h4>
        <p>
           Lorem ipnam dolor sit amet, consectetur adipiscing elit Sed felis turpis, ulturicies nee herndrerit a
          ullarneorper in maars Donee a erat molestie, condimentum ex eu, vehicula elst Ut egestas consectenor
          libero, et dictum elir tineidunt sed Sed tellus nisi, faciliais sut nulla eu, euismod blandit marpia. Praesent
          uficies semper auctor. Quisque eftieitur sollacstudin metus pec porta. Donec bbero notla, accumsan ut
          negue sit amet, tincsdurt facilisis felis. Phasellus ac ante pretium, vehicula ex sed, feugsat ipsum Nullam
          dapibus erat vitae ligula venenatis vestibulum Morbi aliquam sapien eu volutpet volutpat. Quisquue
          sapien nisl, pulvinar eu finabua eget, tempus quis ante Cras sed blandst eros. Quisque posuere eros at
          tellus tincidtant tristique.

        </p>
        <div  class="footer">


        </div>
    </body>
    </html>

1 Ответ

0 голосов
/ 28 февраля 2020

Добавьте z-index свой стиль заголовка в css: 

.header
{
    z-index: 99;
}

Свойство z-index определяет порядок наложения позиционированных элементов. Поэтому элементы с большим z-индексом всегда будут перед элементами с более низким z-индексом. Установка для z-index значения, большего (или даже равного) 0, устанавливает этот элемент на вершине непозиционированных элементов без указания z-индекса. Вы всегда можете установить его на значение ниже 99, но это обычная практика, чтобы избежать потенциальных конфликтов с другими позиционированными элементами.

Дайте мне знать, если это работает для вас:)

...