28172 sujets

CSS et mise en forme, CSS3

Superposer bouton sur une image - positionnement bas droit [Résolu]

bonjour

je cherche à superposer une image (bouton) sur une autre image.
Ce sujet est traité dans bon nombre de post sur internet mais je n'ai pas trouvé la solution car ma problématique est un peu différente.
Je voudrai construire le HTML d'une vignette comprenant une image et un bouton.
L'image pourra avoir une hauteur variable mais de largeur fixe.
Le bouton aura toujours la même taille.

Je voudrai positionner le bouton par rapport à l'image de 10 px en remontant du bas et de 20px en partant de la droite.
La plupart des solutions que j'ai trouvé superpose le bouton par rapport au bord du haut et au bord de gauche de l'image (top et left). Moi je souhaite que ce soit par rapport au bottom et au right...

est ce que quun aurait une idée svp ? d'avance merci.




<title>test Vignette </title>
<STYLE type="text/css">

#image { 
	position : relative ;
	z-index : 1; 
	background-image: url(exemple_vignette_gamme.jpeg);
	background-repeat: no-repeat;  
}
                   
#bouton {
    position : relative;
    z-index : 2;
	padding-bottom:100%;
	margin-right: 10px;
	margin-bottom: 15px;
}

</STYLE>
</head>

<body>
<div id="image" >       
   
    <div id ="bouton" left>
    <img src="btn_choisir_cette_offre.jpg" />
    </div>

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

Modifié par charlie16 (15 May 2009 - 16:55)
Hello charlie16 et bienvenue Smiley smile ,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace après le crochet ouvrant).

upload/1-code.gif

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que l'Aide (dont le lien est fourni lors de l'inscription) contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.

Bonne continuation Smiley smile
Merci pour la mise en forme.

Pour ce que tu veux faire il faut utiliser le positionnement absolu (lire le Guide de survie du positionnement CSS).

Cela pourrait donner :
#bouton {
   position : absolute;
   bottom: 10px;
   right: 15px;
}

Par contre dans ton code actuel #image n'a pas de dimensions donc ça ne fonctionnera pas.
merci je viens de lire la documentation.

effectivement il faut utiliser la position absolute.

malheureusement celle ci s'applique sur la page HTML et non sur le DIV père ...

Je ne peux pas spécifier les dimensions (la longueur ok mais pas la hauteur car elle est variable d'une vignette à l'autre ... Et dans l'application il y aura plusieurs vignettes qui n'ont auront pas forcément la même hauteur....)

je joins le code modifié.

je pense que nous y sommes presque ...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test Vignette Charles</title>
<STYLE type="text/css">

#image { 
	position : relative ;
	z-index : 1; 
	background-image: url(exemple_vignette_gamme.jpeg);
	background-repeat: no-repeat;  
	padding-bottom:100%;
	width:648px;
}
                   
#bouton {
    position : absolute;
    z-index : 2;
	bottom: 10px;
    right: 20px;
}

</STYLE>
</head>

<body>
<div id="image" >       
   
    <div id ="bouton">    
    <img src="btn_choisir_cette_offre.jpg" />
    </div>

</div>
</body>
</html>
charlie16 a écrit :
malheureusement celle ci s'applique sur la page HTML et non sur le DIV père
Non : la position absolute fait référence au premier ancêtre positionné qui est donc ici #image puisqu'il est en position: relative. Smiley cligne

Il se trouve que puisque tu ne précises pas de height cette valeur sera égale à celle de son contenu... c'est à dire 0 puisque le positionnement absolu de l'image du bouton sort cet élément du flux. Pour ce qui est de la largeur (width) elle serait égale par défaut à 100% de son conteneur (DIV, BODY ou autre) si tu ne l'avais pas spécifiée.

Pour ce qui est des dimensions de ce DIV #image tout dépend de la signification de l'image en question : si elle n'est que décorative sa place est effectivement dans le code css mais si elle contient une information elle devrait être dans le code css (avec un attribut alt qui va bien). Dans ce cas il se trouve que ça règlerait le problème car alors #image aurait la hauteur de l'image en question.
Modifié par Heyoan (15 May 2009 - 14:54)
Merci.

Effectivement l'image contient une information.

Je l'ai mis dans le code de la page html et cela fonctionne bien.
Par contre si je ne spécifie pas le width dans #image il ne me place pas mon bouton à 20 px à droite de ma vignette mais à 20 px à droite de mon body.
Du coup je ne comprends pas pourquoi il arrive à prendre la bonne hauteur mais pas la bonne largeur ...

voici le code avec le width spécifié 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test Vignette Charles</title>
<STYLE type="text/css">

#image { 
	position : relative ;
	z-index : 1; 
	width:648px;
}
                   
#bouton {
    position : absolute;
    z-index : 2;
	bottom: 10px;
    right: 20px;
}

</STYLE>
</head>

<body>
<div id="image" >
  <img src="exemple_vignette_gamme.jpeg" alt="vignette" />
  <div id ="bouton"> <img src="btn_choisir_cette_offre.jpg" />
</div>
</div>
</body>
</html>
charlie16 a écrit :
Par contre si je ne spécifie pas le width dans #image il ne me place pas mon bouton à 20 px à droite de ma vignette mais à 20 px à droite de mon body.
Du coup je ne comprends pas pourquoi il arrive à prendre la bonne hauteur mais pas la bonne largeur ...

Heyoan a écrit :
Pour ce qui est de la largeur (width) elle serait égale par défaut à 100% de son conteneur (DIV, BODY ou autre) si tu ne l'avais pas spécifiée.


Par défaut un élément de type bloc (comme DIV, P...) a une largeur de 100% de son conteneur.

Lire également Comprendre la structure HTML et le rendu CSS des balises : bloc et en-ligne.
Modifié par Heyoan (15 May 2009 - 15:03)
J'ai lu la page qui est tres intéressante, notamment la partie :
"
Le positionnement par défaut des éléments

Du rendu CSS ("display: block" et "display: inline") d'un élément découlent ses spécificités d'affichage :

* les éléments de rendu "bloc" se placent toujours l'un en dessous de l'autre par défaut (comme un retour chariot). Par exemple: une suite de paragraphes (balise <p>) ou les éléments d'une liste (balise <li>). Par ailleurs, un élément "bloc" occupe automatiquement, par défaut, toute la largeur disponible dans son conteneur.
"

il y a qd même des choses qui m'échappent; pq le bouton prend la hauteur de son conteneur mais pas sa largeur ... ce n'est pas grave ça viendra avec le temps Smiley cligne

En tout cas je vous remercie de votre aide !!

Charles.
charlie16 a écrit :
il y a qd même des choses qui m'échappent; pq le bouton prend la hauteur de son conteneur mais pas sa largeur ...
Ce n'est pas l'image du bouton qui prend la hauteur du conteneur mais le conteneur qui s'adapte à la hauteur de l'image. Smiley cligne

Pour ce qui est de la largeur je pense que tout a été dit (à savoir qu'un élément de type bloc prend toute la largeur disponible de son propre conteneur).

Dans le cas d'un conteneur de type en ligne (comme un SPAN) la hauteur ET la largeur dépendraient du contenu. Lire le modèle de boîte.

Au passage tout ceci est dans un but explicatif mais je me demande bien pourquoi tu utilises une image pour le bouton alors qu'à priori il devrait s'agir d'un INPUT (de type image) ou d'un lien. Smiley murf

Un exemple avec SPAN :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
.vignette { 
	position : relative ;
}

.bouton {
    position : absolute;
	bottom: 10px;
	right: 15px;
}
</style>
</head>
<body>
<form action="index.php" method="post">
	<p>
		<span class="vignette">
			<img src="image1.jpg" alt="image 1" />
			<input class="bouton" type="image" src="bouton.gif" title="Go" alt="Go" />
		</span>
	</p>
	<p>
		<span class="vignette">
			<img src="image2.jpg" alt="image 2" />
			<input class="bouton" type="image" src="bouton.gif" title="Go" alt="Go" />
		</span>
	</p>
</form>
</body>
</html>


Et si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre. Smiley cligne
Sujet clos
Aller à