Du texte sur mon image! :(
borg80
-
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Pitet Messages postés 2826 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'ai un ptit soucis! J'ai suivis un ptit tuto pour fabriquer un slider en CSS et HTML, il fonctionne :)!!
En revanche je n'arrive pas à mettre du texte sur les images de mon slider. Si l'un de vous sait comment faire!
Le code est très court! Voiçi :
J'ai un ptit soucis! J'ai suivis un ptit tuto pour fabriquer un slider en CSS et HTML, il fonctionne :)!!
En revanche je n'arrive pas à mettre du texte sur les images de mon slider. Si l'un de vous sait comment faire!
Le code est très court! Voiçi :
<div id="slider">
<figure>
<div id="contentimage1"><p>TEXTE TEXTE TEXTE TEXTE</p></div>
<img src="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg">
<img src="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg">
<img src="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg">
<img src="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg">
</figure>
</div>/code>
le CSS :
<code css>
<-- GESTION DU SLIDER --!>
div#slider { width: 100%; text-align:center;}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
text-align: center;
}
div#slider figure img { width: 20%; height: auto; }
div#slider { width: 100%; overflow: hidden }
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
div#slider figure {
position: relative;
width: 500%;
margin: 0;
padding: 0;
font-size: 0;
left: 0;
text-align: left;
animation: 30s slidy infinite;
}
<-- FIN GESTION DU SLIDER --!>
#contentimage1 { background-image="http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg"; width:100%; height:auto;}
A voir également:
- Du texte sur mon image! :(
- Extraire texte d'une image - Guide
- Image iso - Guide
- Transcription audio en texte word gratuit - Guide
- Insérer une image dans word sans bouger le texte - Guide
- Excel cellule couleur si condition texte - Guide
2 réponses
Salut,
Une solution possible :
Quelques remarques :
- remplacement de la balise figure qui n'était pas correctement utilisée
- remplacement des balises img par une balise div en affichant l'image en fond de la div et permettant ainsi d'écrire du texte sur l'image
- factorisation et corrections du css
Bonne journée
Une solution possible :
<!-- HTML -->
<div id="slider">
<div class="slides">
<div class="slide" style="background-image: url('http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg')">texte 1</div>
<div class="slide" style="background-image: url('http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg')">texte 2</div>
<div class="slide" style="background-image: url('http://img15.hostingpics.net/pics/961336ESSAISIMAGES.jpg')">texte 3</div>
</div>
</div>
/* CSS */
#slider {
width: 100%;
text-align:center;
overflow: hidden;
}
#slider .slides {
position: relative;
width: 500%;
margin: 0;
padding: 0;
left: 0;
text-align: left;
font-size: 0;
animation: 30s slidy infinite;
}
#slider .slides .slide {
display: inline-block;
width: 20%;
height: 100px;
background-size: cover;
font-size: 14px;
}
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
Quelques remarques :
- remplacement de la balise figure qui n'était pas correctement utilisée
- remplacement des balises img par une balise div en affichant l'image en fond de la div et permettant ainsi d'écrire du texte sur l'image
- factorisation et corrections du css
Bonne journée
Salut,
je me permet une question sur le sujet:
N'est ce pas plus lourd(à exécuter) l'animation en tout CSS plutôt qu'avec un peu de javascript(en tout cas pour un défilement d'images simple).
C'est vrai que sans interactivité ni contenu dynamique c'est une bonne alternative à Flash pour les animations mais quand j'ai plus d'une animation CSS sur ma page avec un netbook le navigateur frise puis plante.
Sur la plupart des sites sur l'animation CSS il est souvent indiqué de ne pas utiliser de trop nombreuses animations et que certaines transformations en particulier posent problèmes.
Quels sont vos avis sur ces performances(qui s'amélioreront le temps que tous les navigateurs soit plus optimisés aux normes HTML5 et au CSS3)?
je me permet une question sur le sujet:
N'est ce pas plus lourd(à exécuter) l'animation en tout CSS plutôt qu'avec un peu de javascript(en tout cas pour un défilement d'images simple).
C'est vrai que sans interactivité ni contenu dynamique c'est une bonne alternative à Flash pour les animations mais quand j'ai plus d'une animation CSS sur ma page avec un netbook le navigateur frise puis plante.
Sur la plupart des sites sur l'animation CSS il est souvent indiqué de ne pas utiliser de trop nombreuses animations et que certaines transformations en particulier posent problèmes.
Quels sont vos avis sur ces performances(qui s'amélioreront le temps que tous les navigateurs soit plus optimisés aux normes HTML5 et au CSS3)?
La plupart des animations javascript se contente au final de manipuler du css, donc en général les animations gérées uniquement en css seront plus rapide et plus légère à exécuter.
Mozilla (et d'autres) recommande le css pour des animations simples : https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
Et oui les animations css sont désormais correctement supportées par la majorité des navigateurs : https://caniuse.com/#feat=css-animation
Mozilla (et d'autres) recommande le css pour des animations simples : https://developer.mozilla.org/en-US/docs/Web/Performance/CSS_JavaScript_animation_performance
Et oui les animations css sont désormais correctement supportées par la majorité des navigateurs : https://caniuse.com/#feat=css-animation