28172 sujets

CSS et mise en forme, CSS3

Bonjour,
Récemment sous le navigateur google chrome (19.0.1084.52 m) apparaît :
A l’intérieur de mon header : un cadre blanc (plus ou moins transparent). Cela ressemble à une ombre décalée...
Dans le corps du contenu : une ligne blanche à droite de la bordure gauche.
Le plus simple est de voir la copie d'écran:
upload/44914-linkinjet.png
Ce problème est apparu récemment et n'existe pas sur IE, safari, etc.
J'ai cherché longtemps d'ou pouvait provenir ce problème sans résultat.
L'url du site en question : http://www.linkinjet.com
Merci pour votre aide Smiley cligne
Modifié par matzig (31 May 2012 - 00:40)
Bonjour,

Chose étrange, ça semble être sur l'image. Après inspection, ça ne vient pas du css : en ouvrant l'image dans l'onglet ressources du chrome dev tool, ces bordures blanches sont également présentes.. Est-il possible que dans ton image source il y ait le moindre élément qui puisse causer ça ?
Sous firefox, cette bordure existe aussi, elle est presque invisible, mais présente lorsqu'on ne zoome pas.

Au passage, je ne sais pas si ca a quelque chose a voir, mais il y a une erreur dans ta balise body, il faut aussi que tu mettes le ses " dans le commentaire.
Modérateur
Bonjour.

J'ai sauvé l'image du header, et ouverte sous photoshop pour voir ce qui se passait, et oh stupeur, voici ce que je découvre:
upload/32231-capture-je.png
Des guides! Mais qu'est-ce que ça vient faire dans ce jpeg. Utiliser "Enregistrer pour le web" évitera l'inclusion de ces éléments indésirables et réduira drastiquement le poid par la même occasion.
Naemesis a écrit :
Sous firefox, cette bordure existe aussi, elle est presque invisible, mais présente lorsqu'on ne zoome pas.
Au passage, je ne sais pas si ca a quelque chose a voir, mais il y a une erreur dans ta balise body, il faut aussi que tu mettes le ses " dans le commentaire.


Hello,
Ok je corrige le code.
Le problème persiste mais c'est plus propre comme ça.
Merci pour l'info.
Modifié par matzig (31 May 2012 - 14:26)
kustolovic a écrit :
Bonjour.
J'ai sauvé l'image du header, et ouverte sous photoshop pour voir ce qui se passait, et oh stupeur, voici ce que je découvre:
upload/32231-capture-je.png
Des guides! Mais qu'est-ce que ça vient faire dans ce jpeg. Utiliser "Enregistrer pour le web" évitera l'inclusion de ces éléments indésirables et réduira drastiquement le poid par la même occasion.


Bonjour,

Pour le header :
Effectivement quand j'ouvre bg-header.jpg dans Photoshop il y a les repères d'affichés et cela correspond, à priori, aux traces/bordures blanches que l'on voient s'afficher.

Pour le corps :
Quand j'ouvre le jpg dans Photoshop. Il n'y a pas de repères ou pour être plus précis il en existe mais ils ne sont pas affichés (affichage extra n'est pas coché)

Pour ces 2 fichiers j'ai supprimé dans les psd sources les repères et ré-enregistré les deux fichiers en jpg. Cela ne change rien pourtant en ouvrant les les fichiers générés dans Photoshop les repères n'existe plus !!!
J'ai utilisé aussi la méthode "enregistrer pour le web" de Photoshop : Cela ne change rien non plus.

Ce qui est étrange c'est qu'en sauvegardant ces 2 fichiers en png (et en modifiant le css pour appeler les 2 png au lieu des jpg) le problème disparaît.
http://www.linkinjet.com/

Le problème vient apparemment bien des jpg... qui n'ont pourtant plus l'air d'avoir de repères !

Pour contourner le problème j'utilise maintenant les png mais j'aimerais bien comprendre pourquoi les jpg génères ces bordures "parasites" blanche Smiley cligne

Si besoin j'ai laissé les jpg ré-enregistré au format web (donc normalement sans repères) :
http://www.linkinjet.com/images/bg-header.jpg
http://www.linkinjet.com/images/bg-main.jpg

Mille mercis
Modérateur
Les images données, vu leur taille, on peu de chances d'avoir été "enregistrées pour le web". Lorsque je fais "enregistrer pour le web", Les lignes blanches disparaissent bien sur le web. Au passage, tu peux supprimer les métadonnées lors de l'enregistrement.
kustolovic a écrit :
Les images données, vu leur taille, on peu de chances d'avoir été "enregistrées pour le web". Lorsque je fais "enregistrer pour le web", Les lignes blanches disparaissent bien sur le web. Au passage, tu peux supprimer les métadonnées lors de l'enregistrement.


Hello,
Encore merci pour tes informations mais je ne pige pas tout apparemment !
Sous Photoshop CS5 :
- J'ouvre mon fichier psd
- Je ne vois pas de repères (ils sont détruits)
- Je fais Fichier > Enregistrer pour le web et autres périphériques
- Je selectionne la/les tranches
- Mes paramètres sont à JPG - Qualité 100 - Progressif (d'ou le poids)
- Métadonnées : sans
Quand j'ouvre le jpg généré dans Photoshop (ou via une visionneuse d'images) il n'y a pas de lignes visibles et pourtant elles existent quand je l'affiche via google chrome !
Il y a qqchose que j'oublie ? Quelle est la bonne méthode ?
Thanks
Modifié par matzig (14 Jun 2012 - 15:19)