Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Barre "gfooter"

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

Résolu Barre "gfooter"

Message par A. Philippe le Dim 7 Jan 2018 - 14:34

Détails techniques

Version du forum : Invision
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Problème apparu depuis : A l'édition du CSS pour modifier la barre "gfooter"  
Lien du forum : https://www.apelbouzonville.com

Description du problème

Bonjour,

Notre petit soucis d'ordre purement visuel concerne la barre "gfooter".

Le visuel de départ était celui-ci :



Pour que cette barre s'intègre mieux à son environnement, j'ai réalisé ceci :



Cependant, nous avons remarqué un bug lors de l'affichage de cette nouvelle "gfooter".
Ce bug n'est visualisable que sur la page "profil membre" et uniquement sur les onglets "Informations" & "Préférences" :



Un bug légèrement différent apparait lors de l'utilisation d'une tablette, probook, etc ... :



Il est évident que le CSS que j'ai mis en place n'est pas correct,
mais toutes mes tentatives pour remédier à ce petit désordre se soldent par un échec !
L'idée de départ était également d'augmenter la taille des polices de cette "gfooter", mais là j'ai carrément renoncé.
Mes tentatives n'étant pas du tout satisfaisantes, je me suis résigné à ne changer que l'aspect visuel du "background".    

Voici le CSS édité ... les Templates n'ont pas été modifiés.

Code:
#gfooter {
        background: url(/*image hébergée*/) no-repeat 0% 0% / 100% 100%;
        margin: 20px 0;
        padding: 10px;
        font-family: Georgia;
        color: #00FFFF;
}

Désolé de vous mettre à nouveau à contribution. Embarassed
Merci pour votre aide.

Excellente fin de weekend à toutes et tous


Dernière édition par A. Philippe le Ven 19 Jan 2018 - 11:21, édité 1 fois
avatar

A. Philippe
Nouveau membre

Masculin
Messages : 21
Inscrit(e) le : 30/11/2017

https://www.apelbouzonville.com
A. Philippe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre "gfooter"

Message par A. Philippe le Mer 10 Jan 2018 - 11:25

Bonjour à toute et tous,

Nous sommes encore en recherche de solution.

Excellente journée
avatar

A. Philippe
Nouveau membre

Masculin
Messages : 21
Inscrit(e) le : 30/11/2017

https://www.apelbouzonville.com
A. Philippe a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre "gfooter"

Message par Miettes le Ven 12 Jan 2018 - 16:26

Coucou Smile

Pour la typo, tu peux essayer ça :
Code:
font-size: 1em;
Logiquement, les "em" adaptent celle-ci au zoom et à l'affichage global de la page Smile

Pour le bug sur le profil, as-tu modifié les templates de cette page ? J'ai mis uniquement la CSS fournie sur un forum de test et la barre s'affiche bien comme il faut Smile

En revanche, pour corriger tes éventuels bug sur petits écran, tu peux utiliser le display flex ( clic ) plutôt que les float Smile l'avantage de cette propriété c'est qu'elle est top pour le design adaptatif Smile
avatar

Miettes
****

Féminin
Messages : 496
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre "gfooter"

Message par A. Philippe le Dim 14 Jan 2018 - 15:02

Bonjour,

Miettes --> Merci pour ton intervention  Wink
- L'insertion CSS du "font-size", en l'état (sans modif des templates) a pour effet d'étendre ce bug à toutes les pages.
- Non, les templates de la page "profil" n'ont pas été modifié, je le fais dans la foulée.

J'ai consulté le lien vers la page suggérée, mais je fais assurément une erreur dans la création
des lignes "flex-item", ça ne fonctionne pas pour l'instant, mais j'y travaille.

Pas facile ces codifications, je ne suis plus tout jeune et mon faible niveau de connaissance es domaine font que je passe des heures
sur des réalisations qui ne doivent certainement prendre que quelques minutes ... mais c'est passionnant et j'y crois  Laughing

Merci pour ces pistes Miettes  Razz

Excellente fin de weekend à toutes et tous  sunny

Ps: Juste pour ma compréhension ...
Ce problème ne serait-il pas lié au fait que la barre "gfooter" contient deux lignes
et que son contenu est réparti justement sur ces deux cellules ?
Est-ce que la fusion des deux serait une bonne piste pour régler ce problème ?
avatar

A. Philippe
Nouveau membre

Masculin
Messages : 21
Inscrit(e) le : 30/11/2017

https://www.apelbouzonville.com
A. Philippe a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Barre "gfooter"

Message par Miettes le Jeu 18 Jan 2018 - 10:41

Coucou Smile

Le display flex est un peu complexe à prendre en main, mais une fois que tu as compris comment ça fonctionnait, c'est juste magique ^^

Voilà le code CSS qui pourrait régler ton problème (et on oublie les float comme ça =) )

Code:
#gfooter > div{
   display: flex;
}

#gfooter form[name="jumpbox"]{
   order: 1;
}

#gfooter .footer-links{
   order: 2;
   width: auto;
}

#gfooter .current-time{
   order: 3;
}
avatar

Miettes
****

Féminin
Messages : 496
Inscrit(e) le : 01/09/2008

http://www.school-of-progress.fr/
Miettes a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Barre "gfooter"

Message par A. Philippe le Ven 19 Jan 2018 - 11:20

Bonjour,

Miettes --> Un simple merci est loin de compenser le temps que tu me fais gagner sur ce petit bug.
De toute évidence je n'y serais pas parvenu seul !

Avec ton apport, cette "gfooter" fonctionne maintenant parfaitement bien et ce sur toutes les pages
et j'ai même pu augmenter la taille du texte comme prévu initialement cheers

Lors de mes tentatives pour régler ce bug, j'ai remplacé l'image du "background" par un code CSS.

Pour les membres intéressé(e)s par cette mise en place :



Le CSS à mettre en place est le suivant :

Code:
#gfooter > div {
  display: flex;
}
#gfooter form[name="jumpbox"] {
  order: 1;
}
#gfooter .footer-links {
  order: 2;
  width: auto;
}
#gfooter .current-time{
  order: 3;
}
#gfooter {
        font-family: Georgia;
   font-size: 15px;
        color: #00ffff;*/
   max-height: 10%;
   max-width: 100% !important;   
   background-color: #303B4A;
     -moz-border-radius: 30px;
   -webkit-border-radius: 30px;
   border-radius: 50px;
   border: 1px solid #FFFF00;
        margin: 20px 0;
   padding: 1%;
}
#gfooter a:hover {
     color: #00ffff !important;
}

Merci encore Miettes Wink

Sujet résolu
avatar

A. Philippe
Nouveau membre

Masculin
Messages : 21
Inscrit(e) le : 30/11/2017

https://www.apelbouzonville.com
A. Philippe 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