[Résolu] Probléme (CSS) de taille sur un de mes boutons par Sn0wFR - page 1

l'image explique tout

voila tout mon code HTML

<!DOCTYPE html>
<html>
<head>
	<title>Acceuil</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
</head>
<body>

	 <!-- haut de page -->
	 <header>
	 	<img src="img/plfa_banniere.jpg" width="1250" height="150">
	 </header>

	 <!-- menu de navigation -->
	<nav class="menu-nav">
		<ul>
			<li class="Bouton">
				<a href="#">
					Acceuil
				</a>
			</li>
			<li class="Bouton">
				<a href="Actu.html">
					Actu
				</a>
			</li>
			<li class="Bouton">
				<a href="Contact.html">
					Contact
				</a>
			</li>
		</ul>
	</nav>

	<!-- Contenu sous forme de boite -->
	<div id="Contenu">
	
	<div class="Boitegauche">
		
		<div id="Annonce">
			<p>
				Hey Tu es bien sur la PLFA nous t'accueillons a bras ouvert et on vous souhaite un bon visionnage sur notre chaîne, amusez-vous bien, on s'amuse bien, on est 3 a tenir cette chaîne  de gaming mais peut etre changerons nous avec le temps !
			</p>
		</div>

		<div id="Annonce2">
			<p>
				<a id="LienYTB" href="https://www.youtube.com/channel/UCoZry3lfxo46ihE0Z-19Y5w/featured" target="_BLANK">
				Lien vers notre chaîne Youtube !
				</a>
			</p>
		</div>

		<div id="Annonce3">
			<p>
				Vien faire un tour sur le site de temp en temp pour être tenue au courant des dernières info 
			</p>
		</div>

	</div>

	<div class="Boitedroite">
		
<h1>Derniere vidéo</h1>

<iframe width="560" height="315" src="https://www.youtube.com/embed/vRT7ya_zvc4" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

	</div>

</div>


	<!-- pied de page -->
	<footer>
		<p id="Copyright">
			Copyright &copy; Mathieu - 2018 - All Right Reserved
		</p>
	</footer>

</body>
</html>

et voila tout le CSS

html{
	background-color: #000000
}

div#Contenu{
	background-color: white;
	margin-top: 3%;
}

div#Contenu div{
	display: inline-block;
	width: 48%;
}

div#Contenu div h1,p, iframe{
	margin-left: 0.5%;
}

div#Contenu div.Boitegauche{
	vertical-align: top;
	background-color: white;
}

div#Contenu div.Boitedroite{
vertical-align: middle;
background-color: #C4C4C4;
width: 51.2%;
margin-top: 0.4%;
margin-bottom: 0.5%
}

nav.menu-nav ul li.Bouton a{
	color: white;
	background-color: red;
	text-decoration: none;
	list-style-type: none;
	padding-left: 10%;
	padding-right: 10%;
	padding-top: 10%;
	padding-bottom: 10%;
}

nav.menu-nav ul li.Bouton{
	display: inline-block;
	padding: 0.25%
}

nav.menu-nav ul li.Bouton:hover a{
	color: red;
	background-color: white;
	transition: 0.75s all;
}


div#Contenu div.Boitegauche div#Annonce{
	background-color: #C4C4C4;
	width: 99%;
	margin-top: 0.8%;
	margin-left: 0.9%;
	height: 133px;
}

div#Contenu div.Boitegauche div#Annonce2{
	background-color: #C4C4C4;
	width: 99%;
	margin-left: 0.9%;
	height: 133px;
}

div#Contenu div.Boitegauche div#Annonce3{
	background-color: #C4C4C4;
	margin-left: 0.9%;
	width: 99%;
	height: 133px;
}

div#ContenuActu h1{
	color: white;
}

p#Copyright{
	color: white;
	margin-left: 40%;
}

/*p.salut{
	color: #ffffff;
	background-color: #E21C44;
}

p.ilovecss{
	color: #000000;
	font-weight: bold;
	font-size: 50px;
	padding-left : 200px;
}

body{
	background-color: #777777
}
*/

Merci d'avance pour vos réponse

-
Edité par Sn0wFR 8 février 2018 à 19:25:59

Sn0wFR

8 février 2018 à 19:25:12

tartenpion

9 février 2018 à 15:11:43

Salut compatriotes Loleur.

Voilà Monsieur :

https://codepen.io/anon/pen/MQpKgw

Petite remarque : attention au pixel non pair pour le responsive !

+++

Un geste, une pensée, tout peut faire germer une idée.

mootookoi