Sujet Précédent Sujet Suivant

Probleme Fade sur img dans li

Résolu/Fermé
Polaroidz Messages postés 2 Date d'inscription jeudi 3 septembre 2015 Statut Membre Dernière intervention 3 septembre 2015 - 3 sept. 2015 à 14:47
Polaroidz Messages postés 2 Date d'inscription jeudi 3 septembre 2015 Statut Membre Dernière intervention 3 septembre 2015 - 3 sept. 2015 à 16:58
Bonjour,

J'ai pour but de creer un "footer" de plusieurs images a la suite qui font un effet FadeIn - FadeOut "aleatoirement" entres-elles, tout marche tres bien jusque la, seulement je bloque au niveau du css.

Je n'arrive pas a faire en sorte que chaques images (3 par LI) se superpose, ce qui m'oblige a jouer avec la propriete "display: none - display:inline" mais ca fait un effet un peu moche sur le fade, tandis que si je les enleves ca fait apparaitre la deuxieme images en dessous (et du coup, ca fait decaler mon footer).

J'ai essayer de jouer avec les positions mais si j'essaye de mettremes images ou mes LI en absolute ca fait tout simplement disparaitre ma div.

le code:

html: 

<div class="slide">

        <li><img id="21" src="test/1.jpg">   <img id="1" style="display:none;" src="test/2.jpg">   <img id="11" style="display:none;" src="test/3.jpg"></li>

        <li><img id="27" src="test/2.jpg">   <img id="7" style="display:none;" src="test/3.jpg">   <img id="17" style="display:none;" src="test/4.jpg"></li>

        <li><img id="25" src="test/3.jpg">   <img id="5" style="display:none;" src="test/4.jpg">   <img id="15" style="display:none;" src="test/5.jpg"></li>

        <li><img id="22" src="test/4.jpg">   <img id="2" style="display:none;" src="test/5.jpg">   <img id="12" style="display:none;" src="test/3.jpg"></li>

        <li><img id="24" src="test/5.jpg">   <img id="4" style="display:none;" src="test/4.jpg">   <img id="14" style="display:none;" src="test/3.jpg"></li>

        <li><img id="28" src="test/1.jpg">   <img id="8" style="display:none;" src="test/3.jpg">   <img id="18" style="display:none;" src="test/2.jpg"></li>

	<li><img id="30" src="test/2.jpg">   <img id="10" style="display:none;" src="test/2.jpg">   <img id="20" style="display:none;" src="test/1.jpg"></li>

	<li><img id="23" src="test/3.jpg">   <img id="3" style="display:none;" src="test/2.jpg">   <img id="13" style="display:none;" src="test/5.jpg"></li>

	<li><img id="29" src="test/4.jpg">   <img id="9" style="display:none;" src="test/1.jpg">   <img id="19" style="display:none;" src="test/3.jpg"></li>

	<li><img id="26" src="test/5.jpg">   <img id="6" style="display:none;" src="test/1.jpg">   <img id="16" style="display:none;" src="test/2.jpg"></li>
</div>


css: 


.slide
{
    /*background-color: black;*/
    position: fixed;
    float: left;
    width: 100%;
    bottom: 0;
    left: 0;
}

.slide li
{
    width: 10%;
    display: inline-block;
    float: left;
    list-style: none;
} 

li img
{
    width: 100%;
}


Merci !
A voir également:

1 réponse

Réponse 1 / 1
Polaroidz Messages postés 2 Date d'inscription jeudi 3 septembre 2015 Statut Membre Dernière intervention 3 septembre 2015
3 sept. 2015 à 16:58
résolu, j'ai enlever le inline-block, mit les images en absolute, la width des images a 10 au lieu de 100, et j'ai rajouter un bottom 0 a ces images. et ajouter une marge individuellement sur chaques li (de 10% a 90% en commencant par la deuxieme)



ensuite, j'ai enlever les marges du body sinon il restait une bande blanche de chaques coté.

Nouveau css: 

.slide
{
    float: left;
    width: 100%;
    bottom: 0;
    left: 0;
}

.slide li
{
    width: 10%;
    float: left;
    list-style: none;
} 

li img
{
    bottom: 0;
    position: absolute;
    width: 10%;
}
0

Discussions similaires

Différence entre batterie Ii-ion et Li-po sur un smartphone
wellan79 -
FIU -

7 réponses
ouvrir un fichier .img
fanny -
Freebike -

11 réponses
image/lien HTML
petite_mure -
Elias -

11 réponses
Chanson la li la li la la la?
blue44650 -
Coutelier -

2 réponses
Sublimation: Couleurs non fidèles entre mon image à l'écran et résultat final
Sasthia -
contrariness -

17 réponses