Align slider in css

Question

Align slider in css

Navigation

#1 by (0 votes)

0

I'm having trouble putting this slider one on the other, it's just one underneath the other, can anyone help me fix it? Remembering that the first slide is in the correct position and wanted everyone in the same position, side by side.

HTML :

<div id ="slider">
  <figure class="slide"><img src="imagens/header.png" alt=""></figure>
  <figure class="slide"><img src="imagens/header2.png" alt=""></figure>
  <figure class="slide"><img src="imagens/header3.png" alt=""></figure>
</div>

CSS :

#slider {
    list-style:none;
    width:100%;
    height:100%;
    text-align: center;
    margin:0 auto;
    padding:0;
    top:94px;
    overflow: hidden;
    position: fixed;
    animation: 20s slidy infinite;
}
.slide figure div{
    width: 20%;
    float: left;
}
.slide figure img{
    width: 100%;
    float: left;
}
.slide figure{
    position: relative;
    top:16px;
    width: 500%;
    height:500%;
    margin: auto;
}

css

asked by anonymous 30.08.2016 / 17:29

1 answer

Error making android route: AndroidHttpClient: Leak found Update a record with a single field

score 0 · Answer 1

Dude, your css is half wrong.

First thing: When you do

.slide figure div {}

You're saying that the html code is structured as follows

<div class="slide">
 <figure><div>Seu conteudo</div></figure>
</div>

That's why your css is not working on your slider. Try changing it to

.slide {
 display: inline-block;
 float: left;
}

This way you do not have to put float: left on the children nodes of .slide (img, div, etc).