bonjour,

Actuellement en terminal j'ai un site a créer à partir d'un cahier des charge donné par mon enseignant. Cependant j'ai un problème concernant les liens, je les ai créés ils fonctionnent mais je n'arrive pas à les mettre sous forme de boutton.

voici mon code pour mes liens :

<ul id="menu_horizontal">
                    <li><a href="menu principal.html">Menu principal</a></li>
                    <li><a href="CO2.html">Réduire les emissions de CO2</a></li>
                    <li><a href="Coton.html">Au fil du coton bio</a></li>
                    <li><a href="caoutchouc.html">Un caoutchouc en provenance d'Amazonie</a></li>
                    <li><a href="cuir.html">Un cuir végétal</a></li>
                    <li><a href="page chaussure femme.html"> chaussures femmes</a></li>
                    <li><a href="page chaussure homme.html"> chaussures hommes</a></li>
                </ul>

merci d'avance

Bonjour,

qu'est-ce que tu entends par "sous forme de bouton" ?

<a href="menuprincipal.html"><input type="button" value="Menu Principal"></a>

 essai un truc de genre ca devrai marcher comme tu veux

-
Edité par Mr_LeDeveloppeur 2 janvier 2018 à 12:58:29

daniel n'da hyonnelAkesse > ooooooh non, ça, jamais. On ne met pas d'<input> ou de <button> dans un <a>, c'est invalide. Source : https://www.w3.org/TR/html/textlevel-semantics.html#the-a-element (regarde "Content model", ça liste ce qu'on peut mettre dans un <a>).

Yo, je peux te proposer quelque-chose comme ceci :

<ul id="menu_horizontal">
    <li><a href="menu principal.html" class="menu">Menu principal</a></li>
    <li><a href="CO2.html" class="Réduire_emissions_CO2">Réduire les emissions de CO2</a></li>
    <li><a href="Coton.html" class="coton_bio">Au fil du coton bio</a></li>
    <li><a href="caoutchouc.html" class="caoutchouc_Amazonie">Un caoutchouc en provenance d'Amazonie</a></li>
    <li><a href="cuir.html" class="cuire">Un cuir végétal</a></li>
    <li><a href="page chaussure femme.html" class="chaussures_femmes"> chaussures femmes</a></li>
    <li><a href="page chaussure homme.html" class="chaussures_hommes"> chaussures hommes</a></li>
</ul>

.menu{
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: Source Sans Pro,sans-serif;
    font-size: 1vw;
    line-height: 20px;
    min-height: 30px;
    min-width: 30px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    text-align: center;
    white-space: nowrap;
    width: 7%;
    height: auto;
}

.reduire_emmissions_CO2{
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    border-top-style: solid;
    border-top-width: 1px;
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    font-family: Source Sans Pro,sans-serif;
    font-size: 1vw;
    line-height: 20px;
    min-height: 30px;
    min-width: 30px;
    padding-bottom: 4px;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 4px;
    text-align: center;
    white-space: nowrap;
    width: 7%;
    height: auto;
}

/*le même css pour les autres boutons  */

 J’espère que ça te conviendra 

Si jamais tu n'as pas compris ce que j'ai fais, j'ai simplement stylisé le texte en lui donnant une bordure.

Tu peux rajouter un :hover avec background-color transparent, je trouve que ça passe très bien. Bon codage à toi !

-
Edité par Clément Muth 2 janvier 2018 à 13:28:07