18041 sujets

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

Image s'affiche pas

Bonjour,

J'ai codé ça mais l'image 70X54 ne s'affiche pas.
Je sais pas si j'ai mal codé =>

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="FEUILLESTYLE.CSS" />
</head>
<body>
<div id="Apple" class="Apple-insc">
<div id="logo" class="Apple-inc fixe_top">
<div id="logo-apple">
<a href="http://www.CELLEBRITE.us/" title="CELLEBRITE COMMUNICATIONS">
</a>
</div>
<div id="logo-Inc">
<a href="http://www.CELLEBRITE.us/" title="CELLEBRITE COMMUNICATIONS">
</a>
</div>
<div id="logo-apple-texte">
<div id="Separateur-vertical-apple"> </div>
<span>
CELLEBRITE<br>COMMUNICATIONS
</span>
</div>
</div>
</div>
</body>
</html>

/*------------style.php -------------------------*/

/*Header - Logo*/
div.Apple-insc div#logo{
overflow:hidden;
padding:0px 180px 0px 14px;
}
div.Apple-insc div#logo div#logo-Inc{
float:left;
margin-right:24px;
}
div.Apple-insc div#logo div#logo-apple{
float:left;
margin-right:24px;
}
div#logo-apple-texte{
clear:none;
font-size:235%;
line-height:100%;
color:#898a8a;
font-family:Arial,Helvetica,sans-serif;
font-weight:normal;
text-transform:uppercase;
margin-top:8px;
}
div#logo-apple-texte a {
color:#898a8a;
text-decoration:none;
}
@media (max-width:790px){div.Apple-insc div#logo{
width: 100%;
display: table;
padding: 0 0 0 20px;
margin: 10px 0 10px 0;
}
div.Apple-insc div#logo a{
vertical-align: middle;
}
div.Apple-insc div#logo #logo-apple-texte{
color: #666666;
font-size: 18px;
font-weight: 700;
line-height: 19px;
vertical-align: middle;
width: 100%;
}
div#logo-apple-texte{
display: table-cell;
}
div#logo-Inc{
padding: 0 15px 0 0;
display: none;
}
div#logo-apple-texte div#Separateur-vertical-apple{
border-left: 1px solid #d1d1d1;
padding: 0 15px 0 0;
float: left;
height: 38px;
}}
@media (max-width:480px){
div#Separateur-vertical-apple{
display: none;
}}@media (min-width: 480px) and (max-width: 500px){
div#Separateur-vertical-apple{
display: none;
}}@media (min-width:500px){
/*On change le logo en format tablette*/
div#logo-apple{
display: none;
}
div#logo-Inc a{width:204px;height:79px;background:url(Ipple/logo-Inc.jpg) no-repeat;background-size:cover;display:table-cell}div#logo-Inc{
display: table-cell;}
}
@media (max-width:500px){

div#logo-Inc{display:none;
}
div#logo-apple a{width:70px;height:54px;background:url(Ipple/logo-apple.png) no-repeat center;display:table-cell}div#logo-apple{
display: table-cell;}
}

img {
border:0px;
display:block;
}
a{background-color:transparent;}
img{vertical-align:middle}
img{border:0}
img{
border: none;
} a{color:rgb(66, 139, 202);
text-decoration:none;}
body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
Bonjour Allan00958,

Les images sont dans le CSS

/*------------style.php -------------------------*//*Header - Logo*/div.Apple-insc div#logo{overflow:hidden;padding:0px 180px 0px 14px;}div.Apple-insc div#logo div#logo-Inc{float:left;margin-right:24px;}div.Apple-insc div#logo div#logo-apple{float:left;margin-right:24px;}div#logo-apple-texte{clear:none;font-size:235%;line-height:100%;color:#898a8a;font-family:Arial,Helvetica,sans-serif;font-weight:normal;text-transform:uppercase;margin-top:8px;}div#logo-apple-texte a {color:#898a8a;text-decoration:none;}@media (max-width:790px){div.Apple-insc div#logo{width: 100%;display: table;padding: 0 0 0 20px;margin: 10px 010px 0;}div.Apple-insc div#logo a{vertical-align: middle;}div.Apple-insc div#logo#logo-apple-texte{color:#666666;font-size: 18px;font-weight: 700;line-height: 19px;vertical-align: middle;width: 100%;}div#logo-apple-texte{display: table-cell;}div#logo-Inc{padding: 0 15px 0 0;display: none;}div#logo-apple-texte div#Separateur-vertical-apple{border-left: 1px solid#d1d1d1;padding: 0 15px 0 0;float: left;height: 38px;}}@media (max-width:480px){div#Separateur-vertical-apple{display: none;}}@media (min-width: 480px) and (max-width: 500px){div#Separateur-vertical-apple{display: none;}}@media (min-width:500px){/*On change le logo en format tablette*/div#logo-apple{display: none;}div#logo-Inc a{width:204px;height:79px;background:url(Ipple/logo-Inc.jpg) no-repeat;background-size:cover;display:table-cell}div#logo-Inc{display: table-cell;}}@media (max-width:500px){div#logo-Inc{display:none;}div#logo-apple a{width:70px;height:54px;background:url(Ipple/logo-apple.png) no-repeat center;display:table-cell}div#logo-apple{display: table-cell;}}img {border:0px;display:block;}a{background-color:transparent;}img{vertical-align:middle}img{border:0}img{border: none;} a{color:rgb(66, 139, 202);text-decoration:none;}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
Modérateur
La réponse est dans le css :

/*------------style.php -------------------------*//*Header - Logo*/div.Apple-insc div#logo{overflow:hidden;padding:0px 180px 0px 14px;}div.Apple-insc div#logo div#logo-Inc{float:left;margin-right:24px;}div.Apple-insc div#logo div#logo-apple{float:left;margin-right:24px;}div#logo-apple-texte{clear:none;font-size:235%;line-height:100%;color:#898a8a;font-family:Arial,Helvetica,sans-serif;font-weight:normal;text-transform:uppercase;margin-top:8px;}div#logo-apple-texte a {color:#898a8a;text-decoration:none;}@media (max-width:790px){div.Apple-insc div#logo{width: 100%;display: table;padding: 0 0 0 20px;margin: 10px 010px 0;}div.Apple-insc div#logo a{vertical-align: middle;}div.Apple-insc div#logo#logo-apple-texte{color:#666666;font-size: 18px;font-weight: 700;line-height: 19px;vertical-align: middle;width: 100%;}div#logo-apple-texte{display: table-cell;}div#logo-Inc{padding: 0 15px 0 0;display: none;}div#logo-apple-texte div#Separateur-vertical-apple{border-left: 1px solid#d1d1d1;padding: 0 15px 0 0;float: left;height: 38px;}}@media (max-width:480px){div#Separateur-vertical-apple{display: none;}}@media (min-width: 480px) and (max-width: 500px){div#Separateur-vertical-apple{display: none;}}@media (min-width:500px){/*On change le logo en format tablette*/div#logo-apple{display: none;}div#logo-Inc a{width:204px;height:79px;background:url(Ipple/logo-Inc.jpg) no-repeat;background-size:cover;display:table-cell}div#logo-Inc{display: table-cell;}}@media (max-width:500px){div#logo-Inc{display:none;}div#logo-apple a{width:70px;height:54px;background:url(Ipple/logo-apple.png) no-repeat center;display:inline-block}div#logo-apple{display: table-cell;}}img {border:0px;display:block;}a{background-color:transparent;}img{vertical-align:middle}img{border:0}img{border: none;} a{color:rgb(66, 139, 202);text-decoration:none;}body{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
Peut-être une erreur dans cette ligne

{width:70px;height:54px;background:url(Ipple/logo-apple.png)

Apple et pas Ipple
Allan00958,

Aucune erreur ici : {width:70px;height:54px;background:url(Ipple/logo-apple.png)

Apple et pas Ipple

Quant à "Apple et pas Ipple", j'ai nommé le dossier comme ça (Ipple).

Merci d'avance
Oui, tout ça c'est ok.

L'image 204X79 qui est dans le même dossier que elle, s'affiche. Je comprends rien...
C'est parce que la balise 'a' qui contient l'image de 204x79 est en display:table-cell.

Il faut donc ajouter display:table-cell ou display:block à la balise 'a" qui contient l'image de 70x54

Par défaut les liens 'a' sont des éléments de types inline.
Je pense que les "a" ont toutes le "display:table-cell" des deux cotés (pour 70x54 & 204X79) déjà. Donc je ne crois pas que la solution soit de ce côté...

Je ne sais vraiment pas...ce qui est à l'origine
Modérateur
Bonjour Jean,

Jean0164 a écrit :
Je pense que les "a" ont toutes le "display:table-cell" des deux cotés (pour 70x54 &amp; 204X79) déjà. Donc je ne crois pas que la solution soit de ce côté...

Et si, c'est bien ça. Mais il faut utiliser inline-block ou block. C'est ce que j'ai corrigé dans ma réponse :
div#logo-apple a{width:70px;height:54px;background:url(Ipple/logo-apple.png) no-repeat center;display:inline-block}

Comme te l'a très bien dit allan00958 les balise <a> sont en inline et le table-cell ne règle pas le problème vu qu'elle est intégrée dans une div qui elle même n'a pas de taille. Sers toi de l'inspecteur de code tu verra bien la taille des éléments. En plus de ça ta balise <a> est vide donc ça n'arrange rien.

Jean0164 a écrit :
Donc je ne crois pas que la solution soit de ce côté...

Quand tu as un soucis, que tu viens chercher de l'aide et qu'on te donne une réponse, tu ferais mieux de remettre en cause tes croyances, tester si ça résout le problème et ensuite faire un retour plutôt que de réfuter la solution avec un simple "non je ne pense pas". Si tu savais vraiment, tu n'aurais pas ce soucis hein Smiley cligne

Au passage ma réponse était un peu sale mais j'ai fais ca pour souligner le fait que tu ne fait aucun effort dans ton post : Pas de mise en forme, pas d'indentation, du code a moitié en ligne, aucun renseignement sur où trouver l'image dont tu parle (perso j'ai cherché un 70X54.jpg en premier) etc. Bref soigne tes post, t'y verra déjà plus clair et nous aussi !

Bonne journée et fait un effort sur ton prochain post !

Bisous
Sujet clos
Aller à