28172 sujets

CSS et mise en forme, CSS3

Mes boutons se chevauchent...

Bonjour,
Je souhaite créer une page menu avec des boutons sur mon site internet.
Mais hélas les boutons se chevauchent et je n'arrive pas à les en empêcher...
Voilà le code source de la page problématique :

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style>
body {
background-color:black;
padding:32px 0 32px 0;
text-align:center;
vertical-align:middle;
width:100%;
}

#corps {
background-color:tan;
margin:0 auto 0 auto;
width:90%;

-webkit-border-radius:16px;
-moz-border-radius:16px;
border-radius:16px;
border: 2px solid brown;
}

h1 {
background-color:brown;
color:tan;
border:1px solid navy;
padding:16px 0 16px 0;
margin:32px 0 32px 0;
}

a {
padding:8px;
}

a.bouton {
background:lightgrey;
color:navy;
text-decoration:none;

-webkit-border-radius:8px;
-moz-border-radius:8px;
border-radius:8px;
border: 2px solid grey;
}

a.bouton:hover {
background:white; color:navy;
}
</style>

</head>
<body>

<div id="corps">

<h1 class="titre">Menu</h1>

<a href="#p01" class="bouton">page 01</a>
<a href="#p02" class="bouton">page 02</a>
<a href="#p03" class="bouton">page 03</a>
<a href="#p04" class="bouton">page 04</a>
<a href="#p05" class="bouton">page 05</a>
<a href="#p06" class="bouton">page 06</a>
<a href="#p07" class="bouton">page 07</a>
<a href="#p08" class="bouton">page 08</a>
<a href="#p09" class="bouton">page 09</a>
<a href="#p10" class="bouton">page 10</a>
<a href="#p11" class="bouton">page 11</a>
<a href="#p12" class="bouton">page 12</a>
<a href="#p13" class="bouton">page 13</a>
<a href="#p14" class="bouton">page 14</a>
<a href="#p15" class="bouton">page 15</a>
<a href="#p16" class="bouton">page 16</a>
<a href="#p17" class="bouton">page 17</a>
<a href="#p18" class="bouton">page 18</a>
<a href="#p19" class="bouton">page 19</a>
<a href="#p20" class="bouton">page 20</a>
<a href="#p21" class="bouton">page 21</a>
<a href="#p22" class="bouton">page 22</a>
<a href="#p23" class="bouton">page 23</a>
<a href="#p24" class="bouton">page 24</a>
<a href="#p25" class="bouton">page 25</a>
<a href="#p26" class="bouton">page 26</a>
<a href="#p27" class="bouton">page 27</a>
<a href="#p28" class="bouton">page 28</a>
<a href="#p29" class="bouton">page 29</a>
<a href="#p30" class="bouton">page 30</a>

<br><br><br>
</div>
</body>
</html>
Ce serait bien si y'avait une image aussi Smiley ohwell
Sinon là, comme ça, je te dirais de mettre des margin-right dans ta classe .bouton
Modérateur
Bonjour,

c'est parce que tes boutons sont en «inline»,

ajoute ceci dans ta CSS:


.bouton {
  display: inline-block;
}


En inline-block, le padding sera inclu dans la hauteur de la ligne, et cela évitera le chevauchement.
Modifié par kustolovic (09 May 2019 - 13:18)
Sujet clos
Aller à