Petit + pour la page d'acceuil
2 participants
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1 • Partagez
Petit + pour la page d'acceuil
Bonjour, voila j'aimerais savoir comment c'est possible de faire comme ce forum ? http://coin-pub.actifforum.com/t37210-wonderland-graphics Lorsque vous passez le curseur sur un avatar ou icone cela fait apparet un petite fenetre avec le descriptif de la personne. Ou que que la luminositer change. |
Dernière édition par lovebeatrizluengo le Dim 20 Fév 2011 - 20:23, édité 1 fois
Re: Petit + pour la page d'acceuil
Il s'agit d'une infobulle
je te cherche le message je l'ai demandé il n'y a pas longtemps
https://forum.forumactif.com/t296218-explication-d-un-css-pour-cree-une-infobulle
Sinon cherche "comment créer une infobulle" beaucoup de monde le demande je suis sure que tu peux trouver ton bonheur
je te cherche le message je l'ai demandé il n'y a pas longtemps
https://forum.forumactif.com/t296218-explication-d-un-css-pour-cree-une-infobulle
Sinon cherche "comment créer une infobulle" beaucoup de monde le demande je suis sure que tu peux trouver ton bonheur
Re: Petit + pour la page d'acceuil
Il faut que je mettent le script la:
- Code:
.infobulle{
position: relative;
z-index: 0;}
.infobulle:hover{
background-color: transparent;
z-index: 50;}
.infobulle span{
position: absolute;
background-color: #000000;
padding: 5px;
left: -1000px;
visibility: hidden;
color: #FFFFFF;}
.infobulle span img{
border: 2px;
padding: 5px;}
.infobulle:hover span{
visibility: visible;
top: 70px;
left: 35px;
width: 200px ;
color:#FF0000;
border: 2px solid #0000FF;}
Re: Petit + pour la page d'acceuil
Il faut ajouter ceci....
<div class="infobulle">IMAGE<div>CONTENU DE L INFOBULLE></div></div>
Que voulez vous exactement? Ceci serait pour votre page d'accueil?
<div class="infobulle">IMAGE<div>CONTENU DE L INFOBULLE></div></div>
Que voulez vous exactement? Ceci serait pour votre page d'accueil?
Dernière édition par Lunathiel le Jeu 17 Fév 2011 - 17:29, édité 1 fois
Re: Petit + pour la page d'acceuil
Il me faudrait quelques info en plus et je vous réalise ça
- Pourrais-je avoir une image (sur laquelle on passera la souris pour voir apparaitre l'infobulle)
- Voulez vous une seconde image dans la "petite fenêtre" qui s'ouvrira?
- Voulez vous des coins arrondis?
- Quel couleur souhaiteriez vous?
J'ai déjà créer ceci
Pour votre page d'acceuil
et le css associé
Dites moi ce que vous voulez changer...
- Pourrais-je avoir une image (sur laquelle on passera la souris pour voir apparaitre l'infobulle)
- Voulez vous une seconde image dans la "petite fenêtre" qui s'ouvrira?
- Voulez vous des coins arrondis?
- Quel couleur souhaiteriez vous?
J'ai déjà créer ceci
Pour votre page d'acceuil
- Code:
<table>
<tr><td><div class="infobulle">
<img src="http://img254.imageshack.us/img254/5703/ghgh.png">
<span>
<img src="http://img254.imageshack.us/img254/5703/ghgh.png"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
</tr>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE"><br />
NOM DU MEMBRE DU STAFF<br />
RANG DANS LE STAFF<br />
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td></tr>
</table>
et le css associé
- Code:
/*--------Infobulle------------*/
div.infobulle {
position: relative;
background-color: #FFF; /*COULEUR DE FOND*/
color: black; /*COULEUR DE TEXTE*/
border: 2px solid #000; /*TAILLE DE BORDURE ET COULEUR*/
width:100px;
height:100px;
}
div.infobulle span {
display: none;
}
div.infobulle:hover {
background: none;
z-index: 999;
}
div.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 5px;
left: 15px;
background-color: #FFF; /*COULEUR DE FOND*/
color: black; /*COULEUR DE TEXTE*/
padding: 2.5px;
text-align: center;
border: 2px solid #000; /*TAILLE DE BORDURE ET COULEUR*/
}
Dites moi ce que vous voulez changer...
Dernière édition par Lunathiel le Jeu 17 Fév 2011 - 18:01, édité 1 fois
Re: Petit + pour la page d'acceuil
Ben je veut le meme type que mon forum il faut que sa soit moi qui face l image ??
Re: Petit + pour la page d'acceuil
Il faut que vous ayez sous la main les images que vous souhaitez mettre... ou tout du moins leurs liens... Je peux vous aidez mais il me faut un maximum d'information...
Pourrais-je voir le forum où vous voulez mettre ceci
Pourrais-je voir le forum où vous voulez mettre ceci
Re: Petit + pour la page d'acceuil
J'ai réalisé ceci sur mon forum test
Qu'en dites vous??? (la couleur du lien"profil" ainsi que la couleur d'opacité s'adaptera avec la couleur de votre forum)
Cela vous plait que dois-je changer ou ajouter???
http://flyforum.forumactif.com/
Qu'en dites vous??? (la couleur du lien"profil" ainsi que la couleur d'opacité s'adaptera avec la couleur de votre forum)
Cela vous plait que dois-je changer ou ajouter???
http://flyforum.forumactif.com/
Re: Petit + pour la page d'acceuil
ca ma l air bien mais quand je passe la souris dessus la petite fenetre est couper par le cadre
Re: Petit + pour la page d'acceuil
Par le cadre? Quel cadre??? Le fond c'est juste une question de taille regarde
Ici je l'ai fait volontairement plus large...
Ici je l'ai fait volontairement plus large...
Re: Petit + pour la page d'acceuil
Non mais la l infobulle je ne la voi pas, elle est cacher
Re: Petit + pour la page d'acceuil
Tu utilises quel navigateur? Firefox, chrome, explorer???
Re: Petit + pour la page d'acceuil
Écoutez je vais vous donnez mon code tel quel.. Le seul problème c'est qu'il ne fonctionne pas sous internet explorer... Il faudra revoir ce code par quelqu'un d'autre pour le faire fonctionner sous ce navigateur.
Sous firefox (que je vous conseille grandement) il fonctionne parfaitement.
N'ayant encore jamais fait réellement de code sous internet explorer je ne saurais pas vous aidez plus (c'est pas faute d'avoir essayé)
Voila pour votre page d'accueil
et pour votre css
Et voila en image ce que ça donne, je rappelle que l'opacité verte, le fond et le lien s'harmonisera avec la couleur de votre forum
et au passage de la souris
Sous firefox (que je vous conseille grandement) il fonctionne parfaitement.
N'ayant encore jamais fait réellement de code sous internet explorer je ne saurais pas vous aidez plus (c'est pas faute d'avoir essayé)
Voila pour votre page d'accueil
- Code:
<table>
<tr><td><div class="infobulle">
<img src="http://r27.imgfast.net/users/2711/32/60/41/avatars/1-84.jpg">
<span>
<img src="http://r27.imgfast.net/users/2711/32/60/41/avatars/1-84.jpg">
MissYuna
ADMIN
<a href="http://culturemanga.forums-actifs.com/u1" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="http://i79.servimg.com/u/f79/14/59/60/98/corali10.png">
<span>
<img src="http://i79.servimg.com/u/f79/14/59/60/98/corali10.png">
Coralie
CO-ADMIN
<a href="http://culturemanga.forums-actifs.com/u3" target="_blank">Profil</a>
</span></div></td>
</tr>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE">
NOM DU MEMBRE DU STAFF
RANG DANS LE STAFF
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
<td><div class="infobulle">
<img src="VOTRE IMAGE">
<span>
<img src="VOTRE SECONDE IMAGE">
NOM DU MEMBRE DU STAFF
RANG DANS LE STAFF
<a href="LIEN DU PROFIL" target="_blank">Profil</a>
</span></div></td>
</tr>
</table>
et pour votre css
- Code:
/*--------Infobulle------------*/
div.infobulle {
position: relative;
background-color: #7a7585; /*COULEUR DE FOND*/
color: black; /*COULEUR DE TEXTE*/
border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding:10px;
-khtml-opacity:.8;
-moz-opacity:.8;
filter:alpha(opacity=80);
opacity:.8;
}
div.infobulle span {
display: none;
}
div.infobulle:hover {
background:none;
background-color: #7a7585; /*COULEUR DE FOND*/
z-index: 999;
border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding:10px;
-khtml-opacity:1;
-moz-opacity:1;
filter:alpha(opacity=100);
opacity:1;
}
div.infobulle:hover span {
display: inline;
position: absolute;
white-space: nowrap;
top: 50px;
left: 55px;
background-color: #7a7585; /*COULEUR DE FOND*/
color: #101333; /*COULEUR DE TEXTE*/
font-size:14px;
font-weight:normal;
text-shadow: #000 2px 2px 2px;
padding: 3px;
text-align: center;
border: 3px solid #fed3b1; /*TAILLE DE BORDURE ET COULEUR*/
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
padding:10px;
}
Et voila en image ce que ça donne, je rappelle que l'opacité verte, le fond et le lien s'harmonisera avec la couleur de votre forum
et au passage de la souris
Re: Petit + pour la page d'acceuil
Je suis sous esplorer!
Merci beaucoup !!!
Merci beaucoup !!!
Sujets similaires
» comment creer des cathegorie sur la page dacceuil
» Un petit bouton UP pour remonter la page en haut !
» Petit soucis de largeur de page
» Petit problème de fond de page
» Aller à la page : 1, 2 ...Trop petit
» Un petit bouton UP pour remonter la page en haut !
» Petit soucis de largeur de page
» Petit problème de fond de page
» Aller à la page : 1, 2 ...Trop petit
Forum gratuit : Le forum des forums actifs :: Entraide & Support... :: Gérer l'apparence de son forum :: Archives des problèmes avec l'apparence du forum
Page 1 sur 1
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum