Version complète: sur le forum Webmaster Hub : Pas d'affichage jpeg
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
iBulldog
jeudi 28 décembre 2006 à 21:18
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
vendredi 29 décembre 2006 à 00:20
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
vendredi 29 décembre 2006 à 02:26
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
vendredi 29 décembre 2006 à 10:56
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 :
CODE

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
vendredi 29 décembre 2006 à 11:03
Il n'y a aucune mention d'un fichier .jpg dans ton CSS. Il serait bon de le mettre à jour.
Régis
vendredi 29 décembre 2006 à 11:03
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
vendredi 29 décembre 2006 à 11:19
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
captain_torche
vendredi 29 décembre 2006 à 11:49
Rien à voir avec le CSS, donc wink.gif
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
vendredi 29 décembre 2006 à 13:20
Merci à vous

wink.gif
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.