Champs de profil qui ne s'affichent que sur le premier post mais pas sur les suivants

[Kumquat]

Détails techniques

Version du forum : ModernBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Capture d'écran du problème : voir plus bas
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum :

Description du problème

Bonsoir !

Je rencontre une difficulté dans la personnalisation de mes champs de profil, dans l'intérieur d'un sujet.

J'ai inséré un système d'onglets.

Il n'y a pas de souci de ce côté-là, mais du coup, comme je souhaitais déplacer certains champs uniquement, j'ai renseigné la position "absolute" pour les détacher du corps. Le souci qui se pose est... que tout est bien positionné comme il faut sur le premier post, mais ces fameux champs disparaissent comme par magie sur les posts suivants...

Voici le CSS que j'ai rentré concernant l'un des champs concernés, par exemple :

Code:


.field_multicomptes { background-color: var(--fond-image); border: 1px solid var(--sous-fond); width: 190px; height: 100px; overflow: auto; position: absolute; left: 260; right: 0; bottom: -1178;  }

En fait, les fameux champs n'apparaissent qu'une seule fois sur la page. Je ne comprends pas du tout... J'avoue sécher un peu.

Auriez-vous une petite astuce pour régler ce souci et garder ma position en absolute (qui est la seule me permettant de "quitter" le corps de mon profil et donc empêcher certains champs de fonctionner avec le système en onglets), à moins qu'il en existe une autre me permettant d'arriver au même résultant sans provoquer la disparition soudaine de mes champs ?

En vous remerciant par avance et en vous souhaitant une bonne journée !  

PS :

Voici quelques images du problème :

Le profil qui apparait avec mon premier post où tout va très bien :

Spoiler:

Le profil sur les posts d'après où les champs positionnés en "absolute" disparaissent mystérieusement :

Spoiler:

[Toryudo]

Bonjour !
Alors, je vous le dis tout de suite, pour l'instant, ça ne va pas !
Le code actuel ne fonctionnera que sur certaines résolutions, et pas toutes, notamment la mienne... voici mon rendu :



Quand vous décidez de mettre en élément en position: absolute, vous le positionnez absolument par rapport à la page. Vous pensez que le cadre multicompte apparait bien pour le premier post, je vous affirme déjà que non : le cadre multicompte du premier post et du deuxième post apparaissent au même endroit absolu de la page, et le second se trouve par-dessus le premier. Vous voyez donc le cadre du second post !

Si vous voulez placer un élément en position: absolue, et que vous ne voulez pas qu'il soit placé absolument par rapport à la page mais par rapport à un post (ou aux informations du profil), alors il faut indiquer qu'il doit être positionné absolument par rapport à cet élément... et pour faire ça, on note que cet élément doit être en position: relative;

Je pense que vous pouvez mettre ce position: relative; sur le .post_userinfo par exemple.

Code:

.post_userinfo {
  position: relative;
}

Maintenant, automatiquement, tous les .field_multicomptes seront en position: absolute par rapport à ce .post_userinfo, plus par rapport à la page.
Ne reste plus qu'à ajuster le positionnement de ces .field_multicomptes par rapport à la position du .post_userinfo, ce qui donnerait par exemple ceci (attention, dans un positionnement, ça n'a pas de sens de mettre à la fois left et right, c'est soit l'un soit l'autre, même chose pour top et bottom):

Code:

.field_multicomptes {
  background-color: var(--fond-image);
  border: 1px solid var(--sous-fond);
  width: 190px;
  height: 100px;
  overflow: auto;
  position: absolute;
  top: 414px;
  left: 0;
}

Et là, on est bien propre pour tous les posts !

[Kumquat]

Bonsoir Toryudo !

Oh là là, merci beaucoup ! Je n'avais pas remarqué que le code était initialement défectueux comme il s'affichait relativement bien sur ma page      Vous m'avez sauvée (et appris quelque chose   )

Ça marche nickel avec votre astuce, je suis vraiment contente, merci beaucoup pour vos explications surtout. Je ne savais pas qu'il fallait nécessairement "lier" un objet en position absolute par un autre en relative. Je le saurais à l'avenir

J'ai refait le deuxième champ sur les pronoms en le repositionnant du coup, en effaçant les choses superflues, il apparaît maintenant parfaitement sur les deux posts comme pour le multicomptes. C'est parfait, vraiment, merci beaucoup !!

J'aurais juste une petite question, par rapport à la ligne des champs de contact qui se trouve sur le côté, celle-ci est en relative du coup, mais j'ai l'impression qu'il y a quelque chose qui fait comme un "blocage" car tant que les champs de contacts se trouvent à proximité, la souris ne reconnaît pas ce qui se trouve à côté. Là, par exemple, la souris ne reconnaît pas l'intérieur du champ "multicomptes" à cause de la présence des champs de contact. Est-ce qu'il existe une technique ou je dois obligatoirement la bouger d'endroit (et donc ne plus l'avoir sur le côté parce que ça clochera autant en haut qu'en bas ) pour que rien n'entre en conflit avec ? Je ne sais pas si je suis très claire dans mes explications, désolée

Je vous mets une image :

Spoiler:

Et le CSS des fameux champs de contact :

Code:

.profil_contact { margin: 5px; position: relative; left: -80; right: 0; bottom: 100;  }
.profil_contact a {  text-shadow: 1px 1px 1px var(--ombre); border: 1px solid var(--border-ligne); background-color: var(--fond-image); width: 60px; height: auto; text-transform: uppercase; font-family: 'Big Caslon'; font-size: 9px; letter-spacing: -1px; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; padding: 2px 6px; display: block; margin: 5px; }
.profil_contact a:hover {  background-color: var(--fond-credit);  border: 1px solid var(--border-pop); -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; -webkit-border-top-right-radius: 0px; -webkit-border-bottom-right-radius: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; }
.profil_contact img { height: 25px; width: 25px; }

Encore merci et d'avance merci pour cette dernière petite précision sur les champs de contact

[Toryudo]

Bonjour !
Je vais vous faire faire des maths / de la géométrie (non).
Quand on inspecte les éléments, voilà ce qu'on peut voir sur les champs contacts :



Le rectangle bleu, c'est l'espace que prend .profil_contact, et on peut voir qu'il empiète sur le bas des informations + le cadre multicompte.
Vous pouvez penser que ce n'est pas visible donc que ce n'est pas là... mais si, il faut imager qu'il y a un cadre transparent par dessus les zones susmentionnées (qui correspond à la zone bleue de ma capture d'écran). Tout ça pour dire que quand on commence à afficher des éléments avec des position: relative ou des position: absolute, on va pouvoir demander au navigateur lequel doit être devant ou derrière... gestion de la profondeur, le fameux axe z.

Et qui dit axe z dit propriété z-index.
Plus la valeur est grande, plus l'élément sera positionné par-dessus un autre, devant.
Si on veut que les informations + le cadre multicompte soient par-dessus le .profil_contact, on va mettre par exemple z-index: 2;

Code:

.post_userinfo {
  position: relative;
  z-index: 2;
}

Et à partir de là, on peut sélectionner le texte sans problème !

[Kumquat]

Bonjour !

Merci énormément pour toutes ces explications Je vois plus clair maintenant.

Tout marche à la perfection, mon problème est donc résolu grâce à vous !

Je l'indique comme

Encore merci et une bonne journée