Adapter le header a toutes les résolutions d'écrans.

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

Résolu Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Jeu 12 Avr 2012 - 21:53

Bonjour,

Etant donné que mon header est très grand, certains membres ne voient pas en entier. Ce n'est pourtant pas mon cas. Si je prends un header plus petit, il ne fait pas la taille complète de l'écran.

J'ai entendu parler d'un code permettant d'adapter le header à toutes les résolutions d'écran. Quelqu'un pourrait il me le communiquer s'il vous plait ?

Merci.


Dernière édition par Gwelallyn le Ven 13 Avr 2012 - 19:50, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Rezzert le Jeu 12 Avr 2012 - 21:56

Bonsoir Gwelallyn,
je pense que tu cherches ce code là : http://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur

Cordialement,
Rezzert.

Rezzert
****

Masculin
Messages : 200
Inscrit(e) le : 13/11/2010

http://sinners.wowjdr.com
Rezzert a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Ven 13 Avr 2012 - 5:51

@Rezzert a écrit:Bonsoir Gwelallyn,
je pense que tu cherches ce code là : http://forum.forumactif.com/t286701-image-de-fond-changeante-selon-la-resolution-du-visiteur

Cordialement,
Rezzert.

Bonjour,

Le problème avec ce code là c'est qu'il faut plusieurs images et je n'en ai qu'une qui fait 1500px de largeur.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Rezzert le Ven 13 Avr 2012 - 11:15

Il vous suffit juste de redimmensionner votre image pour chaque dimmension.

Rezzert
****

Masculin
Messages : 200
Inscrit(e) le : 13/11/2010

http://sinners.wowjdr.com
Rezzert a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Ven 13 Avr 2012 - 11:52

Ok, j'essaierai dans l'après-midi.
Je vous tiendrais au courant. Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Manumanu le Ven 13 Avr 2012 - 17:03

Le problème de cette solution, c'est qu'il faut prévoir une image par largeur d'écran possible, ce qui en fait une tripotée ; c'est donc plutôt contraignant.

Tu peux simplement ajouter à ton header la propriété background-size, si tu sais comment faire (sinon, poste le lien vers le forum, je te dirais)
Un exemple :
Code:
body { background-size: cover }

C'est à toi de voir quelle solution tu préfères. Wink


Dernière édition par Manumanu le Ven 13 Avr 2012 - 17:19, édité 1 fois

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Ven 13 Avr 2012 - 17:05

@Manumanu a écrit:Le problème de cette solution, c'est qu'il faut prévoir une image par largeur d'écran possible, ce qui en fait une tripotée ; c'est donc plutôt contraignant.

Tu peux simplement ajouter à ton header la propriété background-size avec la valeur cover, si tu sais comment faire (sinon, poste le lien vers le forum, je te dirais)
Un exemple :
Code:
body { background-size: cover }

C'est à toi de voir quelle solution tu préfères. Wink
Coucou,
Alors c'est plusieurs forums, dont un où le design est en préparation donc il n'est que sur un forum test pour l'instant.

Les voici :
http://volate-ascendere.harrypotterrpg.fr/
http://artsport.forumgratuit.org/
http://test-gwelallyn.forumgratuit.org/

Merci Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Manumanu le Ven 13 Avr 2012 - 17:35

Mmh, c'est un poil plus compliqué que ce que j'avais imaginé, avec cette configuration.

Bon, alors voilà :
Code:
@media screen and (max-width:1995px)
{
   body { background-size: 100% auto }
}

Dans chaque cas, remplace la valeur de max-width par la largeur originale de ton image, et soustrait environs 5 pixel (histoire d'avoir une marge).


Le soucis, dans les deux cas de figure (solution javascript ou CSS), c'est que si on réduit la largeur de la bannière, il faut réduire proportionnellement la hauteur (ce qui est fait avec background-size), pour ne pas déformer l'image. Mais la distance entre la bannière et le haut du forum ne changera pas...

Il n'y a pas de réelle solution optimale, si ce n'est de prévoir des header qui ne véhiculent pas d'informations (une simple décoration), ou qui les véhiculent bien au centre sur une largeur maximale de 960px en moyenne.
Ou bien, utilisant cette technique, de faire des header de hauteur égale, mais en resserrant les éléments vers le centre à chaque fois, et de les changer en fonction de la taille, avec une méthode ou une autre.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Ven 13 Avr 2012 - 18:36

Merci Smile
J'essaie ça, et je demande à ma co-admin qui elle le voit mal à sa résolution si ça fonctionne. Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Manumanu le Ven 13 Avr 2012 - 18:55

Ok, j'attends de voir. Smile

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Invité le Ven 13 Avr 2012 - 19:30

Visiblement ça fonctionne Smile
Merci beaucoup. Smile

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Adapter le header a toutes les résolutions d'écrans.

Message par Manumanu le Ven 13 Avr 2012 - 19:31

Je t'en prie.

Manumanu
****

Masculin
Messages : 437
Inscrit(e) le : 27/12/2011

http://helpinghelps-phpbb2.forumgratuit.org/
Manumanu 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