HTML Элементы на веб-странице отображаются неправильно - PullRequest
Новая
       13

HTML Элементы на веб-странице отображаются неправильно

0 голосов
/ 11 марта 2020

Когда вы go заходите на thedaystaragency.com/home и прокручиваете вниз к нашим службам, где лампочки, они все смещены и не работают должным образом. Это код, который я использую, сейчас я удалил кнопку, потому что по какой-то причине elementor не позволяет кнопке функционировать должным образом, если можно было бы порекомендовать какое-либо решение, я был бы очень признателен! :) 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
#myBtn{
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

#lightbulb:hover img{
    content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png");
}
  
  
#lightbulb:hover p { font-weight:bold; }
}
</style>
</head>
<body>
    <center>
    <div id=lightbulb >
 <img src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" width=25px;> <br> <br> <h2> hi</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>

}

Для кнопки я пытаюсь сделать что-то вроде этого: 

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>

<h2>Read More Read Less Button</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

<script>
function myFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("more");
  var btnText = document.getElementById("myBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more"; 
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less"; 
    moreText.style.display = "inline";
  }
}
</script>

</body>
</html>

Ответы [ 3 ]

0 голосов
/ 11 марта 2020

Я бы рекомендовал вам не переключать весь абзац на жирный текст. Вы можете использовать что-то вроде этого, может быть: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>
#myBtn{
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: #4CAF50;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
}

#lightbulb:hover img{
    content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png");
} 
  
#lightbulb:hover p { 
  box-shadow: -26px 10px 37px -4px rgba(220,220,220,1);
  background-color: rgba(204, 245, 245, 0.5);
}

.text {
  box-sizing: border-box;
  padding: 5px;
  text-align: justify;
  transition-duration: 700ms;

}

</style>
</head>
<body>
    <center>
    <div id=lightbulb >
 <img src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_11logomakr_2srycx.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/rsz_4rsz_logomakr_3ijkr2.png" width=25px; <br> <br> <h2> hi</h2> <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</p>
0 голосов
/ 12 марта 2020

На самом деле я попробовал это решение, и, похоже, оно сработало благодаря вашей проницательности! 

`enter code here`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change Image on Hover in CSS</title>
<style>

#gears:hover img{
    content:url("https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5dF3BF.png");
}
#gears img { padding-bottom:15px;
}

  #gears p{ font-family:raleway;
  font-size:15px;
  font-weight:400;
  }
  
  #gears h2{ font-family:raleway;
  font-size:20px;
    font-weight:400;
  }

  
  #gears:hover h2{ color:#04A4CC; }
}


</style>
</head>
<body>
    <br>
    <center>
    <div id=gears >
 <img src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5i5JYt.png" onmouseover=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5dF3BF.png" onmouseout=this.src="https://thedaystaragency.com/wp-content/uploads/2020/03/LogoMakr_5i5JYt.png" wwidth=45px; <br> <br> <h2> OPERATIONAL CONTROLS</h2> <p>At Cannabrand, we like to make sure you are profitable at every stage of the production process. We focus on process re-engineering. <br>
 [expand title="Read More" swaptitle="Close" trigpos="below" trigclass="my_button"]
 We streamline business' supply-side activities to maximize customer value and gain competitive advantage in an increasingly competitive marketplace. Cannabrand’s operations experts will help streamline and structure production, product development, and information systems needed to decrease costs, increase efficiency, and increase the velocity of money flowing through the company. By managing the overall supply chain, we help our partners to increase and maintain a competitive advantage. [/expand]</p> <br>
0 голосов
/ 11 марта 2020

Не уверен, что вы хотите сделать, но рассогласование происходит из-за того, что последний элемент div лампочки не заключен в ту же структуру div, что и первые три элемента.

...