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

не прокручиваемый контент + неактивная гиперссылка в панели веб-страниц

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

У меня проблема с тем, что моя страница не прокручивается по всему содержимому после бара. Также я хочу подогнать изображение после бара под размер страницы, чтобы не было никакого правого или левого промежутка и текст после изображения должен быть выровнен по центру. В последнее время корзина покупок и пользователь по какой-то причине не реагируют на клики, хотя я сделал их с помощью снимка экрана с тегом <a> для вывода. Я хочу, чтобы изображение соответствовало всей этой части. Слева направо: enter image description here их нет прокрутки, чтобы просмотреть все содержимое тега <P> enter image description here Код css :: 

*{
    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: 10px;
    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_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;

}
.banner{overflow:hidden}
.banner img{width:100%}
.centered-element{text-align:center}

.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="container">
<div class="banner">
<img src="images/cake.jpg" alt="">
     <button class="btn" >CLICK ME!</button>
</div>
         </div>
<div class="centered-element">
    <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>

1 Ответ

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

В соответствии с моим пониманием, я сделал эту скрипку для вашего изображения "после бара". Взглянуть. Я изменил это.

<a herf="xx.html"><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;">

<a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>

Вам нужно исправить herf до href --- вы ошиблись, набрав. Это решит вашу проблему с щелчками.

В связи с вашей другой проблемой, скажите, пожалуйста, хотите ли вы расширить "изображение торта" на баннере? 

*{
    padding: 0;
    margin: 0;
}
.header{
   height: 80px;
 width: 100%;
    background: url(https://via.placeholder.com/1600x400);
    position: fixed;
    z-index: 99;
}
.bar{
    width: 100%;
    height: 43px;
    background: url(https://via.placeholder.com/1600x400);
    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: 10px;
    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_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;

}
.banner{overflow:hidden}
.banner img{width:100%}
.centered-element{text-align:center}

.footer{
    width: 100%;
    height: 100px;
    background: url(https://via.placeholder.com/1600x400);
    bottom: 0px;
    left: 0px;
    right: 0px;
    position: fixed;
    margin-bottom: 0px;

}
<!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="container">
    <div class="banner">
      <img src="https://via.placeholder.com/400x400" alt="">
      <button class="btn">CLICK ME!</button>
    </div>
  </div>
  <div class="centered-element">
    <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>

И для ваших проблем с кликами, я предлагаю вам добавить display:block к поиску и корзине <a> тег.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...