Affichage pour le moins curieux....!

2 participants

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

Résolu Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 12:40

Bonjour à vous,

deux bizarreries d'affichage que je soumet ...différent d'un ordi à l'autre... Rolling Eyes

Affichage pour le moins curieux....! Quest510

ci dessus
Sur mon portable Image de fond page 2 photos....? celle de l’extrême droite est la bonne ....(un détail également le corps du Forum n'est pas centré à l'écran ce qui expliquerai ce décalage)

Affichage pour le moins curieux....! Quest610

ci dessus
Sur l'ordi Image de fond de l'en-tête 2 photos.....? celles de droite n'est pas la bonne.... (détail le corps du forum est centré sur l'écran....ce qui expliquerai le décalage sur le fond de l'entête....????)

Question donc...?
Pourquoi un affichage différent d'un ordi à l'autre reflexion
dans chacun des ces deux cas, quel est le problème pour l'un comme pour l'autre... Interrog

Au plaisir de vous lire
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 19:10

Bonsoir,

Vos deux problèmes sont reliés à la résolution d'écran des ordinateurs.

Pour l'affichage de l'image de fond de l'en-tête, insérez ce code dans votre CSS (PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS):
Code:
.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Il empêchera la répétition du fond et l'élargira pour qu'il prenne toute l'en-tête.

Pour votre deuxième problème, je vous invite à lire ce sujet. Wink


Cordialement.


Dernière édition par Dr. Karlos le Dim 26 Fév 2012 - 21:47, édité 2 fois
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 19:18


Merci "Dr Karlos" ....code CSS appliqué...aucune modif sur l'affichage
Vérification faites sur les 2 ordi....."Sorry" Interrog
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 19:35

Essayez plutôt avec ce code:
Code:
.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Si ça ne fonctionne pas, pouvez-vous poster votre CSS personnalisé ici?


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 19:36

Je suis donc le "tuto"
https://forum.forumactif.com/t325386-image-de-fond-changeante-selon-la-resolution-du-visiteur
Je vais donc héberger tous les formats précisés, ensuite faire le CSS comme indiqué...puis le 2ème CSS ...pour aligner votre fond au centre de l'écran

Je reçois ton 2ème message.... donc à suivre...! Wink
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 19:43


Aucun changement avec 2ème CSS....
Qu'entend tu par CSS personnalisé.... tout ce que j'ai en CSS...?
Pour lesquels je te fais une copie sur ce "post"...?
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 19:51

Re,

Avez-vous bien retiré l'ancien CSS. Wink ?

Vous devez copier le contenu se trouvant dans la fenêtre où vous insérez le code CSS que je vous propose.
Affichage pour le moins curieux....! Css10


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 19:59


Je confirme ancien CSS viré....remplacé par le nouveau...
Option sur toutes les pages "coché"

Précision
1er CSS communiqué:
.headerbar {
background-color: #12A3EB;
background-image: url(https://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

2ème CSS :
.headerbar {
background-color: #12A3EB;
background-image: url(https://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Sauf erreur de ma part sont parfaitement identique....!!! Interrog
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 20:24

Re,

Il me semblait avoir inséré un "w" de trop à quelque part. Avez-vous d'autres codes CSS présents avec "headerbar"?


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 21:25

Dr. Karlos a écrit:Re,

Il me semblait avoir inséré un "w" de trop à quelque part. Avez-vous d'autres codes CSS présents avec "headerbar"?
Cordialement.

Non aucun... Wink
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 21:29

Bonsoir,

Essayez avec ce code:
Code:
.headerbar {
background-color: #12A3EB;
background-image: url(http://www.archive-host.com/link/1bfea24ce9acc23ef1c54c888260f551ff248d98.jpg);
background-repeat: repeat-x;
background-size: 100% 100%;
margin-bottom: 4px;
padding: 0 5px;
}

Copiez le code dans l'encadré "CSS".


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 21:34


Merci Dr Karlos .....mais aucun changement...!

suis en train de terminer l'application suite ton tuto....!
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 21:45



Je viens doncd'appliquer le "tuto"
https://forum.forumactif.com/t325386-image-de-fond-changeante-selon-la-resolution-du-visiteur

mis en place .....résultat...aucun changement....! mais....

Un détail : quel image faut-il mettre dans affichage-gestion des images-image de fond de page...
compte tenu des CSS appliquées avec le tuto.....?
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 21:51

Re,

Normalement, l'image présente dans la gestion des images est celle-ci:
https://2img.net/i/fa/empty.gif

Pouvez-vous coller le code ici que vous avez inséré dans la gestion des codes Javascript? Le changement est difficile à voir puisque votre résolution d'écran n'a pas changé. Wink


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 21:55


Le code complet du CSS

$(function(){

var bg= "https://www.archive-host.com/link/adbcf072718483668a9f1b3c129973767a165340.jpg";

if(screen.width < 801) bg="https://www.archive-host.com/link/e350d92357a8680cdf8cc040e871c4f3f91a1630.jpg";
else if(screen.width < 1025) bg="https://www.archive-host.com/link/a17320851dfb4e6d699a0ec5288855af358d5a67.jpg";
else if(screen.width < 1281) bg="https://www.archive-host.com/link/f5536dbd920942f91cb2b5b85a3a638493587767.jpg";
else if(screen.width < 1601) bg="https://www.archive-host.com/link/251cbf3f9a7597e38b0619d795a8a79445d39de6.jpg";

document.body.style.backgroundImage="url(\""+bg+"\")";

});
lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Dim 26 Fév 2012 - 23:27

Bonsoir,

Insérez-vous bien le code CSS (pour l'image d'en-tête) dans votre panneau d'administration comme ceci?
> PA | Affichage | Images et couleurs | Couleurs | Feuille de style CSS
Affichage pour le moins curieux....! Css11

Et votre hébergeur semble faire défaut pour le code Javascript (image changeante), remplacez l'ancien code se trouvant dans votre panneau d'administration comme ceci:
> PA | Modules | Gestion des codes Javascript

Par celui-ci:
Code:
$(function(){

var bg= "http://i47.servimg.com/u/f47/16/57/66/20/fond2011.jpg";

if(screen.width < 801) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond8011.jpg";
else if(screen.width < 1025) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1011.jpg";
else if(screen.width < 1281) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1211.jpg";
else if(screen.width < 1601) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1611.jpg";

document.body.style.backgroundImage="url(\""+bg+"\")";

});

Tentez aussi de vider le cache et les cookies de votre navigateur et d'essayer sous un autre navigateur. Wink


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Dim 26 Fév 2012 - 23:58

Grand Merci à toi oooooh DR Karlos... Humour

aucun problème d'affichage sur l'autre ordi....

quel est le code CSS pour que l'image descende en même temps que la page...
Donc modifier celui actuel avec lequel elle est fixe...!
Spoiler:

par contre sur mon portable résolution 1024 x 768 aucun changement...
affichage identique avant modif du CSS...

Spoiler:

lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par Dr. Karlos Lun 27 Fév 2012 - 0:52

Bonsoir,

Placez ce code dans votre CSS à la suite du code pour votre en-tête (et non la gestion des codes Javascript Wink):
Code:
body{
background-position: top center;
background-repeat: no-repeat;
background-attachment: scroll;
}

Pour le problème avec l'image changeante, remplacez votre code Javascript par celui-ci, comme mentionné dans mon message précédant:
Code:
$(function(){
 
var bg= "http://i47.servimg.com/u/f47/16/57/66/20/fond2011.jpg";
 
if(screen.width < 801) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond8011.jpg";
else if(screen.width < 1025) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1011.jpg";
else if(screen.width < 1281) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1211.jpg";
else if(screen.width < 1601) bg="http://i47.servimg.com/u/f47/16/57/66/20/fond1611.jpg";
 
document.body.style.backgroundImage="url(\""+bg+"\")";
 
});


Cordialement.
Dr. Karlos

Dr. Karlos
Membre actif

Masculin
Messages : 2623
Inscrit(e) le : 03/01/2012

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

Résolu Re: Affichage pour le moins curieux....!

Message par lmc38510 Lun 27 Fév 2012 - 1:01

Grand merci "DR Karlos".....tout est rentré dans l'ordre....! impeccable....!!!!

Je te remercie pour ta compétence, surtout pour ta patience... A force de rentrer des infos pour un débutant...ça fini par "bugger"....il faut le temps de digérer tout cela....
Donc encore :thanks: et Bravo2 t'es un chef... ok

lmc38510

lmc38510
*****

Masculin
Messages : 912
Inscrit(e) le : 22/02/2012

https://newparadigme.forumactif.com/
lmc38510 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