CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Pierre Debroux
Pierre Debroux

Reputation: 39

Keep a list with img on a same line

I would like to know how to place different li or div with img inside centered on a same line.

Here is a picture of what I want to have:

enter image description here

Here is what I did so far:

As you see the li are displayed vertically but I want to display the li horizontally.

What I've tried is: I can do it if I use the position absolute for the li and than display each one at different % from the left:100% from the left for the first one, 200% for the second one,...

Is it the only solution? I if want to dynamically change the image via javascript maybe it's more easy to keep a position:relative.

and here is the code.

html:

<div id="pagegallerie">
   <div id="carre1" class="carre"></div>
   <div id="carre2" class="carre"></div>
   <div class="gallerie">
      <li class="pictures" id="yo1"><img src="img/intro1.jpg" alt="Smiley face"></li>
      <li class="pictures"  id="yo2"><img src="img/intro2.jpg" alt="Smiley face"></li>
      <li class="pictures"  id="yo3"> <img src="img/intro3.jpg" alt="Smiley face"></li>
   </div>
</div>

and the css :

#pagegallerie {
    position: absolute;
    width: 100%;
    height: 100%;
}
.gallerie {
    position: absolute;
    width: 90%;
    height: 85%;
    top: 7.5%;
    bottom: 7.5%;
    left: 5%;
    right: 5%;
    text-align: center;
    overflow: hidden;
}
li {
    position: relative;
    display: inline-block;
    list-style: none;
    width: 100%;
    height: 100%;
    text-align: center;
}
li img {
    width: auto;
    height: 100%;
}
#carre1 {
    left: 2.5%;
    background-image: url("../img/arrowb.png");
}
#carre2 {
    right: 2.5%;
    background-image: url("../img/arrow.png");
}
#carre1:hover, #carre2:hover {
    background-color: rgba(0,0,0,0.2);
}
.carre {
    width: 60px;
    height: 76px;
    position: absolute;
    top: 50%;
    margin-top: -38px;
    box-sizing: border-box;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.02);
    cursor: pointer;
}

Here is the codepen I made :

Upvotes: 0

Views: 229

Answers (2)

Vidya Sagar
Vidya Sagar

Reputation: 1719

I have found these Sliders for you, in case if you still need help.

You may get a clue for creating your own gallery, it has multiple options like Sliders built with jQuery, Sliders built with out using jQuery, slider with arrow, slider without arrow, etc.., and lot more.

You can use their library or you can make your own library by making changes to their existing library if you are good at JavaScript.

Upvotes: 1

Vishnu Prasad
Vishnu Prasad

Reputation: 727

Try this 

li {
  list-style: none;
  display: inline;
}

DEMO Fiddle

Upvotes: 0

Related Questions