28172 sujets

CSS et mise en forme, CSS3

[Résolu] Placer une image sur une image de fond

Bonjour à toutes et à tous,

Placer une image sur une image de fond

Dans un div, j'affiche une image de fond (elephant.png) sur laquelle je veux poser un bouton. Je veux également disposer la balise a.
Le bouton (FFCCOO.png) est jaune. Il ne s'affiche pas.
Placer un div dans un div pose-t-il problème?
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" 
  <div class="bouton"> <a href="#"> <img src="images/FFCCOO.jpg"
    alt="Bouton alt" title="bouton titre" /> </div> 
  </div>
</body>
</html>




body { 
  background-color: rgb(153, 255, 255);
}
.image {
  display:block;
  width:402px;
  height:373px;
  float:left;             
  border:10px solid red; 
  background-image:url(../images/elephant.png)
  }
 .bouton {
  float:left;
  bottom: 0 px; 
  width: 150px;
  height: 100px; 
 }

Avec mes remerciements
Cordialement
Papy
Modifié par Jean Sympa (08 Mar 2011 - 08:33)
Bonjour,

Ce que dit Victor est vrai, mais au-delà de ça ton code n'est pas très propre :

- Inutile de mettre un "display: block;" sur ta <div> de classe "image".
Une <div> est une balise générique. C'est-à-dire qu'aucune propriété n'est donnée par défaut (elle est totalement vierge pour qu'on puisse la moduler à notre envie).
Mais cet élément se comporte par défaut comme un élément de type bloc. L'équivalent de la <div> pour les éléments de types en-ligne est le <span>.

- Le "bottom: 0px;" ne fonctionnera pas sur ta <div> de classe "bouton".
Lorsqu'un élément a été "floatté", on ne peut que le décaler avec sa propriété "margin".
"bottom" est utilisé en général après avoir positionné un élément de façon "absolute" pour qu'il se place en bas, ce que je te conseille de faire ici.

La seule chose à laquelle il faut penser en procédant ainsi, c'est de positionner la <div> qui contient ton bouton (ici, "image"). Pour ce faire, on ajoute "position: relative;".

.image {
	width: 402px;
	height: 373px;
	position: relative;
	float: left;
	background-image: url(../images/elephant.png);
	border: 10px solid red;
}

.bouton {
	width: 150px;
	height: 100px;
	position: absolute;
	left: 0;
	bottom: 0;
}
Merci à vous deux,

Ce que j'essaie de faire, c'est placer un bouton sur une image de fond. L'image de fond est placée sur une div ayant les dimensions de l'image de fond.

A 'attention de Victor BRITO,

La classe image correspond à l'image de fond, image elephant.png. Je veux que le bouton soit affiché sur cette image; Je n'ai pas oublié le chevron de la balise d'ouverture du premier div (de classe div). Je ne connais pas le terme chevron. S'il s'agit de la balise fermante </div>, je ne sais pas où la placer. J'utilise Notepad++, en plaçant le curseur sur une balise ouvrante, Notepad met en survaleur la balise fermante. Actuellement Notepad ne met pas en survaleur la balise fermante de la balise d'ouverture du premier div (de classe image).

A l'attention de Maliki,
Tu proposes dans .image: position:relative et float: left. Or, les dimensions proposées sont celles de l'image. L'image devrait s'encastrer dans la div. Ces deux correction ont-elles un intérêt?

Avec mes remerciements
Cordialement
Papy
Salut,

Ton problème viens bien de l'erreur evoqué par Victor:
Le terme chevron signifie les caractères "<" et ">" utilisé pour indiquer les balises.

voici ton bout de code:


<body> 
  <div class="image"  
  <div class="bouton"> <a href="#"> <img src="images/FFCCOO.jpg" 
    alt="Bouton alt" title="bouton titre" /> </div>  
  </div> 
</body>


remplace:


<div class="image" 
par
<div class="image"[b]>[/b]


ensuite tu a oublié de fermer la balise <a>

en résumé, voici le code qui fonctionne:


<body> 
	<div class="image"[b]>[/b]
		<div class="bouton">
			<a href="#"><img src="bouton.jpg" alt="Bouton alt" title="bouton titre" />[b]</a>[/b]
		</div>  
	</div> 
</body>

Modifié par mamax (07 Mar 2011 - 12:18)
Merci à vous tous,

Le bouton s'affiche sur l'image de fond elephant.png. Mais, il n'est pas à la bonne place. Je veux qu'il soit en bas et à gauche de l'image elephant.
Quand je clique sur ce bouton j'obtiens le message :
Fichier introuvable
Firefox ne peut trouver le fichier à l'adresse /F:/Site_Web/Jean_bouton/<a.
L'adresse est : /F:/Site_Web/Jean_bouton/images/FFCCOO.png
Ce message m'intrigue. Faut-il l'ignorer?

J'ai coupé l'image pour diminuer sa taille.


<body>
  <div class="image"> 
    <div class="bouton"> 
       <a href= <a href="#"><img src="images/FFCCOO.png" alt="Bouton alt" title="bouton titre" /></a> 
    </div> 
  </div>
</body>




 .image {
  width:402px;
  height:373px;
  position:relative;
  float:left;             
  background-image:url(../images/elephant.png);
  border:10px solid red; 
  }
 .bouton {
  left: 0;
  bottom: 0;
 }


Que faut-il faire pour placer correctement le bouton, en bas et à gauche?

Avec mes remerciements
Cordialement
Papy upload/33688-DemiBouton.png
Regarde un peu le code de ton lien!!!


<a href= <a href="#"><img src="images/FFCCOO.png" alt="Bouton alt" title="bouton titre" /></a>


tu as deux fois "href"!

pour ce qui est du positionnement, regarde les tutos des positionnement CSS du site, il sont très bien fait.

pour ta question, il faut donc utiliser les positionnement relatif et absolut:



body {  
  background-color: rgb(153, 255, 255); 
} 
.image { 
  display:block; 
  width:402px; 
  height:373px; 
  border:10px solid red;  
  background-image:url(fond.jpg) 
  position: relative;
  } 
 .bouton { 
  float:left; 
  bottom: 0 px;  
  width: 150px; 
  height: 100px;
  position: absolute;
  bottom: 0px;
  right: 0px;
 }
Merci mamax,

Les deux images s'affichent. Il reste un seul petit problème. Le bouton ne s'affiche bien à gauche mais, pas en bas de l'image.

Cordialement
Papy upload/33688-Bouton1103.png
Merci à tous,

Je voulais placer une bouton sur une image de fond, dans un div.
C'est presque fait. Il reste un détail. J'essaierai ultérieurement de lui trouver une solution.
Voici le résultat

<body>
  <div class="image"> 
    <div class="bouton"> 
       <a href="#"><img src="images/FFCCOO.png" alt="Bouton alt" /></a> 
    </div> 
  </div>
</body>


Cordialement
Papy
Sujet clos
Aller à