Pas d'affichage jpeg

[iBulldog]

Salut

j'ai téléchargé un kit graphique gratuit avec une feuille CSS

J'ai modifié, entre autre, une image qui était au départ un .gif

Je n'avais pas une bonne qualité alors je l'ai remplacé par mon logo en .jpeg mais celui-ci ne veux pas s'enregistrer.

Y aurait il une restricition dans la CSS ?

D'où cela pourrait il venir ?

merci

[karnabal]

Salut,

Peux-tu décrire plus précisément l'opération que tu as réalisée ?

As-tu bien changé le nom du fichier (dont l'extension) dans ton code ? Si tu veux, poste-le.

[Fanou]

La première chose à faire est de vérifier si c'est ton document HTML qui appelle cette image ou ta feuille de style (un p'tit Ctrl + F suffit)...

Ensuite, il te suffit de modifier le nom du fichier original par ta nouvelle image...

[iBulldog]

Quand j'ai mis mon logo au format .gif, il l'a pris sans problème et quand je l'ai mis en .jpeg, il me met une croix rouge et rien ne s'affiche

Voici la CSS :

html {
overflow : auto;
      }
body {
margin : 0;
padding : 0;
text-align : center;
background : #333333 url(background.gif) repeat;
color : #ffffff;
font-family : Arial, Verdana, serif;
font-size : 12px;
overflow : visible;
      }

/* +++++ LAYOUT +++++ */

#pagewidth {
width : 800px;
text-align : left;
margin-left : auto;
margin-right : auto;
      }
#maincol {
background-color : #ffffff;
color : #8f8f8f;
float : right;
display : inline;
position : relative;
width : 100%;
height : 440px;
border : 10px solid #2e2e2e;
      }
#box {
position : absolute;
display : inline;
text-align : center;
padding-left : 7px;
padding-top : 7px;
padding-bottom : 7px;
padding-right: 235px;
      }
#rightbox {
display : inline;
position : relative;
float : right;
margin-left : 62.5%;
text-align : left;
      }

/* +++++ HEADER +++++ */

#header {
position : relative;
height : 120px;
background-color : inherit;
width : 100%;
text-align : left;
color : #525252;
      }
#headerfoot {
position : absolute;
bottom : 1px;
background-color : inherit;
width : 100%;
text-align : center;
color : #bcbcbc;
text-transform : none;
font-size : 12px;
letter-spacing : 0;
font-weight : lighter;
padding-top : 0;
padding-right : 0;
padding-left : 0;
padding-bottom : 4px;
margin : 0;
      }
#headerfoot a {
color : #bcbcbc;
background-color : inherit;
text-decoration : none;
background : url(cross.gif);
background-repeat : no-repeat;
background-position : -1px 3px;
padding-left : 10px;
padding-right : 30px;
font-size : 13px;
text-transform : uppercase;
font-weight : bold;
letter-spacing : -1px;
border-bottom : 5px solid #808080;
      }
#headerfoot a:hover {
background-color : inherit;
background : url(cross.gif);
background-repeat : no-repeat;
background-position : -1px 3px;
color : #ffffff;
border-bottom : 5px solid #a1a1a1;
      }
.headerright {
float : right;
padding-bottom : 10px;
      }
.headerleft {
float : left;
      }
.headerwhite {
background-color : inherit;
color : #ffffff;
font-size : 17px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : normal;
border-bottom : 5px solid #3c3c3c;
      }
.headerred {
background-color : inherit;
color : #ff0000;
font-size : 17px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : normal;
border-bottom : 5px solid #3c3c3c;
      }

/* +++++ FOOTER +++++ */

#footer {
background-color : inherit;
clear : both;
width : 100%;
text-align : left;
color : #ffffff;
text-transform : none;
font-size : 12px;
letter-spacing : 0;
font-weight : lighter;
padding-left : 0;
padding-right : 0;
padding-top : 0;
padding-bottom : 4px;
margin : 0;
      }
.footerwhite {
background-color : inherit;
color : #ffffff;
font-size : 11px;
text-transform : none;
letter-spacing : 0;
font-weight : bold;
      }
.footerred {
background-color : inherit;
color : #ff0000;
font-size : 12px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : bold;
padding-right : 4px;
      }
#footer p {
color : #525252;
background-color : inherit;
padding-left : 0;
font-size : 9px;
padding-top : 20px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : lighter;
      }
#footer a.footerlink {
color : #bcbcbc;
background : inherit;
text-decoration : none;
background : url(cross.gif);
background-repeat : no-repeat;
background-position : -1px 3px;
padding-left : 10px;
padding-right : 4px;
font-size : 12px;
text-transform : uppercase;
font-weight : bold;
letter-spacing : 0;
      }
#footer a:hover.footerlink {
background-color : inherit;
background : url(cross.gif);
background-repeat : no-repeat;
background-position : -1px 3px;
color : #ffffff;
      }
#footer a {
color : #525252;
text-decoration : none;
background-color : inherit;
padding-left : 0;
padding-right : 4px;
font-size : 9px;
text-transform : uppercase;
font-weight : lighter;
letter-spacing : 0;
      }
#footer img
{
padding : 0px;
border : 0px;
}
#footer img.left {
float : left;
margin : -10px 12px 5px 0;
      }

/* +++++ LEFT CONTENT +++++ */

#content {
position : relative;
float : left;
width : 100%;
text-align : left;
background-color : #fafafa;
height : 427px;
overflow : auto;
font-size : 12px;
font-weight : lighter;
color : #8f8f8f;
direction : ltr;
padding-right : 5px;
      }

/* +++++ RIGHT CONTENT +++++ */

#rightcolumn {
position : absolute;
float : right;
text-align : left;
background-color : #ffffff;
color : #bfbfbf;
width: 219px;
padding-left: 8px;
      }
#logo {
background : #4f4f4f;
padding-left : 10px;
padding-top : 15px;
padding-bottom : 0;
padding-right : 10px;
margin-bottom : 30px;
text-transform : uppercase;
color : #bfbfbf;
font-size : 13px;
letter-spacing : -1px;
      }
.logowhite {
background-color : inherit;
color : #ffffff;
font-size : 30px;
text-transform : lowercase;
letter-spacing : 0;
font-weight : bold;
      }
.logored {
background-color : inherit;
color : #ee0101;
font-size : 30px;
text-transform : lowercase;
letter-spacing : 0;
font-weight : bold;
      }
.smallred {
background-color : inherit;
color : #ee0101;
font-size : 13px;
text-transform : uppercase;
line-height : 25px;
letter-spacing : -1px;
      }
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
      }
.clearfix {
display : inline-table;
      }
html .clearfix {
height : 1%;
      }
.clearfix {
display : block;
      }

/* +++++ MENU +++++ */
.menu {
border : 0;
background-color : inherit;
color : #ee0101;
      }
.menu ul {
padding : 0;
margin : 0;
list-style-type : none;
      }
.menu a {
background-color : inherit;
font-weight : normal;
font-size : 14px;
font-family : Arial, Verdana, serif;
padding : 4px 13px;
display : block;
width : 88.5%;
color : #acacac;
text-decoration : none;
border-bottom : 0;
text-transform : uppercase;
letter-spacing : -0.5px;
      }
.menu a:hover {
background-color : #e1312d;
color : #ffffff;
text-decoration : none;
background : url(link.gif) repeat;
      }

/* +++++ STYLES +++++ */

p {
background-color : inherit;
color : #8f8f8f;
padding-left : 25px;
      }
h1 {
padding-left : 10px;
padding-top : 12px;
color : #ee0101;
background-color : inherit;
font-size : 21px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : lighter;
      }
h2 {
padding-left : 10px;
padding-top : 12px;
color : #ee0101;
background-color : inherit;
font-size : 17px;
text-transform : uppercase;
letter-spacing : 0;
font-weight : lighter;
      }
a {
background-color : inherit;
color : #db0202;
text-decoration : none;
      }
a:hover {
background-color : inherit;
color : #808080;
text-decoration : underline;
      }

/* +++++ IMAGES +++++ */

a img {
border : none;
      }
img.left, img.center, img.right {
padding : 6px;
border : 1px solid #3C3C3C;
      }
img.left {
float : left;
margin : 0 15px 5px 25px;
      }
img.center {
display : block;
margin : 0 auto 5px;
      }
img.right {
float : right;
margin : 0 0 5px 15px;
      }
/* +++++ FORMS +++++ */

form {
background-color : inherit;
padding-left : 20px;
font-size : 12px;
color : #db0202;
font-weight : lighter;
letter-spacing : 0;
      }
input {
background-color : #8f8f8f;
color : #333333;
border : 1px solid #2e2e2e;
font-size : 12px;
padding : 3px;
      }
textarea {
background-color : #8f8f8f;
color : #333333;
border : 1px solid #2e2e2e;
font-size : 12px;
padding : 3px;
overflow : auto;
      }
.button {
background-color : #8f8f8f;
color : #f2f2f2;
border : 1px solid #2e2e2e;
font-size : 11px;
      }

Edit modérateur : merci d'utiliser les balises CODE et CODEBOX (pour les codes longs) screugneugneu !

[captain_torche]

Il n'y a aucune mention d'un fichier .jpg dans ton CSS. Il serait bon de le mettre à jour.

[Régis]

Bonjour 'iBulldog',

Je n'ai pas trouvé de quelle image tu parles... dans ton code CSS.

Par contre, j'ai trouvé des images *.GIF mais pas de *.JPEG.

Peut-être faudrait-il penser à modifier ton code en conséquence... remplacer le *.GIF concerné par le *.JPEG ?

[OUPS]captain_torche a été plus rapide[/OUPS]

[iBulldog]

Attention que background et cross.gif, j'en ai besoin ... eux ils s'affichent.

Voilà la partie du code en rapport avec le .jpeg

<div id="logo">

<!-- *** Logo goes here *** -->

<div class="logowhite">

<!-- *** Big font, white color *** -->

<img src="coresystem/logo1.jpg" class="center">

</div>

</div>

J'ai trouvé : si je met l'extension .jpeg, ça ne va pas, si je met .jpg c'est ok

Pourquoi ? windows m'indique un fichier .jpeg

Modifié 29 Décembre 2006 par iBulldog

[captain_torche]

Rien à voir avec le CSS, donc

Sinon, Windows affichera "image JPEG" quelle que soit son extension (jpg ou jpeg).

Pour pouvoir connaitre l'extension exacte d'un fichier, va dans le menu "Outils -> Options des dossiers", onglet "affichage", et décoche la case "masquer les extensions des fichiers dont le type est connu".

[iBulldog]

Merci à vous