Infobulle POSTER_RPG

[kahlanou]

Bonjour !

je reviens vous voir pour en apprendre un peu plus sur les propriétés HTL/CSS permettant de personnaliser un champ de profil appelé par le template... Voici la page de mon forum avec accès pour voir l'avancement.

Forum de test

En passant le curseur, vous voyez que la fiche de personnage s'affiche sans soucis MAIS (oui y'a toujours un mais!) je souhaiterais pouvoir diviser "Identité du personnage" des autres fonctions POSTER_RPG.

J'aimerais que Identité du personnage soit centré en haut et le reste (Moral, classe, nom) soit centré en bas. En quelque sorte, je vous demande s'il est possible de séparer (comme des <br>) le POSTER_RPG...

Je vous remercie.

Voici mon template et mon CSS.

*EDIT*

[Scoubifitz]

bonjour,

peut-être en rajoutant des marges en haut et en bas de "identité du personnage" ...
(30 en haut , 60 en bas)

Code:

.infobulle_avatar em strong{display:block;margin:30px 0 60px;}

[kahlanou]

Hélas.. rien ne change ...

[Scoubifitz]

 

petite leçon sur les marges ...

margin: 10px = les 4 cotés prennent 10px

margin: 10px 20px = le haut+bas prend 10px , le Gauche+Droite 20px

margin: 10px 0 30px = le haut prend 10px , Gauche+Droite 0px , le bas 30px

margin: 10px 20px 30px 40px = le haut prend 10px , la Droite 20px , le bas 30px , et la gauche 40px

on peut aussi ne choisir qu'un seul coté :

margin-top :10px
margin-right :10px
margin-bottom :10px
margin-left :10px

[kahlanou]

Je sais bien mais je vous assure que cela ne marche pas.. ^^

Je cherche à séparer le "Feuille de personnage" (que l'on voit DANS l'infobulle) avec sa suite directe qui est " Prénom".
C'est ici que je souhaiterais mettre " l'espace".

[Scoubifitz]

on teste avec le hover en plus ?

Code:

.infobulle_avatar:hover em strong{display:block;margin:30px 0 60px;}

édit :

voilà ce que je vois :



Re- édit : peut-on avoir un screen de ce que vous voyez ?

[kahlanou]

Je ne comprends pas, ça ne me fait rien du tout ...
J'ai copier/coller votre code tel quel pourtant.  

[Scoubifitz]

 je ne vois pas le code dans votre CSS ...

Voilà ce que je vois quand je rajoute le code :



en plus je ne vois pas: "Feuille de personnage" et " Prénom".

[kahlanou]

Forcément, je travaille sur le forum final.  

Je viens d'insérer votre code sur le forum de test donc, et toujours rien.
Rien n'a changé.

Voici mon CSS ...

Code:

div.infobulle_avatar em {
display:none;
}

div.infobulle_avatar:hover {
background: none;
z-index: 999;
cursor: hand;
position: relative;
text-decoration:none;
border: 0;
}
div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 11px; /*taille de la police*/
color:#dbd8d8 !important; /*couleur de la police*/
text-align:justify;
padding: 1px;
display:block;
position: absolute;
-moz-border-radius: 5px; /* bord arrondis*/
-webkit-border-radius: 5px; /* bord arrondis*/
border-radius: 5px; /* bord arrondis*/
background:url(http://image.noelshack.com/fichiers/2013/39/1379941218-1379923339-1ff4c810.jpg); /*couleur de fond de l'infobulle*/
border: 0px solid #ffffff; /*taille et couleur de la bordure de l'infobulle*/
height:228px;
width:148px; /*largeur de l'infobulle*/
  top: 4px; /*infobulle à 100px du haut*/
  left:6px; }

.infobulle_avatar:hover em strong{display:block;margin:30px 0 60px;}

[Scoubifitz]

pourtant , maintenant je vois un grand vide entre "feuille de personnage ......" et "Moral"

peut on voir le forum final ? une page ouverte aux invités ? (sous hide , si ça dérange trop)

[kahlanou]

Eh bien je dois vous dire que je ne vois rien du tout sous firefox.. ><"

http://cercle-azphel.forum-pro.fr/

[Scoubifitz]

voilà ce que je vois :



un rafraichissement de la page ou un vidage de cache à faire ?

[kahlanou]

Rien à faire, f5 / ctrl+r / supprimer cookies forum ne me font rien voir du tout ...  

EDIT 2 : Enfin... est-ce un bug quelconque ? Parce que je ne peux pas voir les changements ni savoir si je peux décaler mon texte vers la droite,  



EDIT : Je parais peut-être m'égarer mais est-il possible d'avoir + de 3 champs dans l'infobulle visible ? ( Sur la feuille de personnage en gestion des champs il me dit ne montre que 3 "X" de visible malgré tous les champs ajoutés.. )

[Scoubifitz]

c'est la fatigue ?

.infobulle_avatar:hover em strong{display:block;margin:30px 10 60px;}

seul le zéro est admis sans unité de mesure ...

pourquoi ne pas mettre un "text-align:center;" à la place de "text-align:justify;" ?

[kahlanou]

Parce que le center décale le texte..
Ah.. pour le 10 je pensais que ça ferait le margin vers la droite héhé...

[Scoubifitz]

on peut décaler le "em" ...

remplacez par ceci (padding, width , left changés) :

Code:

div.infobulle_avatar:hover em {
font-style: normal; /*écriture de la police*/
font-size: 11px; /*taille de la police*/
color:#dbd8d8 !important; /*couleur de la police*/
text-align:justify;
padding: 1px 1px 1px 15px; /* marge exterieure a gauche */
display:block;
position: absolute;
-moz-border-radius: 5px; /* bord arrondis*/
-webkit-border-radius: 5px; /* bord arrondis*/
border-radius: 5px; /* bord arrondis*/
background:url(http://image.noelshack.com/fichiers/2013/39/1379941218-1379923339-1ff4c810.jpg); /*couleur de fond de l'infobulle*/
border: 0px solid #ffffff; /*taille et couleur de la bordure de l'infobulle*/
height:228px;
width:133px; /* largeur de l'infobulle 148 - 15 (padding a gauche) */
top: 4px; /*infobulle à 100px du haut*/
left:4px; }

[kahlanou]

Ah c'est super ! C'est exactement à ce pixel près que je souhaitais le "centrer" !  

Et pour votre code finalement.. Vous pensez que le blocage d'affichage vient d'où ? Car tout ceux du forum ne le voit pas, ce décalage.

[Scoubifitz]

placez ceci à la suite , sans le modifier pour le moment :

Code:

.infobulle_avatar:hover em strong{display:block;margin:35px 0 50px;}

[kahlanou]

C'est placé.
(Aucune modification de visible...)

[Scoubifitz]

http://cercle-azphel.forum-pro.fr/

je vois ceci sur tous les avatars :

[kahlanou]

Je ne peux rien régler, car je ne vois rien du tout ...

Serait-il possible que vous puissiez me mettre "Feuille de personnage" Tout en haut juste au dessus de la sphère au front et le "nom-race-classe" entre les deux flammes ?

Si possible... Je suis désolée ...  

[Scoubifitz]

comme ça ?

Code:

.infobulle_avatar:hover em strong{display:block;margin:-10px 0 130px;}
.infobulle_avatar:hover em span{margin-left:25px;}

[kahlanou]

Ah c'est super !!
Merci à vous !

Et désolé pour le dérangement...
Seulement je veux comprendre pourquoi je ne peux pas voir comme vous, j'ai pourtant la dernière mise à jours de FF et une amie sous chrome ne voit pas également.. étrange...


EDIT du jour: Je vois le décalage pour centrer entre les flammes mais je ne vois pas le décalage vers le bas.. bizarre.

[Scoubifitz]

tout est ok ! ^^

j'ai le même résultat d'affichage sur firefox 24.0 , Internet explorer 10 , Google chrome 29 et Safari ...

[kahlanou]

Je vais vérifier si mon firefox est à jour alors ... Rah ! >.<

En tout cas, le sujet initial est résolu !
Merci à toi Scoubi'.