Impossible d ajouter un lien sur une image avec boostrap
Fermé
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
-
Modifié le 16 janv. 2021 à 00:01
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 17 janv. 2021 à 07:56
flexi2202 Messages postés 3795 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 21 avril 2024 - 17 janv. 2021 à 07:56
A voir également:
- Impossible d ajouter un lien sur une image avec boostrap
- Verifier un lien - Guide
- Lien url - Guide
- Créer un lien pour partager des photos - Guide
- Ajouter un compte gmail - Guide
- Image iso - Guide
7 réponses
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
16 janv. 2021 à 00:01
16 janv. 2021 à 00:01
Bonjour
Bonjour,
Dans le titre de ta question, tu as marqué impossible d'ajouter un lien.... Pourquoi ne pourrais-tu pas ajouter un lien ?
Ensuite dans la description de ton soucis tu sembles indiquer un problème d'affichage avec un espace qui se mettrait entre le titre et le lien contenant l'image.... Je pense qu'une capture d'écran montrant le souci et une autre montrant le résultat souhaité seraient les bienvenues...
Après, il est clair que Internet explorer a toujours posé des problèmes de compatibilité au niveau des CSS...
à partir de edge les soucis sont moindres voir inexistant mais pour les versions antérieures il faut toujours ajouter un peu de CSS supplémentaire pour pallier les soucis.
.
Bonjour,
Dans le titre de ta question, tu as marqué impossible d'ajouter un lien.... Pourquoi ne pourrais-tu pas ajouter un lien ?
Ensuite dans la description de ton soucis tu sembles indiquer un problème d'affichage avec un espace qui se mettrait entre le titre et le lien contenant l'image.... Je pense qu'une capture d'écran montrant le souci et une autre montrant le résultat souhaité seraient les bienvenues...
Après, il est clair que Internet explorer a toujours posé des problèmes de compatibilité au niveau des CSS...
à partir de edge les soucis sont moindres voir inexistant mais pour les versions antérieures il faut toujours ajouter un peu de CSS supplémentaire pour pallier les soucis.
.
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
16 janv. 2021 à 00:10
16 janv. 2021 à 00:10
bonjour Jordane
Merci de ton aide
oui c est vrai que ma question est peut être mal posée
je sais aussi qu avec internet explorer il y a des soucis
en effet j ai un soucis d affichage avec un espace entre mon image et mon titre
mais chose bizarre lorsque j utilise les images de l exemple que j ai trouve sur codepen cela fonctionne
donc voici ce que je désire avec mes images , j en essaye un paquet avec certaines cela passe avec d autre pas
et voici ce que j ai
Merci de ton aide
oui c est vrai que ma question est peut être mal posée
je sais aussi qu avec internet explorer il y a des soucis
en effet j ai un soucis d affichage avec un espace entre mon image et mon titre
mais chose bizarre lorsque j utilise les images de l exemple que j ai trouve sur codepen cela fonctionne
donc voici ce que je désire avec mes images , j en essaye un paquet avec certaines cela passe avec d autre pas
et voici ce que j ai
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
16 janv. 2021 à 00:15
16 janv. 2021 à 00:15
Donc avec exactement le même code tu as des soucis uniquement en fonction de la taille des images ?
Ajoute ce css dans ta page ( après le css de bootstrap)
Ajoute ce css dans ta page ( après le css de bootstrap)
.card { flex:1 0 100% ; } img { flex-shrink:0; }
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
16 janv. 2021 à 00:19
16 janv. 2021 à 00:19
merci pour l aide oui exactement
je viens de faire un essai en hébergeant mes images en ligne
le soucis est pareil
je viens d essayer le code rien ne change
je viens de faire un essai en hébergeant mes images en ligne
le soucis est pareil
je viens d essayer le code rien ne change
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
16 janv. 2021 à 00:33
16 janv. 2021 à 00:33
Sans avoir le code complet de ta page impossible de te dire ce qui ne va pas.
à la limite, vu que tu sembles héberger son site sur un serveur, donne-nous le lien pour accéder à la page en question
à la limite, vu que tu sembles héberger son site sur un serveur, donne-nous le lien pour accéder à la page en question
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
16 janv. 2021 à 00:21
16 janv. 2021 à 00:21
en complément d information des que j introduis un lien herf cela ne fonctionne plus
jordane45
Messages postés
38145
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
25 avril 2024
4 650
16 janv. 2021 à 00:33
16 janv. 2021 à 00:33
Ça ne fonctionne plus.... C'est-à-dire ??
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
16 janv. 2021 à 07:58
16 janv. 2021 à 07:58
bonjour Jordane
lorsque je réalise la card juste avec des images cela s affiche correctement sur tous les navigateurs
mais des que je rends l image cliquable , afin que lorsque on clique dessus cela renvoie un autre onglet le titre se décale vers le bas mais uniquement avec internet explorer et pas avec toutes les images
voici le lien de l essai
merci de l aide
https://peche-a-la-perle.000webhostapp.com/site-peche/BOOSTRAP/bootstrap-4.5.3-examples/TEST/index.html
lorsque je réalise la card juste avec des images cela s affiche correctement sur tous les navigateurs
mais des que je rends l image cliquable , afin que lorsque on clique dessus cela renvoie un autre onglet le titre se décale vers le bas mais uniquement avec internet explorer et pas avec toutes les images
voici le lien de l essai
merci de l aide
https://peche-a-la-perle.000webhostapp.com/site-peche/BOOSTRAP/bootstrap-4.5.3-examples/TEST/index.html
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
Modifié le 16 janv. 2021 à 09:36
Modifié le 16 janv. 2021 à 09:36
je viens d essayer en remplaçant le code de la card par celui trouve sur le site de boostrap
il fonctionne
donc avec ce morceau de code
mais ensuite je dois avoir un soucis avec le responsive car internet explorer a agrandit le cadre quand la fenetre du navigateur est au minimum
voici ce que j ai
en plein écran et c est nickel
lorsque je réduis de moitie toujours nickel
et lorsque je suis au minimum il y a de nouveau un trop grand espace
voici le code css
il fonctionne
donc avec ce morceau de code
<div class="card" style="width: 18rem;"> <img src="..." class="card-img-top" alt="..."> <div class="card-body"> <h5 class="card-title">Card with stretched link</h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a href="#" class="btn btn-primary stretched-link">Go somewhere</a> </div> </div>
mais ensuite je dois avoir un soucis avec le responsive car internet explorer a agrandit le cadre quand la fenetre du navigateur est au minimum
voici ce que j ai
en plein écran et c est nickel
lorsque je réduis de moitie toujours nickel
et lorsque je suis au minimum il y a de nouveau un trop grand espace
voici le code css
body { padding-top: 20px; } .card-deck { margin: 0 -15px; justify-content: space-between; } .card-deck .card { margin: 0 0 1rem; } @media (min-width: 576px) and (max-width: 767.98px) { .card-deck .card { -ms-flex: 0 0 48.7%; flex: 0 0 48.7%; } } @media (min-width: 768px) and (max-width: 991.98px) { .card-deck .card { -ms-flex: 0 0 32%; flex: 0 0 32%; } } @media (min-width: 992px) { .card-deck .card { -ms-flex: 0 0 24%; flex: 0 0 24%; } }
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
16 janv. 2021 à 22:23
16 janv. 2021 à 22:23
bonsoir
un petit up
merci
un petit up
merci
flexi2202
Messages postés
3795
Date d'inscription
lundi 14 mars 2011
Statut
Membre
Dernière intervention
21 avril 2024
187
17 janv. 2021 à 07:56
17 janv. 2021 à 07:56
bonjour
soucis regle cela est du a la taille des images
je devais ajouter un height sur les images
soucis regle cela est du a la taille des images
je devais ajouter un height sur les images