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

Image dans le header non responsive sous AwesomeBB

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

Image dans le header non responsive sous AwesomeBB Empty Image dans le header non responsive sous AwesomeBB

Message par Yody le Mer 4 Déc 2019 - 5:23

Bonjour,

je viens de migrer mon tout nouveau forum sous AwesomeBB parce qu'AwesomeBB est responsive.

Je ne réussis pas à placer mon image dans le header de façon à ce qu'on la voit comme il faut. Le responsive c'est pire. Je viens de passer pas mal de temps à tester les balises css que je connais.

Code:
/*image dans le header--------------------------------------------------------------------------------------------------*/
#header-banner {
   background-color: #a1ecfd;
 background-image: url(https://i.servimg.com/u/f28/20/13/11/06/header12.png);             /*2000x350px*/
   width: 100%;                                                                             /*non responsive mais parfait sur desktop*/
  
}
/*description header banner transparent, garde le recensement actif-----------------------------------------------------*/
#header-banner > div > h2 {
   opacity: 0 !important;
}



L'image est gigantesque sur un cellulaire et elle déborde sur desktop.
J'ai fait tous les essais possibles mais je suis à l'écoute de vos suggestions pour rendre l'image correct ET responsive.
Elle semble un peu fluide mais ça s'arrête là.

Merci à l'avance
Voici l'adresse de mon forum, je sais, c'est coloré, Smile

Si ma question n'est pas clair, ça va me faire plaisir de répondre à vos questions pour trouver l'erreur.
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Surricate le Mer 4 Déc 2019 - 10:20

Bonjour, vous pouvez modifier le css comme ceci :

Code:
 #header-banner {background-color: #ededed;
height: 500px!important;
background-image:url('https://i.servimg.com/u/f28/20/13/11/06/header12.png');
background-size:auto,100%;
background-position: center;
}
 

Vous pouvez augmenter ou réduire la hauteur en modifiant la valeur du height.
Surricate

Surricate
*****

Messages : 670
Inscrit(e) le : 01/12/2017

http://capforum.forumactif.com/
Surricate a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Yody le Mer 4 Déc 2019 - 12:01

Bonjour Surricate,

J'ai utilisé votre code et sur desktop, il fonctionne très bien sur Opera, Chrome et Edge.

Mais sur mon cellulaire, il ne fonctionne pas ni sur Opera ni sur Chrome. J'ai nettoyé l'historique et rien n'y fait.

Si vous ou quelqu'un avez des pistes de recherche pour rendre le header responsive, je suis preneur.
Merci pour votre message
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Yody le Mer 4 Déc 2019 - 13:19

Bon, j'ai modifié le code de @Surricate comme ceci et ça fonctionne sur ordinateur de bureau et c'est responsive.
La hauteur de la bannière est parfaite sur bureau mais sur mobile ce n'est pas tout à fait ça, mais c'est acceptable.
J'ai testé pour les différents mobiles dans Les Outils du Développeur et ça passe pour les mobiles.

Aussi, j'ai deux écrans et lorsque "j'étire" la fenêtre de mon navigateur sur les deux écrans, le bas de l'image disparaît.
Est-ce normal?
Mes écrans: 1920x1080 et 1920x1200.
Je m'inquiète que sur des écrans à plus hautes résolutions ça ne passe pas bien.

Code:
/*image dans le header fonctionne sur desktop et sur mobile. Sur mobile c'est pas parfait mais ça fonctionne-----*/
#header-banner {
 background-color: #a1ecfd;
 /*height: 350px;*/
 background-image: url('https://i.servimg.com/u/f28/20/13/11/06/header12.png');
 background-size: /*auto,*/ 100%;
 background-position: center;
}

En gardant height à 350px et background-size à auto, l'image débordait. C'est la raison pour laquelle j'ai retiré.
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Yody le Mer 4 Déc 2019 - 17:18

Rebonjour,

Le code est stable, il n'y a eut aucune mauvaise surprise.

Il y a juste un détail c'est lorsque j'étire la fenêtre de mon navigateur sur deux écrans et bien l'image disparaît progressivement.

Si quelqu'un ayant un écran haute résolution passe par ici, pourrait-il (ou elle) tester sur son écran si ça fonctionne bien?
Merci.
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Yody le Jeu 5 Déc 2019 - 2:19

Et bien, d'insérer une image pour qu'elle soit responsive, dans le header avec AwesomeBB, c'est pas rigolo. 
J'ai pris la décision de ne pas en mettre. J'ai essayé plusieurs méthodes et plusieurs code css pour le faire sans résultat efficace.

Un jour peut-être que cela deviendra facile, les programmeurs devraient nous donner une méthode simple pour y parvenir. 
Le problème n'est pas résolu mais je baisse les bras, la fatigue sûrement. 
Une pause s'impose.
@+
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Chacha le Jeu 5 Déc 2019 - 9:58

Message par Yody Hier à 12:01
Message par Yody Hier à 13:19
Message par Yody Hier à 17:18
Message par Yody Aujourd'hui à 2:19


Bonjour,

Warning Merci d'éviter les double-posts en moins de 24h, (ici un quadruple-post !), pensez à cliquer sur le bouton :editer: dans votre dernier message pour y ajouter une information.

Je vous invite à lire :
Cordialement.
Chacha

Chacha
Modéractif
Modéractif

Masculin
Messages : 61835
Inscrit(e) le : 21/08/2010

https://forum.forumactif.com/
Chacha a été remercié(e) par l'auteur de ce sujet.

Image dans le header non responsive sous AwesomeBB Empty Re: Image dans le header non responsive sous AwesomeBB

Message par Yody le Ven 6 Déc 2019 - 18:33

Alors voilà, je vais mettre un terme à ma requête mais je ne peux mettre résolu car nous ne trouvons pas de solution.
Je laisse aux soins des modérateurs la tâche de classer mon sujet.
Merci d'avoir tenté de résoudre le mystère.

À la prochaine
Yody

Yody
Nouveau membre

Masculin
Messages : 22
Inscrit(e) le : 21/11/2019

http://la-maison.forumactif.com/
Yody 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