make button and div same height side by side

html css

33 просмотра

1 ответ

In the bottom right corner I have 1 button to open a chat, then a div where it displays the current online users and then another button to get to the top of the page.

I use the <button> tag on the buttons but the padding is different for button and div. If I use the same padding the div will be larger, not by much but it annoys me.

Is there any easy way to fix this? They are all position:fixed;

Here is my Code:

jQuery(document).ready(function($) {
  $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
      $('#backToTop').fadeIn('slow');
    } else {
      $('#backToTop').fadeOut('slow');
    }
  });
  $('#backToTop').click(function() {
    $("html, body").animate({
      scrollTop: 0
    }, 500);
    //$("html, body").scrollTop(0); //For without animation
    return false;
  });
});
.chat-wrapper {
  position: fixed;
  display: inline-block;
  width: 100%;
  right: 0;
  bottom: 0;
  z-index: 1000;
}
.top {
  float: right;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}
.chat-online {
  width: 75px;
  float: right;
  padding: 7px;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}
#button {
  background: none;
  border: none;
  padding: 8px;
  color: #05c7f7;
}
#backToTop {
  background: none;
  border: none;
  padding: 8px;
  color: #05c7f7;
}
#button:hover {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:hover {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:active {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#backToTop:active {
  color: #fff !important;
  -webkit-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  -moz-box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  box-shadow: 0 0 10px rgba(5, 199, 247, 0.5), inset 0 0 1px 1px #05c7f7;
  background-image: linear-gradient(to top, #096aa1, #26c3f6);
}
#button:focus {
  outline: 0;
}
#backToTop:focus {
  outline: 0;
}
.chat-icon {
  float: right;
  border-left: 1px solid #000;
  background-color: #1d1d1d;
  border-top: 1px solid #000;
  background-image: -webkit-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -moz-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: -o-linear-gradient(bottom, #1a1b1f, #212528);
  background-image: linear-gradient(to top, #1a1b1f, #212528);
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), inset 0 1px 1px rgba(255, 255, 255, .1);
  z-index: 2000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chat-wrapper">
  <div class="chat-content">
    <div class="top">
      <button class="fa fa-chevron-up" id="backToTop" name="top" aria-hidden="true"></button>
    </div>
    <div class="chat-online" tooltip="Current users online (<5min)">
      Online : <span class="fr" id="status">
        <script type="text/javascript">
          var int = self.setInterval("update()", 1000);
          function update() {
            $('#status').load('/online.php');
          }
        </script>				
      </span>
    </div>
    <div class="chat-icon">
      <button class="fa fa-comments-o" id="button" name="chat" aria-hidden="true"></button>
    </div>
  </div>
</div>

Автор: Volcan 3 Источник Размещён: 08.11.2019 11:25

Ответы (1)


1 плюс

Решение

Use a div element not a button one :)

Автор: Nathan Schwarz Размещён: 20.08.2016 02:31
Вопросы из категории :
32x32