5549 sujets

Sémantique web et HTML

Bonjour,

J'ai voulu faire apparaître une image différente et plus grande dans un tooltip au passage de la souris sur une autre image plus petite.

J'ai réussit sauf que parfois la 1ère image (la petite donc) ne s'affiche pas du tout donc ma méthode ne doit pas être la bonne.

Voici ce que j'ai fait :

HTML :
<a href="" class="tooltip><img src="images/1.png" class="img-fluid" alt="1"><span><img src="images/2.png" class="img-fluid" alt="2"></span></a>

CSS :
.tooltip {
    text-decoration:none;
    position:relative;
}

.tooltip span {
    display:none;
}

.tooltip span img {
    float:left;
    margin:0px 8px 8px 0;
}

.tooltip:hover span {
    display:block;
    position:absolute;
    bottom:0;
    right:25%;
    z-index:1000;
    width:auto;
    max-width:650px;
    min-height:545px;
    overflow:hidden;
    padding-bottom: 20px;
}

J'ai d'ailleurs remarqué un autre problème qui doit être lié :
Parfois mon CSS ne se charge pas correctement (je le voit à la largeur de mes "cases" et à la police) et dans ces cas là l'image du problème ci-dessus s'affiche bien, mais quand le CSS se charge bien alors il y a le problème ci-dessus.

Voici mes CSS complets (bien sûr le site utilise les versions minifiées) :
https://static.breat.fr/css/theme-clair.css
https://static.breat.fr/css/theme-sombre.css (celui par défaut)

Si quelqu'un pouvait m'éclairer ça serait sympa.
Modifié par _laurent (02 Feb 2021 - 09:06)
Bonjour,
Peux-tu coloriser le code ?

Dans l'HTML, après "tooltip", tu as oublié les guillemets fermants : ".

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution.
J'ai essayé de le coloriser mais sans succès Smiley decu même après avoir désactivé tous les bloqueurs de pub etc.

Erreur de recopie (en supprimant les liens réels) car dans le vrai code il y est mais ça aurait pu être ça effectivement.

Je précise que la 1ère image fait 20x20px et l'autre fait 600x545px.
Modifié par Breat (01 Feb 2021 - 18:39)
Serait-il peut-être possible d'avoir le lien du site pour le constater ?

--------------------------------------------------------------------------------------------------
Quand vous avez trouvé votre réponse, cochez "Résolu" et indiquez la meilleure solution
Bien sûr. : https://breat.fr

C'est TOUT en bas la dernière phrase au milieu.

A moins que le problème vienne de mes navigateurs (Opera GX et Edge) je test toujours sur les 2.
Oui enfin ça c'est la fin de la phrase, l'autre bout est a la ligne du dessus quand ça ne fonctionne pas, et tout est sur la même ligne quand ça fonctionne comme c'est sensé le faire Smiley smile
Modifié par Breat (01 Feb 2021 - 19:09)
Modérateur
Bonjour,

La classe .tooltip (qui s'applique au lien qui ne marche pas) a une "opacity" de 0 (ce qui veut dire complètement transparent). Il faut lui mettre une "opacity" qui permette de voir quelque chose, par exemple 1. C'est pour ça qu'on ne voit pas l'image contenue dans le lien.

Amicalement,

Note : sans vouloir te faire de peine, il y a beaucoup d'autres choses à corriger dans cette page. Il faudrait sans doute tout reprendre de zéro.
Meilleure solution
Modérateur
Et l'eau,

Je viens d'ouvrir et finalement de supprimer mon sujet à propos des petits problèmes de l'édition des posts. Videz votre cache et tout devrait revenir à la normal.
@parsimonhi N'ayant pas mi moi même l'opacity (dans mon CSS perso) je n'avait pas pensé à Boostrap qui pouvait l'avoir ainsi que le display:block ce qui provoquait le retour à la ligne.

J'ai pu le corriger du coup merci en mettant opacity à 100% et un display:inline.

Par contre maintenant il n'y a plus l'autre image au passage de la souris Smiley decu

De plus j'aimerai si possible dans changer la taille du texte faire en sorte que le texte soit aligner de sorte qu'il tombe au milieu de l'image et non en haut, ainsi que l'image affichée au passage (quand ça refonctionnera xD) soit alignée en bas comme avant mais centrée.

Çà ne me fait pas de peine, j'en suis conscient c'est pourquoi je modifie petit à petit.

@niuxe D'accord merci ce sera plus clair effectivement avec la mise en forme des syntaxes.
Modifié par Breat (03 Feb 2021 - 21:20)