Sujets similaires

Bonjour tout le monde,
J'ai un petit soucis. J'ai utilisé ce tutoriel d'Orange pour créer une fiche de présentation pour mon forum. Je l'ai cependant modifié et aimerais mettre une infobulle sur l'image latérale, soit l'image 200*320; J'ai essayée mais je n'y arrive pas Embarassed

Pourriez-vous m'aider s'il vous plaît ?
Merci d'avance.

Voici donc mon code final :

Code:: <table class="cssactif_pv" cellpadding="10" cellspacing="0" border="0" width="80%"><tr><td align="right" valign="bottom" class="cssactif_pv_header" style="background-image: url(http://img10.hostingpics.net/pics/279002welling_2.png);"> lelia</td><td valign="top"><div class="cssactif_pv_titre"><h1>Pseudo</h1>
Un petit slogan, une petite phrase,un petit truc qui vous plait :) </div><div class="cssactif_pv_content"><em>Prénom</em>: réponse
<em>Date de naissance</em>: réponse ( facultatif)
<em>Profession</em>: réponse
<em>Loisirs</em>: réponse
<em>Vos goûts</em>: réponse
<em>Vos dégoûts</em>: réponse
<em>Parrain* </em>: réponse
<em>Votre pré-avis ?</em>: réponse

[color=red][size=9]* Personne,site ou forum qui vous à fait découvrir le forum[/size][/color]
<div style="font-size: 10px; text-align: center;">cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>

</div></div></div></td></tr></table>

Et le css:

Code:: /* ------------- FICHE PRESENTATION
Créee par Orange de CSSActif (http://www.css-actif.com)
Merci de conserver cette mention par respect ----------- */
.cssactif_pv { /* Fond de la fiche */
background-color: #1D1D1D; /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

}

td.cssactif_pv_header { /* En-tête avec image de fond */
background-repeat: no-repeat; /* Empêche la répétition de l'image du header */
background-position: top center; /* Postionne l'image du header en haut, au center */

width: 200px; /* Donne la largeur de la bannière latérale (Largeur de l'avatar) */
height: 320px; /* Donne la hauteur en px du header, l'image de header devrait être même hauteur ou plus grande (Hauteur de l'avatar) */

border-right: 15px double #921628; /* Bordure côté du header: ÉPAISSEURpx STYLE #COULEUR (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#border-style) */

/* Bordures gauche arrondies (voir: http://border-radius.com/) */
-webkit-border-top-left-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomleft: 20px;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;

text-shadow: 1px 1px 0px #000; /* Ombre du texte */
font-size: 10px; /* Taille du texte: TAILLEpx */
}

div.cssactif_pv_titre h1 { /* Titre prénoms & nom */

font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */

font-size: 32px; /* Taille du texte: TAILLEpx */

text-shadow: 1px 1px 0px #000; /* Ombre du texte */

color: #d51731; /* Couleur du texte */

margin: 0; /* Supprime la marge par défaut de l'élément h1 */

text-align: right; /* Aligne le titre à droite */
text-transform: uppercase; /* Met le titre en majuscules */

}

div.cssactif_pv_titre { /* Titre + feat */
/* Positionne le titre "à cheval" sur la bordure */
position: relative;
top: -28px;

text-align: right; /* Aligne le texte à droite */

padding-right: 20px; /* Défifine une marge interne */
color: #CCCCCC; /* Couleur du feat */
}

.cssactif_pv h2 { /* Sous-titres "Identité", "Opinions" etc. */
background-color: #111111; /* Couleur du fond des sous-titres */
border-color: #6a0e1b; /* Couleur de la bordure */
border-width: 1px 0px; /* Taille de la bordure: HAUT & BAS GAUCHE & DROITE */
border-style: solid; /* Style de la bordure */

-webkit-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 3px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */

text-align: center; /* Aligne le titre au centre */
text-transform: uppercase; /* Met le titre en majuscules */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #921628; /* Couleur du titre */
margin: 0; /* Supprimer marge */
font-size: 20px; /* TAILLE DU TEXTE: TAILLEpx */
font-weight: normal; /*Épaisseur du texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
letter-spacing: 5px; /* Espacement des caractères */

}

.cssactif_pv_content { /* Contenu */
padding: 10px; /* Marge interne */
text-align: justify; /* Justifie le texte */
text-shadow: 1px 1px 0px #000; /*Ombre du texte */
}

.cssactif_pv em { /* Libellés */
font-family: Georgia, "Times New Roman", Times, serif; /*Police du titre (voir: http://www.css-actif.com/t66-css-cours-elementaire-1-le-groupement#forme_caracteres) */
color: #921628; /* Couleur du titre */
font-style: normal;
text-transform: uppercase;

}

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
display: inline-block; /*Place les icones un à côté de l'autre */
margin: 10px; /* marge entre les icones */
border: 1px solid #333; /* bordure des icones */

-webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle img {
height: 50px;
width: 50px;
}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;

width: 300px; /* Largeur de l'infobulle */

top: 50px; /* on positionne notre infobulle */
left: 0px;

background-color: #1D1D1D; /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */

-webkit-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 10px 0px #000000; /* Ombre de la fiche (voir http://css3generator.com/ choix "Box-shadow") */
border-left: 6px double #921628;
padding: 10px; /* marge interne de l'infobulle */
}
/* ------------- FIN FICHE présentation */

Bonjour !

Pour commencer, qu'as-tu essayé pour créer ton infobulle ? Que doit-elle contenir ? As tu tenté d'adapter les tutoriels de CSSActif au cas qui se présente ?

Hello overwhelming !
Ton sujet est-il toujours d'actualité ?
Si nous n'avons pas de réponse dans 3 jours, le problème sera considéré comme résolu et archivé.
Merci de ta compréhension. Smile

Oui désolé du retard, je n'avais pas vu la réponse;
Donc, l'infobulle en question doit contenir du texte.
j'ai essayé de mettre l'infobulle sur l'avatar de cette manière : Je sais bien evidemment que c'est faux, mais ce qui me dérange c'est le fait que l'image soit en " background-image" et du coup je ne sais pas ou plaçé ma

Code:: <table class="cssactif_pv" cellpadding="10" cellspacing="0" border="0" width="80%"><tr><td align="right" valign="bottom" class="cssactif_pv_header" style="background-image: <div class="infobulles">url(http://img10.hostingpics.net/pics/279002welling_2.png)</div>;"> lelia</td><td valign="top"><div class="cssactif_pv_titre"><h1>Pseudo</h1>
Un petit slogan, une petite phrase,un petit truc qui vous plait :) </div><div class="cssactif_pv_content"><em>Prénom</em>: réponse
<em>Date de naissance</em>: réponse ( facultatif)
<em>Profession</em>: réponse
<em>Loisirs</em>: réponse
<em>Vos goûts</em>: réponse
<em>Vos dégoûts</em>: réponse
<em>Parrain* </em>: réponse
<em>Votre pré-avis ?</em>: réponse

[color=red][size=9]* Personne,site ou forum qui vous à fait découvrir le forum[/size][/color]
<div style="font-size: 10px; text-align: center;">cette fiche a été codée par Orange de <a href="http://www.css-actif.com">CSSActif</a></div>

</div></div></div></td></tr></table>

Hello,

Alors déjà, ça :

Code:: style="background-image: <div class="infobulles">url(http://img10.hostingpics.net/pics/279002welling_2.png)</div>;"

Ce n'est pas possible. On ne met pas de HTML dans du CSS. Jamais.

Ensuite il serait judicieux de procéder différemment. Sers toi des tutoriels disponibles sur CSS actif pour faire apparaitre une infobulle sur une image seule, en dehors de toute structure existante.

Quand tu auras réussi cette première étape, tu pourras passer à l'intégration dans le code existant. Inutile de vouloir tout faire en même temps, tu n'arriveras à rien u_u'

D'accord, désolé Razz

Et merci de t'attarder sur mon cas Infobulle sur " fiche pv avec banniere laterale" - RESOLU 2176505670

Alors si j'ai compris pour le html, c'est comme ça ? :

Code:: <div class="infobulle">
<img src="http://img11.hostingpics.net/pics/212036322.png" />
<div>
CONTENU DE L'INFOBULLE
</div>
</div>

et mon css:

Code:: /* infobulle */

div.infobulle {
position: relative;
cursor:pointer; /*donne au curseur la forme de petite main, comme sur un lien*/
display: inline-block; /*Place les icones un à côté de l'autre */
margin: 10px; /* marge entre les icones */
border: 1px solid #333; /* bordure des icones */

-webkit-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
-moz-box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */
box-shadow: 0px 0px 5px 0px #000000; /* Ombre de l'icone (voir http://css3generator.com/ choix "Box-shadow") */

}

div.infobulle div{
display: none; /* ceci masque l'infobulle */
}
div.infobulle:hover {
background: none; /* correction d'un bug IE */
z-index: 500; /* on définit une valeur pour l'ordre d'affichage */

}
div.infobulle:hover div{
display: block; /* ceci affiche l'infobulle */
position: absolute;

width: 200px; /* Largeur de l'infobulle */

top: 50px; /* on positionne notre infobulle */
left: 0px;

background-color: #1D1D1D; /* Couleur de fond */

-webkit-border-radius: 20px; /* Bordures arrondies (voir: http://border-radius.com/) */
-moz-border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-radius: 20px;/* Bordures arrondies (voir: http://border-radius.com/) */
border-left: 6px double #921628;
padding: 10px; /* marge interne de l'infobulle */
}

/* fin infobulle */