Impossible de rendre sliders responsives

Fermé

traderpierre Messages postés 291 Date d'inscription mercredi 11 octobre 2006 Statut Membre Dernière intervention 6 janvier 2024 - Modifié le 1 juin 2019 à 16:27
SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 - 2 juin 2019 à 11:36

Je fais un essais sur la page suivante :
https://promosdusines.com/EssaisSliderResponsiveDist.html
Ci-dessous code code HTML du body de cette page
_________________________
<body>
<div class="container">
<table height="179
" class="table-responsive">
<tr>
<td width="52%" align="center">
<ul class="rs-slider">
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/1-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton AG13 - LR44" / title="Promotion Piles bouton AG13 - LR44" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/5-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton lithium CR2032" title="Promotion Piles bouton lithium CR2032" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/14-AnimFr.gif" class="image-responsive" alt="Promotion Piles bouton AG4 - SR626" title="Promotion Piles bouton AG4 - SR626" /></a></li>
<li><a href="#lien-renvoi"><img src="https://promosdusines.com/img/cms/27-AnimFr.gif" class="image-responsive" alt="Promotion Peson électronique 40Kg" title="Promotion Peson électronique 40Kg" /></a></li>
</ul>
</td>
<td width="48%" align="center">
<ul class="rs-slider2">
<li><a href="https://promosdusines.com/content/1-Livraison"><img src="https://promosdusines.com/img/cms/EngagementFr_H150px.jpg" class="image-responsive" alt="Nos engagements" title="Nos engagements" /></a> </li>
<li><img src="https://promosdusines.com/img/cms/EnvoiFr_H150px.png" class="image-responsive" alt="Envoyé de France" title="Envoyé de France" /> </li>
<li><a href="https://promosdusines.com/content/3-Conditions-utilisation#Article8"><img src="https://promosdusines.com/img/cms/TamponSatisfaitRembourseFr_H150px.png" class="image-responsive" alt="Guarantie Satisfait ou Remboursé" title="Guarantie Satisfait ou Remboursé" /></a> </li>
</ul>
</td>
</tr>
</table>
</div>
<script src="/themes/classic/assets/js/jquery.js"></script>
<script src="/themes/classic/assets/js/jquery.refineslide.min.js"></script>
<script>
$(document).ready(function($) {
$('.rs-slider').refineSlide({
transition: 'cubeH',
transitionDuration: 1000,
autoPlay: true,
keyNav: false,
delay: 3000,
controls: null
});
});
</script>
<script>
jQuery(document).ready(function($) {
$('.rs-slider2').refineSlide({
transition: 'cubeV',
transitionDuration: 1000,
autoPlay: true,
keyNav: false,
delay: 3000,
controls: null
});
});
</script>
</body>
_______________________________

Toutes mes images sont en class="image-responsive"
A aucun moment dans le code HTML, je n'ai fixé les largeur des images.
Cependant lorsque j'examine le code dans le navigateur, je constate qu'il fixe des styles de largeur d'image
Voir copie écran jointe !!!
Comment procéder pour que ces styles fixés à la volé, ne soient pas mentionné dans le code édité par le navigateur.

Sans ces styles de largeur construit à la volée, mes sliders deviennent parfaitement responsive.

Voir copie écran examen code dans navigateur.

Merci pour votre aide bienvenue

A voir également:

Impossible de rendre sliders responsives
Rendre un fichier moins volumineux - Guide
Rendre une cle usb bootable - Guide
Comment nettoyer son mac pour le rendre plus rapide - Guide
Comment rendre une souris silencieuse ✓ - Forum souris / Touchpad
Rendre une image cliquable html ✓ - Forum Réseaux sociaux

1 réponse

Réponse 1 / 1

SioGabx Messages postés 265 Date d'inscription mardi 21 août 2018 Statut Membre Dernière intervention 17 novembre 2022 100
2 juin 2019 à 11:36

Alors, c'est simple, déjà tu utilise pour ta mise en forme des table alors que c'est obsolète par rapport à ce que l'on as grâce aux flexbox.

Tu as plein d'erreurs dans ton code html ->
https://validator.w3.org/nu/?doc=https%3A%2F%2Fpromosdusines.com%2FEssaisSliderResponsiveDist.html

Pareil dans ton css :
https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fpromosdusines.com%2FEssaisSliderResponsiveDist.html&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=fr

Corrige déjà ça et ça devrait aller.
J'ai pas mon ordinateur sur moi mais sache que ton navigateur à juste essayer de combler les erreurs de ton code.
-
Ce n'est pas si un oiseau à de grandes ailes qu'il vole haut

Discussions similaires

rendre un texte flou plus net

comment rendre un fichier lisible et non duplicable à la fois?

Rendre un téléphone inutilisable et irréparable

Enlever la mention "amies proches" sur une story

Comment donner accès à un Google Form sans compte Gmail

Discussions similaires

Newsletters