28172 sujets

CSS et mise en forme, CSS3

[Résolu] Affichage de deux images

Bonjour à toutes et à tous,

Je dispose d'une image elephant.png et d'un rectangle joune FFCCOO.png. Je veux que :

L'image elephant soit dans un block ayant ses dimensions et situé à gauche de l'écran;
La bordure apparaisse sur les quatre côtés et,
Un bouton image jaune soit dans un block div placé sur l'image.

Fichier index

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta content="text/html; charset=ISO-8859-1"
 http-equiv="content-type">
  <title>Jean_bouton</title>
  <link rel="stylesheet" media="screen" type="text/css" title="Design"
 href="images/styles.css">
</head>
   <body style="color: rgb(0, 0, 0); background-color: rgb(153, 255, 255);"
   alink="#000088" link="#0000ff" vlink="#ff0000">
   <div class="image"
   style="background-image: url(../images/elephant.png);"><img alt=""> </div>
</body>
</html>


Fichier css

.image {
  display:block;
  width:402px;
  height:373px;
  float:left;             
  border:10px solid black; 
  border-width:10px;   
  border-style:solid;
  border-color:red;
}
.image a {
   display:block;
   width:250px;
   height:100px;
   border:10px solid black;
   <img src="images/FFCCOO.png" alt="Photo de Hawaii" />
}


Pourquoi les images ne s'affichent-elles pas?

Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (06 Mar 2011 - 18:56)
Bonjour,

Il faudrait:
- Passer toute la mise en forme dans la feuille de styles. Tous les attributs utilisés dans la balise <body> peuvent être remplacés par des styles CSS dans la feuille de styles.
- Corriger diverses erreurs dans le code CSS. Le sélecteur .image a {} ne correspond à aucun élément dans la page. Pour le bloc qui porte la classe "image", les styles de bordure appliqués se contredisent et pourraient être remplacés par une seule ligne (propriété border). Enfin, il y a une balise HTML en plein milieu du code CSS: elle n'a rien à faire là.

Jean Sympa a écrit :
Pourquoi les images ne s'affichent-elles pas?

- Pour la balise HTML dans le code CSS: parce que c'est un code complètement invalide que le navigateur va ignorer totalement.
- Pour la balise <img> dans le code HTML: parce qu'aucune image n'est référencée via l'attribut src.
- Pour l'élément DIV qui a une image de fond: à voir, sans doute que le chemin vers l'image est mauvais.
Modifié par fvsch (05 Mar 2011 - 19:24)
Merci fvsch,

J'ai revu ma copie. Je pense avoir corrigé les erreurs. Les bordures du block s'affichent mais, pas l'image. Où est l'erreur?


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type"
 content="text/html; charset=iso-8859-1">
  <link href="css/styles.css" rel="stylesheet" type="text/css">
  <title>bouton</title>
</head>
<body>
  <div class="image" background-image:url(../images/elephant.png)
  </div>
</body>
</html>




body { 
  background-color: rgb(153, 255, 255);
}

.image {
  display:block;
  width:402px;
  height:373px;
  float:left;             
  border:10px solid red; 
  }


Ce que je veux faire est-il réalisable? Je veux placer l'image elephant, en image de fond (*.png) dans le block et, créer un bouton (*.png) sur cette image.

Cordialement
Papy
Bonjour,

L'erreur ne serait-elle pas ici dans votre code :

<div class="image" background-image:url(../images/elephant.png)
</div>


background-image:url(../images/elephant.png) doit se trouver dans le CSS de la classe .image

Cordialement
Sujet clos
Aller à