IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Mise en page CSS Discussion :

Positionner au même endroit les infobulles


Sujet :

Positionnement en CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 14
    Par défaut Positionner au même endroit les infobulles
    Bonjour, bonsoir !

    Je viens vers vous car après plusieurs recherches, je ne trouve pas la solution. Elle est peut être toute simple mais après plusieurs tests sans succès, je me tourne vers vous afin que vous puissiez m'aider.

    Je sais que le problème a déjà été posé mais je n'ai pas trouvé de réponses concrètes et je vous remercie d'avance pour votre aide.
    Donc, comme l'indique le titre, j'aimerai que les différentes infobulles qui s'affiche au survol de mes images s'affichent au même endroit.

    J'ai pris un CSS déjà fait trouvé sur le net, j'ai juste modifié le look de l'infobulle, il me faut juste réussir à les placer

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    * 
    {
    	font-size: 11px; /* On définit les propriétés de texte pour toutes les balises. */
    	font-family: Tahoma, Verdana, Arial, serif;
    }
    a.info {
    	position: absolute;
    }
    a.info span {
    	display: none; /* On masque l'infobulle. */
    }
    a.info:hover {
    	background: none; /* Correction d'un bug d'Internet Explorer. */
    	z-index: 500; /* On définit une valeur pour l'ordre d'affichage. */
     
    	cursor: help; /* On change le curseur par défaut par un curseur d'aide. */
    }
    a.info:hover span {
    	display: inline; /* On affiche l'infobulle. */
    	position: absolute;
     
    	white-space: nowrap; /* On change la valeur de la propriété white-space pour qu'il n'y ait pas de retour à la ligne non désiré. */
     
    	top: 0px; /* On positionne notre infobulle. */
    	left: 0px;
     
    	background: white;
     
    	color: black;
    	padding: 1px;
     
    	border: 2px solid black;
    	border-left: 1px solid black;
    }
    Quand à mes images, elles sont simplement sous cette forme, placés un peu partout sur mon site :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="foyer">
    <a href="#" class="info"><img src="images/foyer.png" alt="foyer"/><span>Foyer</span></a>
    </div>
    J'imagine que c'est une histoire de placement en fonction des positions relative ou absolues mais j'avoue m’emmêler un peu les pinceaux.

    Merci encore

  2. #2
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Juin 2012
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Essonne (Île de France)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Juin 2012
    Messages : 14
    Par défaut
    En fait, j'ai trouvé ... C'était VRAIMENT tout con.
    Suffit de mettre la position "fixed" au span de l'infobulle ...

    Désolé du dérangement !

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Positionner au même endroit, plusieurs infobulles différentes
    Par astrodynamics dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 25/10/2008, 14h19
  2. Affecter les infobulles
    Par AbyssoS dans le forum Balisage (X)HTML et validation W3C
    Réponses: 5
    Dernier message: 04/04/2006, 20h43
  3. balise DIV tjs au même endroit
    Par badboy7 dans le forum Balisage (X)HTML et validation W3C
    Réponses: 7
    Dernier message: 15/06/2005, 22h40
  4. Réponses: 6
    Dernier message: 15/06/2004, 10h26

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo