позиционирующий элемент, чтобы плавать вправо и влево + отключить тег - PullRequest
Новая
       4

позиционирующий элемент, чтобы плавать вправо и влево + отключить тег

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

вот скриншот моего сайта. Я хочу настроить изображение так, чтобы оно было справа от страницы, как указано стрелкой ниже (float:right; не работает). Также как и (float:left;) i хочу с левой стороны добавить текст, как показано на рисунке слева на левой стороне. В последнее время для обведенной на фотографии части по какой-то причине на нее нельзя нажать: (((* enter image description here я хочу изображение, прикрепленное к правой стороне страницы в виде стрелки, показанной ниже :: enter image description here

код 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;
}
.hp_div{
    background-color: pink;
}
.hp_div section#hpimg{
    float: left;
}
.hp_div section#hptext{
    float: right;
}
.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;
}


.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;

}

.form-inline {
   display: flex;

}

.homeage_but {
  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;
}
.Hsection{margin-top:0px!important;margin-bottom:0px!important}
 .Hcontent{max-width:980px;margin-left:auto;margin-right:auto}
.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;
}

the html код :: 

<!DOCTYPE html>
<!--F04 :moudhi al.gowiez-->
<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">
    </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">
     <a herf=""><i class="fa fa-shopping-cart" style="font-size:36px; margin-right: 10px;"></i></a>
     <a herf=""><i class="glyphicon glyphicon-user" style="font-size:30px; margin-right: 5px; "></i></a>
     </div>
     </div>


     </div>


    <div  class="footer">


    </div>
    <div class="hp_div">    

         <!-- Slide Show -->
<section id="#hpimg">
  <img class="mySlides" src="pink-velvet-cake-thumb_1_660x660.jpg" style="width:660; height: 660;">
  <img class="mySlides" src="snicker-chocolate-cake-A_660x660.jpg" style="width:660; height: 660;">
  <img class="mySlides" src="torta-unicorn.jpg" style="width:660; height: 660;">
</section>
        <script>
// Automatic Slideshow - change image every 3 seconds
var myIndex = 0;
carousel();

function carousel() {
  var i;
  var x = document.getElementsByClassName("mySlides");
  for (i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
  myIndex++;
  if (myIndex > x.length) {myIndex = 1}
  x[myIndex-1].style.display = "block";
  setTimeout(carousel, 3000);
}
</script>
        <section id="#hptext">
        <h5>welocome</h5>
        <p>fkld;flfk;sk</p>
        </section>
        </div>


    </body>

</html>

Ответы [ 2 ]

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

Я сразу замечаю две вещи:

<section id="#hpimg"> & <section id="#hptext">

Вам необходимо удалить «#» из этих объявлений id, чтобы ваши CSS чтобы повлиять на них.

И причина, по которой ваши ссылки не работают: <a herf="">...</a>

'herf' не то же самое, что 'href'. Всегда проверяйте на наличие опечаток;)

РЕДАКТИРОВАТЬ: казалось, что одно из ваших правок показало, что вы хотите, чтобы изображение перемещалось влево, а не вправо. Я обновил маленькую скрипку , которую я сделал, в основном просто меняя float:left на float:right.

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

Почему бы вам не использовать bootstrap col-md для текста и изображения Например 

<div class="container">
 <div class="row">
   <div class="col-md-7">
     <p> Text </p>
   </div>
   <div class="5">
     <img href="cake img">
   </div>
 </div>
</div>
...