28172 sujets

CSS et mise en forme, CSS3

[Résolu] Problème de placement des boutons

Salut à tous,

ça fait quelque jour que je travail sur mon site mais j'ai un problème. J'ai une images sur la page et j'aimerais faire apparaître un ou deux boutons dessus. Mais à chaque fois les boutons reste sous l'image, ils ne veulent pas se superposer.

Quelqu'un serai les lignes de codes à modifier? 



<div class="block">
		<h2 class="subtitle heading-site">Mon entreprise</h2>
		<div class="container about">
			<div class="columns">
				<div class="column about-sigle-element">
					<p>
					
					
					</p>
				</div>
				<div class="auto">
					<a href="#"><img src="src/img/1.png" ></a>
					<button class="button is-link"> Contactez nous !</button>
				</div>
				<div class="auto">
				<a href="#"><img src="src/img/1.png"></a>
				<button class="button is-link"> Contactez nous !</button>
				<p>	</p>
					</div>
			</div>
		</div>
	</div>
	




.about .about-sigle-element {
	position: absolute;
		
}
.about .bouton expresse {
	position: relative;
	z-index: 999 ;
}

Modifié par tmk (17 Jan 2019 - 02:57)
Modérateur
Bonjour,

Il faut mettre un position:relative sur la classe "auto" des divs qui contiennent à la fois tes images et tes boutons. Ces divs serviront de référence pour le positionnement des boutons.

Ensuite, il faut mettre un position:absolute sur la classe "button" des buttons. Et ensuite, ajouter des propriétés top et left pour positionner les boutons à l'endroit approprié.

Exemple (bouton à 20px des bords du haut et de gauche de la div qui le contient):

.about .auto {
    position:relative;
}
.about .button {
    position:absolute;
    top: 20px;
    left: 20px;
}


Amicalement,
Meilleure solution
Je te remercie ça fonctionne.

J'aurai une autre question. Comment créer un petit espace entre les image ?

j'ai rajouter cette ligne de code :

.about .image {
	column-gap: 2rem;
}


J'ai beau mettre des px ou des rem ça ne change pas .
Modérateur
Bonjour,

column-gap n'est pas adapté ici.

Mets plutôt des margin pour les divs de classe auto qui entourent tes images.

Amicalement,
Sujet clos
Aller à