18034 sujets

Questions générales et questions de débutants

Image altérée avec filet gris

Bonjour, je suis en train de mettre un site en ligne et j'ai un soucis d'image. En effet, sur l'index, l'image centrale est en bug complet : elle est littéralement coupée en deux. Elle fait précisément 200px de hauteur au lieu des 400px qu'elle fait réellement.

Je travaille sur fillezila. J'ai donc vérifié l'état de l'image, puis l'ai remplacé par une nouvelle qui ne fonctionnais pas non plus. Le fichier présent sur mon ordinateur n'est pourtant pas endommagé...

Je décide donc de télécharger cette image directement du site web à mon bureau pour vérifier son état. et là... voici ce que j'obtiens :

http://img11.hostingpics.net/pics/361164Sanstitre1.jpg

Faut que je me bouge pour trouver une solution, j'ai ma présentation de book pour le 11 qui viens, gros stress :3. Quelqu'un sais pourquoi ca me fait de la merde comme ca? Je vous donne mon code tout de même. Le nom de la div en question est 'image".

Smiley fache 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Galerie des 13 regards</title>
<link rel="stylesheet" type="text/css" media="screen" href="cssfluide.css"/>
</head>

<body>

<div id="contentcentrage">

<div id="contentlogohaut">
<div id="logohaut"></div>
</div>

<nav>
  <ul id="navigation">                          
            <li id="encours"><a href="index.html">ACCUEIL</a></li>
            <li><a href="lemotdugaleriste.html">LE MOT DU GALERISTE</a></li>
            <li><a href="expositionsprecedentes.html">EXPOSITIONS PRECEDENTES</a></li>
            <li><a href="contact.html">CONTACT</a></li>
        	</ul>
</nav>

<div id="image"></div>

<div id="bloctexte"><div id="texte">Aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lorem turpis, facilisis id purus a, molestie congue sapien. Sed vitae dictum est. Integer faucibus nulla at sapien sagittis, id fringilla lorem condimentum. Suspendisse lacinia, nisl quis maximus consequat, velit elit tristique enim, nec semper odio quam eget ipsum. Praesent et sem mauris.</div></div>

<div id="contentbleu">
<div id="textedownload"><a href="images/indexs/AFFICHE/AFFICHE LES VISAGES DE PARIS.pdf" target="new">Téléchargez le flyer!</a></div>
</div>


<div class="footer">GALERIE DES 13 REGARDS - 4 rue du docteur Leray - 75013 - PARIS</div>

</div>
</body>
</html>




ET LE CSS



@charset "UTF-8";
/* CSS Document */



.body
{
}

#contentcentrage
{
width:1024px;
margin:0 auto 0 auto;
}
	
#contentlogohaut
{
width:100%;
height:90px;
}

#logohaut
{
background-image:url(images/indexs/1024/images/logohaut.jpg);
height:90px;
width:100%;
background-repeat:no-repeat;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:1024px;
height:30px;
}

#navigation 
{
height:30px;
width:1024px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
}

#image
{
height:400px;
width:1024px;
margin:0px auto 0px auto;
background-image:url(images/indexs/1024/images/imagenow.jpg);
}
	
#bloctexte
{
height:auto;
width:800px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:justify;
margin:0px auto 0px auto;
	}
	
	#contentbleu
	{
		height:100px;
		width:190px;
		margin:0px auto 0px auto;
		}
	#textedownload
	{
		text-align:center;
		margin:30px auto 0px auto;
		padding:20px auto 20px auto;
		background-color:#48CBFB;
		color:#FFFFFF;
		font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
		border-radius:10px;
		}
		
			#textedownload a
	{
		text-align:center;
		margin:40px auto 0px auto;
		padding:20px auto auto auto;
		background-color:#48CBFB;
		color:#FFFFFF;
		text-decoration:none;
		font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
		}
		

.footer 
{
height:50px;
width:1024px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:0px auto 0px auto;
color:#FFFFFF;
line-height:50px;
bottom:0px;
position:fixed;
}

@media screen and (max-width: 763px) 
{
	.body
{
}

#contentcentrage
{
width:763px;
margin:0 auto 0 auto;
}
	
#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/763/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-align:center;
text-decoration:none;
position:fixed;	
width:763px;
height:30px;
margin:0px auto 0px auto;
}

#navigation 
{
height:30px;
width:763px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 10px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
display:inline;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:0px 10px 0px 10px;
margin:0px auto 0px auto;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 5px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:11px 5px 11px 5px;
margin:0px auto 0px auto;
}

#image
{
height:309px;
width:763px;
margin:0px auto 0px auto;
background-image:url(images/indexs/763/images/image763.jpg);
}
	
#bloctexte
{
height:auto;
width:600px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:763px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
bottom:0px;
position:fixed;
}
}

@media screen and (max-width: 380px) 
{
	.body
{
}
	
	#contentcentrage
{
width:380px;
margin:0 auto 0 auto;
}

#contentlogohaut
{
width:100%;
height:90px;
margin:0px auto 0px auto;
}

#logohaut
{
background-image:url(images/indexs/380/images/logohaut.jpg);
height:90px;
width:100%;
margin:0px auto 0px auto;
}
	
.nav
{
color:#FFFFFF;
text-decoration:none;
width:380px;
height:80px;
margin:0px auto 0px auto;
}

#navigation 
{
height:87px;
width:380px;
list-style-type:none;
background-color:#000000;
text-decoration:none;
text-align:center;
padding: 0px 0px 0px 0px;
margin:0px auto 0px auto;
}
		
#navigation li
{
background-color:#000000;
text-decoration:none;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter"; 
padding:3px 0px 0px 0px;
margin:0px auto 0px auto;
display:block;
}

#navigation li a
{
color:#FFFFFF;
text-decoration:none;
padding:0px 0px 0px 5px;
margin:0px auto 0px auto;
}

#navigation li a:hover
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 10px 3px 10px;
margin:0px auto 0px auto;
}

#navigation #encours a
{
color:#000000;
text-decoration:none;
background-color:#FFFFFF;
padding:3px 5px 3px 5px;
margin:0px auto 0px auto;
}

#image
{
height:298px;
width:380px;
margin:0px auto 0px auto;
background-image:url(images/indexs/380/images/image380.jpg);
}
	
#bloctexte
{
height:auto;
width:300px;
margin:30px auto 0px auto;
}
	
#texte
{
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-justify:auto;
text-align:justify;
	}

.footer 
{
height:50px;
width:380px;
font-family:"Courier New", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter";
text-align:center;
background-color:#000000; 
margin:30px auto 0px auto;
color:#FFFFFF;
line-height:50px;
bottom:0px;
position:fixed;
}
}

Modifié par Felipe (04 Jun 2015 - 17:16)
Administrateur
Bonjour,

Quelques pistes possibles :
est-ce que tu as modifié des paramètres de Filezilla ?
Que se passe-t-il avec d'autres images ne faisant pas 400px de haut ? En leur faisant faire un aller-retour répertoire A -> serveur -> répertoire B ?
As-tu suffisamment d'espace libre sur le serveur ?
Est-ce que des optimisations un peu trop agressives seraient activées (mod_pagespeed) ?
Si tu fais afficher à ta page une image de n'importe où sur le web (disons http://placekitten.com Smiley smile ), est-ce ça retombe en marche ?
Bonjour Felipe,

non, je n'ai absolument pas touché aux réglages de Filezilla. En ce qui concerne les images, elles fonctionnent parfaitement bien et mon espace server est également largement suffisant et pas d'optimisation agressive non plus!

C'est marrant, hier soir, le problème c'est décalé sur une autre image (allez comprendre pourquoi) puis a disparu ce matin!

M'enfin je suis soulagé de l'avoir vu disparaître.

Et merci tout de même!
Sujet clos
Aller à