Centrer un bouton sur une image....

Sujet résolu

12 novembre 2018 à 22:55:59

Bonjour, alors voici mon probleme,

Je voudrais creer une espece de baniere et centre un bouton dessus...

J' ai donc cree une div contenant une image et un bonton mais je n arrive pas a centrer correctement le bouton sur celle-ci. De plus le site doit etre un minimum responsive et donc le bouton doit pouvoir changer de place en fonction de la largeur de l'ecran. J ai tenter d'utilise position relative sur le conteneur, position absolute sur le bouton et utiliser des pourcentage pour le centrer mais lorsqu'on retressi la fenetre, le bouton n est plus centrer...

Desole pour les fautes d'orthographe, je suis Canadian(partie anglaise...)

Voici le HTML et le CSS:

<!DOCTYPE html>
<html lang="en">
<head>
	<title>Robotic</title>
	<meta charset="utf-8">
	<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

	<header>
		<img src="css/img/Logo.png" class="header-logo" alt="Logo du site">

		<nav class="header-nav">
			<a href="#" class="header-nav-item active">Home</a>

			<a href="#" class="header-nav-item">Team</a>

			<a href="#" class="header-nav-item">Robot</a>

			<a href="#" class="header-nav-item">Scientific Project</a>
		</nav>

	</header>

	<div class="top-background-space">

		<img src="css/img/Space.png">	

		<button class="top-button-space">Go see our new Robot</button>

	</div>


	<section class="container">
		


	</section>


	<section class="container">
		


	</section>


	<footer>
		


	</footer>


</body>
</html>

*{
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
}

body{
	font-family: Roboto, sans-serif;
	font-size: 14px;
	color: rgba(0, 0, 0, 0.6);
	background-color: #F5F5F5;
}

header{
	background-color: #4A148C;
	color: #DBDBDB;
	padding-top: 5px;
}

.header-logo{
	display: block;
	height: 60px;
	width: 80px;
	margin:auto;
	color: #ffffff;
	}

.header-nav{
	text-align: center;
}

.header-nav-item{
	color: inherit;
	display: inline-block;
	margin-bottom: 10px;
	text-decoration: none;
	font-size: 18px;
	margin-right: 20px;
	transition: color 0.3s;
}


.header-nav-item:hover,
header .active{
	color: #ffffff;
}

.top-background-space{
	display: none;
}


@media only screen and (min-width: 1050px){
	header{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	header .header-logo{
		margin-top: -5px;
		margin-left: 15px;
	}

	header .header-nav{
		margin-right: 20px;
	}

	header .header-nav-item{
		margin-right: 30px;
	}

	header .header-nav-item:hover{
		transform: scale(1.05);
	}

	.top-background-space{
		display: inline-block;
		position: relative;
		width: 100%;
	}

	.top-background-space img{
		width: 100%;
	}

	.top-button-space{
		text-align: center;
		position: absolute;
		top: 40%;
		right: 40%;
		height: 70px;
		width: 445px;
		background-color: #FFA000;
		border: solid 1px #FFA000;
		border-radius: 6px;
		color: #ffffff;
		font-size: 20px;
		transition: 0.5s;
	}

	.top-button-space:hover{
		cursor: pointer;
		transform: scale(1.1);
		box-shadow: 3px 1px 8px 2px rgba(0, 0, 0, 0.4);
	}
}

Merci!

Frogweb

13 novembre 2018 à 11:28:49

Salut,

ça serait plus simple avec ton image en background, ce qui devrait être le cas si ton image c'est de la déco.

Ensuite pour centrer :

- centrer un "inline" : text-align:center sur le parent
- centrer un "block" : un width et un margin:auto

Et évite le plus possible les position:absolute. Une page web ce n'est pas un powerpoint.

Autre chose, ce code est à bannir de toutes tes CSS, ne l'utilise plus. :

*{
    margin: 0px;
    padding: 0px;
    ...
}

Vous cherchez à faire un menu déroulant ? Visitez www.frogweb.fr ! frogweb le site qu'il vous faut !

Maxime L

13 novembre 2018 à 11:33:29

Bonjour,

J'ai testé votre code et j'ai trouvé l'erreur.

Il faut mettre ceci

.top-background-space{

    display: flex;

    justify-content: center;

    align-items: center;

}

à la place de ceci :

.top-background-space{
    display: none;
}

Cela créer une flexbox et aligne le div au centre.

Si vous avez d'autres problèmes, n’hésitez pas

Bonne journée

P.S : pour quelqu'un qui n'est pas français, vous le parlez très bien

Redstruct90

13 novembre 2018 à 15:07:04

Merci beaucoup a vous deux, je n arrivais pas a utiliser vos deux technique separement mais j ai trouver une voie(? a way in english) qui utilise un mixte des deux...

-
Edité par Redstruct90 13 novembre 2018 à 21:53:05