网页栏中无法滚动的内容+不可点击的超链接

问题描述 投票：0回答：1

我有一个问题，就是我的页面在栏后无法在整个内容中滚动。而且，我想在栏后将图像适合页面的大小，因此不会有左右间隙，并且图像要居中后的文字。最后，由于某些原因，尽管我用<a>标签使购物车和用户无法点击，屏幕截图：enter image description here如果我点击<li>enter image description hereCSS代码：：

*{
    padding: 0;
    margin: 0;
}
.header{
   height: 80px;
 width: 100%;
    background: url(images/header.jpeg);
    position: fixed;
    z-index: 99;
}
.bar{
    width: 100%;
    height: 43px;
    background: url(images/menu-boarder.jpeg);
    flex-flow: row wrap;
  align-items: center;
    position: fixed;
    z-index: 99;
}

.container {
  position: relative;
  width: 100%;
  max-width: 400px;
}

.container img {
  width: 100%;
  height: auto;
}
.mark_colour{
    background-color: pink;
}

.container .btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: #555;
  color: white;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  cursor: pointer;
  border-radius: 5px;
  text-align: center;
    background-color: pink;
}
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;
}

.homepage_content {
  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 class="icons"><!-- here is the unclickable part --------------------------------------------->
     <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>


     </div>

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

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

      </div>

    <h4><center><u><mark class="mark_colour">Welome to our Bakery shop!</mark></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>  
    <div  class="footer">


    </div>
</body>
</html>
html css header position footer
1个回答
0
投票

根据我的理解，我为您的“ After bar”图像制作了小提琴。看看。

.banner{overflow:hidden}
.banner img{width:100%}
.centered-element{text-align:center}
<div class="banner">
<img src="https://via.placeholder.com/1600x400" alt="Banner">
</div>
<div class="centered-element">
<p>Some text</p>
</div>

关于您的点击问题，建议您在搜索中添加display:block并添加<a>标签。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.