Barre "gfooter"

[Invité]

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.
Merci pour votre aide.

Excellente fin de weekend à toutes et tous

[Invité]

Bonjour à toute et tous,

Nous sommes encore en recherche de solution.

Excellente journée

[Miettes]

Coucou

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

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

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

[Invité]

Bonjour,

Miettes --> Merci pour ton intervention  
- 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  

Merci pour ces pistes Miettes  

Excellente fin de weekend à toutes et tous  

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 ?

[Miettes]

Coucou

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

[Invité]

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

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

Sujet