Bonjour, j'ai un problème; j'ai voulu mettre un menu sous forme de bouton, j'ai donc créer 4 boutons avec le même css qui sont dans une div appelée rubriques:

/HTML/

<div id="rubriques">
      <ul>
                    <li>  <a href="./ordinateur/asus.html" class="bouton"> <span class="fa fa-laptop"></span>Asus</a> </li>
                    <li> <a href="./ordinateur/acer.html" class="bouton"> <span class="fa fa-laptop"></span>Acer</a> </li>
                    <li> <a href="./ordinateur/hp.html" class="bouton"> <span class="fa fa-laptop"></span>HP</a> </li>
                    <li> <a href="./ordinateur/dell.html" class="bouton"> <span class="fa fa-laptop"></span>Dell</a> </li>                   
        </ul>
                    
  </div>

/CSS/

#rubriques
{width: 300px;
height:600px;
background-color:;
display: block;
float:left;
margin-top:10px;
margin-left:10px;
font-family:Calibri, sans-serif;
color:BurlyWood;
}

span
{
margin-right: 15px;
}

a.button
{
 display:block;
color:#555555;
font-weight:bold;
height:30px;
line-height:29px;
margin-bottom:14px;
text-decoration:none;
width:191px;
}
a.bouton1:hover {
background: red;
}

Or cela s'affiche sous forme de puces:

Pouvez-vous me dire où je me suis trompé et comment je peux faire pour avoir vraiment des boutons les uns en dessous des autres?

Merci

-
Edité par GwendolineChauvel 23 avril 2017 à 12:35:53

Bonjour,

tu as utilisé une liste (ul/li), donc c'est normal que tu aies des puces Pour les enlever : #rubriques ul { list-style: none; }.

Si ton problème est résolu, pense à marquer le sujet comme tel, merci d'avance

Moi je suis étonné que les bouton s'affiche selon le css étant donné qu'il est écrit :

 <li>  <a href="./ordinateur/asus.html" class="bouton"> <span class="fa fa-laptop"></span>Asus</a> </li>

class="bouton"

et dans le css :

a.button 
{
    display:block;
    color:#555555;
    font-weight:bold;
    height:30px;
    line-height:29px;
    margin-bottom:14px;
    text-decoration:none;
    width:191px;
}

a.button