zasod1 zasod1 - 4 months ago 7
HTML Question

Images not lining up correctly

I am attempting to create a list of images (which act as links) that will light up when hovered over. However, adding a

<div class="hover">
to the beginning of every image stopped them displaying in a horizontal row. How do I fix it so that it allows me to have it in a horizontal row?



.hover {
opacity: 0.6;
filter: alpha(opacity=60);
}

.hover:hover {
opacity: 1.0;
filter: alpha(opacity=100);
}

<body bgcolor="#000000">

<ul class="list-inline">
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px"></div></li>
<div class="hover">
<img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
</div></li>





Sorry for any poor code or a confusing question, this is my first post.

Thanks,
Oliver

Answer

Divs are block level elements by default and take up as much width as possible, so change the display from block to inline by adding display: inline; to your hover class:

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  display: inline;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>

Another option would be to float the .hover divs left by using float:left:

.hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  float:left;
}
.hover:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
<body bgcolor="#000000">

  <ul class="list-inline">
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/youtube-active.png" height="39px" width="99px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitter-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/facebook-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/soundcloud-active.png" height="56px" width="72">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/googleplus-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/steam-active.png" height="56px" width="56px">
    </div>
    </li>
    <div class="hover">
      <img src="https://raw.githubusercontent.com/ItsGeekyPixel/Website/master/Images/PNGs/twitch-active.png" height="56px" width="56px">
    </div>
    </li>