CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
prathana dan
prathana dan

Reputation: 141

button alignment issue on html,css

I want something like this https://www.producthunt.com/e/best-of-february-2017 enter image description here

On hover external link and save must appear on the same line, but for me the alignment is not coming. Thanks in advance!

snippet is below and this is the image result of my codeenter image description here

< script type = "text/javascript" >
  $(document).ready(function() {
    $(document).on('mouseenter', '.sec-b', function() {
      $(this).find("#external").show();
    }).on('mouseleave', '.sec-b', function() {
      $(this).find("#external").hide();
    });
  }); <
/script>

<
script type = "text/javascript" >
  $(document).ready(function() {
    $(document).on('mouseenter', '.sec-b', function() {
      $(this).find("#down").show();
    }).on('mouseleave', '.sec-b', function() {
      $(this).find("#down").hide();
    });
  }); <
/script>
.sec-b {}

#gb {
  margin-top: 2%;
}

#gb1 {
  margin-top: -13%;
  margin-left: 15%;
  font-size: 20px;
}

#gb2 {
  margin-top: -1%;
  margin-left: 15%;
}

.but {
  display: inline-block;
  font-size: 12px;
  margin-top: 1%;
  margin-left: 15%;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  text-transform: capitalize;
  transition: all linear 0.2s;
}

.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}

.but:hover {
  padding-right: 30px;
  background-color: #ffffff;
}

.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}

#up {
  margin-left: 53%;
  margin-right: 1%;
}

#down {
  margin-left: 45%;
  margin-right: 1%;
}

#external {
  margin-left: 35%;
  margin-right: 1%;
}

#comment {
  margin-top: 3px;
}

.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}

.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="sec-b">

  <img src="img/gboard.jpg" height="100" width="100" id="gb">
  <p id="gb1">Gboard by Google</p>
  <p id="gb2">Google search,emoji</p>
  <span class="btn btn-secondary btn-sm but">
							TECH
							  <span>+</span>
  </span>
  <a href="#" class="btn btn-secondary btn-sm" id="external"><span class="fa fa-external-link"></span> 
    						</a>
  <a href="#" class="btn btn-secondary btn-sm" id="down"><span class="fa fa-download">&ensp;SAVE</span> 
    						</a>

  <a href="#" class="btn btn-secondary btn-sm" id="up"><span class="fa fa-caret-up">&ensp;2662</span> 
    						</a>
  <a href="#" class="btn btn-secondary btn-sm" id="comment"><span class="fa fa-comment">&ensp;42</span> </a>
  <hr>


</div>

Upvotes: 2

Views: 95

Answers (3)

Kirtan Patel
Kirtan Patel

Reputation: 189


I have solved your issue by make some changes in CSS and HTML. Here is its fiddle: JSFiddle
I've tried to achieve same result as producthunt.com example. So, I've almost rewrite your code. Please take a look mainly on HTML and CSS:

HTML:

<div class="sec-b">
  <img src="https://ph-files.imgix.net/1c1c487a-379f-4f0c-99cd-cb6048a85606?
 auto=format&auto=compress&codec=mozjpeg&cs=strip&w=80&h=80&fit=crop" 
height="80" width="80" align="left">
  <p>Gboard by Google<br>
  <small>Google search, emoji</small></p>
  <div class="btn btn-secondary btn-sm but">TECH<span>+</span></div>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="comment"><span class="fa fa-comment">&ensp;42</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="up"><span 
class="fa fa-caret-up">&ensp;2662</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="down"><span 
class="fa fa-download">&ensp;SAVE</span></a>
  <a href="#" class="btn btn-secondary btn-sm float-right" id="external"><span class="fa fa-external-link"></span></a>
  <hr>
</div>


CSS:

.sec-b {
  display: block;
  padding:0.5rem;
}
.sec-b p, .sec-b small {
  margin-bottom:0;
}
.sec-b > img {
  padding: 0.25rem 0.5rem;
}
.sec-b .btn {
  margin: 0.25rem 0.25rem;
}
.sec-b:first-child .btn {
  margin: 0.25rem 0.25rem 0.25rem 0;
}
.but {
  display: inline-block;
  font-size: 0.75rem;
  border-radius: 0.25rem;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  transition: all linear 0.2s;
  cursor: pointer;
}
.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}
.but:hover {
  padding-right: 1.5rem;
  background-color: #ffffff;
}
.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}
.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}
.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}


JS:

$(document).ready(function() {
  $(document).find("#external").hide();
  $(document).find("#down").hide();
  $(document).on('mouseenter', '.sec-b', function() {
    $(this).find("#external").show();
  }).on('mouseleave', '.sec-b', function() {
    $(this).find("#external").hide();
  });
});
$(document).on('mouseenter', '.sec-b', function() {
  $(this).find("#down").show();
}).on('mouseleave', '.sec-b', function() {
  $(this).find("#down").hide();
});

Still it is very messy, you have to cleanup your code. You can merge "external" & "down" IDs and can write single JS for hide/show it on mouse over.

Upvotes: 3

Gerard
Gerard

Reputation: 15796

Hope this helps. It's using nested flexboxes and all id's are replaced with classes. Javascript is not required.

.container {
  display: flex;
  padding: 1em;
  border: thin solid lightgray;
}

.rightColumn {
  display: flex;
  flex-flow: column;
  margin-left: 1em;
  max-height: 100px;
  justify-content: space-between;
}

.rightColumn>p {
  margin-bottom: 0;
}

.icons {
  display: flex;
}

.btn.down,
.btn.external {
  display: none;
}

.but {
  display: inline-block;
  font-size: 12px;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  text-transform: capitalize;
  transition: all linear 0.2s;
}

.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}

.but:hover {
  padding-right: 30px;
  background-color: #ffffff;
}

.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}

.container:hover .btn.external {
  display: inline-block;
}

.container:hover .btn.down {
  display: inline-block;
}

.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}

.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
  <img src="http://placehold.it/100/00ff00" width="auto" height="100px">
  <div class="rightColumn">
    <p>Gboard by Google</p>
    <p>Google search,emoji</p>
    <div class="icons">
      <span class="btn btn-secondary btn-sm but">TECH<span>+</span></span>
      <a href="#" class="btn btn-secondary btn-sm external">
        <span class="fa fa-external-link"></span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm down">
        <span class="fa fa-download">&ensp;SAVE</span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm up">
        <span class="fa fa-caret-up">&ensp;2662</span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm comment">
        <span class="fa fa-comment">&ensp;42</span>
      </a>
    </div>
  </div>
</div>

Upvotes: 1

R&#239;sh&#239;K&#234;sh K&#252;mar
R&#239;sh&#239;K&#234;sh K&#252;mar

Reputation: 5092

.sec-b {}

#gb {
  margin-top: 2%;
}

#gb1 {
  margin-top: -13%;
  margin-left: 15%;
  font-size: 20px;
}

#gb2 {
  margin-top: -1%;
  margin-left: 15%;
}

.but {
  display: inline-block;
  font-size: 12px;
  margin-top: 1%;
  margin-left: 15%;
  border: 1px solid #e6e6e6;
  border-radius: 4px;
  position: relative;
  white-space: nowrap;
  background-color: #FFFFFF;
  color: #000000;
  text-transform: capitalize;
  transition: all linear 0.2s;
}

.but span {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 0px;
  display: inline-block;
  vertical-align: middle;
  background-color: #9E9E9E;
  border-left: 1px solid #BDBDBD;
  width: 0px;
  visibility: hidden;
}

.but:hover {
  padding-right: 30px;
  background-color: #ffffff;
}

.but:hover span {
  width: auto;
  visibility: visible;
  padding: 3px;
  background-color: #e6e6e6;
}

#up {
  margin-left: 53%;
  margin-right: 1%;
}

#down {
  margin-left: 45%;
  margin-right: 1%;
}

#external {
  margin-left: 35%;
  margin-right: 1%;
}

#comment {
  margin-top: 3px;
}

.fa-caret-up {
  font-size: 14px;
  padding: 2px 2px 2px 2px;
}

.fa-comment {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-download {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}

.fa-external-link {
  font-size: 14px;
  color: #7a7a7a;
  padding: 2px 2px 2px 2px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>


<div class="sec-b">
  
  <img src="https://lh3.googleusercontent.com/X64En0aW6jkvDnd5kr16u-YuUsoJ1W2cBzJab3CQ5lObLeQ3T61DpB7AwIoZ7uqgCn4=w300" height="100" width="100" id="gb">
  
  <p id="gb1">Gboard by Google</p>
  <p id="gb2">Google search,emoji</p>
 
 
 <span class="btn btn-secondary btn-sm but" style="margin-top: -5px;">TECH<span>+</span></span>

<div class="pull-right" style="margin-right:5px">

<a href="#" class="btn btn-secondary btn-sm external">
        <span class="fa fa-external-link"></span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm down">
        <span class="fa fa-download">&ensp;SAVE</span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm up">
        <span class="fa fa-caret-up">&ensp;2662</span>
      </a>
      <a href="#" class="btn btn-secondary btn-sm comment">
        <span class="fa fa-comment">&ensp;42</span>
      </a>
</div>

<hr>
</div>

Upvotes: 0

Related Questions