Aller au contenu

Pas d'affichage jpeg


iBulldog

Sujets conseillés

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

Lien vers le commentaire
Partager sur d’autres sites

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.

Lien vers le commentaire
Partager sur d’autres sites

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...

Lien vers le commentaire
Partager sur d’autres sites

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 !

Lien vers le commentaire
Partager sur d’autres sites

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]

Lien vers le commentaire
Partager sur d’autres sites

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é par iBulldog
Lien vers le commentaire
Partager sur d’autres sites

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".

Lien vers le commentaire
Partager sur d’autres sites

Veuillez vous connecter pour commenter

Vous pourrez laisser un commentaire après vous êtes connecté.



Connectez-vous maintenant
×
×
  • Créer...