Infobulle POSTER_RPG

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 10:28

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*


Dernière édition par kahlanou le Mar 24 Sep 2013 - 14:33, édité 2 fois

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 15:50

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;}

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 15:58

Hélas.. rien ne change ...

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 16:13

Very Happy 

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

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 16:39

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".

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 16:45

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 ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 17:01

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

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 17:17

scratch 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".

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 17:30

Forcément, je travaille sur le forum final. Assomé 

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;}

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 17:41

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)

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 17:43

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

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

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 17:48

voilà ce que je vois :



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

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 17:51

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

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, Mad 



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.. )

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 18:17

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;" ?

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 18:23

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

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 18:49

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; }

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 20:14

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

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.

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 20:26

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

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

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 21:09

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

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 21:30

@kahlanou a écrit:http://cercle-azphel.forum-pro.fr/
je vois ceci sur tous les avatars :




Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 21:49

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 ... Confused 

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Lun 23 Sep 2013 - 23:14

comme ça ?




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

Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Lun 23 Sep 2013 - 23:53

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.

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Infobulle POSTER_RPG

Message par Scoubifitz le Mar 24 Sep 2013 - 14:05

tout est ok ! ^^

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


Scoubifitz
+ Hyperactif +

Masculin
Messages : 3539
Inscrit(e) le : 18/03/2008

http://scoubidous.superforum.fr/
Scoubifitz a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Infobulle POSTER_RPG

Message par kahlanou le Mar 24 Sep 2013 - 14:29

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

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

kahlanou
****

Féminin
Messages : 207
Inscrit(e) le : 01/02/2009

http://cercleaz.forumactif.org/
kahlanou a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum