Partage

Probléme (CSS) de taille sur un de mes boutons

Sujet résolu
8 février 2018 à 19:25:12

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 MathieuFerreira6 8 février 2018 à 19:25:59

Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
certifiante
Financée
à 100%
9 février 2018 à 15:11:43

Salut compatriotes Loleur.

Voilà Monsieur : 

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

P
etite remarque : attention au pixel non pair pour le responsive !

+++
Un geste, une pensée, tout peut faire germer une idée.
9 février 2018 à 15:28:01

C'est le padding: 10%; qui donne cet effet.
pingouin != manchot
9 février 2018 à 15:55:16

Bonjour Matthieu,
nav.menu-nav ul li.Bouton{
display: inline-block;
padding: 0.25%
}
Tu devrais plutôt en pixel tes padding...
Bon courage

Probléme (CSS) de taille sur un de mes boutons

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
  • Editeur
  • Markdown