Menu

Comment coder la taille des boutons coté html ?

John - 22 sept. 2018 à 23:32 - Dernière réponse : telliak 3251 Messages postés mercredi 20 septembre 2006Date d'inscription 19 octobre 2018 Dernière intervention
- 11 oct. 2018 à 18:15
Bonjour,

j'ai écris ces lignes de codes pour avoir des boutons, mais lorsque je les passent en medium ils se positionnent sur deux lignes et si je les laissent comme tel, la ligne des boutons qui forme le menu de navigation devient trop petit.

Code avec ligne de bouton petit
  <!-- Menu navigateur -->

        <div>   
            
                <a class="button is-primary">Accueil</a>
                <a class="button is-primary">Plantes médicinales</a>
                <a class="button is-primary">Semence</a>
                <a class="button is-primary">Gemmothérapie</a>
                <a class="button is-primary">Huiles essentielles</a>
                <a class="button is-primary">Hydrolat / Fleur de Bach</a>
                <a class="button is-primary">Cosmétique</a>
                <a class="button is-primary">Complément alimentaire</a>
                <a class="button is-primary">Hydroponie / Aquaponie</a>
                <a class="button is-primary">Garden</a>
                <a class="button is-primary">La Ruche Écolocale</a>
        <!-- Menu navigateur -->

    </div>

Code avec ligne de bouton "medium" mais sur deux lignes
  <!-- Menu navigateur -->

        <div>   
            
                <a class="button is-primary is-medium">Accueil</a>
                <a class="button is-primary is-medium">Plantes médicinales</a>
                <a class="button is-primary is-medium">Semence</a>
                <a class="button is-primary is-medium">Gemmothérapie</a>
                <a class="button is-primary is-medium">Huiles essentielles</a>
                <a class="button is-primary is-medium">Hydrolat / Fleur de Bach</a>
                <a class="button is-primary is-medium">Cosmétique</a>
                <a class="button is-primary is-medium">Complément alimentaire</a>
                <a class="button is-primary is-medium">Hydroponie / Aquaponie</a>
                <a class="button is-primary is-medium">Garden</a>
                <a class="button is-primary is-medium">La Ruche Écolocale</a>
        <!-- Menu navigateur -->

    </div>


EDIT : Ajout des balises de code (jordane)

Je me suis inspirer des codes présent sur le site Bulma.io - mais le souci c'est qu'il n'y a pas de taille prédéfinis sur ces boutons - comment faire ?

Je suis débutant, cela ne fait que 3 jours que j'ai commencer à me mettre dans le html pour créer un site de A à Z - mais bon, si je peux déjà finir la page d'accueil se serait merveilleux !

Bien à vous
Afficher la suite 

Votre réponse

8 réponses

Meilleure réponse
telliak 3251 Messages postés mercredi 20 septembre 2006Date d'inscription 19 octobre 2018 Dernière intervention - 11 oct. 2018 à 13:46
1
Merci
Salut,
En avançant au radar, tu vas aller de recherches longues et inutiles en désillusions.
Ce n'est pas la bonne méthode pour apprendre HTML/CSS.
Tu devrais commencer par investir dans la lecture de quelques pages sur la création de site ici par exemple.

Merci telliak 1

Avec quelques mots c'est encore mieux Ajouter un commentaire

CCM a aidé 24711 internautes ce mois-ci

Bonjour, je n'ai pas 300 € a dépenser par module sur Open... sinon je me passerai de demande de renseignement ici !
telliak 3251 Messages postés mercredi 20 septembre 2006Date d'inscription 19 octobre 2018 Dernière intervention - 11 oct. 2018 à 18:15
1/ Je ne comprends pas : qui te demande 300 euros pour avoir accès au site que j'ai indiqué ? J'ai accédé aux modules sans jamais rien payer.
2/ Il existe bien d'autres sites permettant une formation de base efficace].
Je maintiens que tu vas perdre un temps considérable si tu ne commences pas par apprendre les bases : CSS versus HTML ; les balises, propriétés etc. et tu ne trouveras pas ici cette formation.
Commenter la réponse de telliak
jordane45 22919 Messages postés mercredi 22 octobre 2003Date d'inscriptionModérateurStatut 21 octobre 2018 Dernière intervention - 22 sept. 2018 à 23:52
0
Merci
Bonjour,

Vu le nombre de boutons que tu as et la taille des textes qui s'y trouvent... c'est normal que ça passe à la ligne lorsque tu arrives au bout de l'écran....
En plus le "medium" est vachement gros.... Donc à moins que tu ne fasses un site pour des personnes à vision déficiente.. je n'en vois pas l’intérêt.





Lorsque j'envoi l'index.html sur google pour voir que que je tape dans l'éditeur de code, les boutons en medium n'apparaissent pas du tput grand à l'écran, bien au contraire, c'est la raison pour laquelle je l'ai ai choisi car le small est vraiment tres petit (5 mm de hauteur / 1.5 cm de long) - alors que le medium fait 1 cm de hauteur.
Commenter la réponse de jordane45
0
Merci
Salut, HTML n'est pas fait pour l'apparence. Pour cela il faut ajouter CSS.
HTML = description de la page et ses contenus
CSS = mise en page et présentation

Cela à beaucoup d'avantages car CSS comme son nom l'indique (Cascading Style Sheet) permet de styler des éléments de la page en série sans avoir à refaire un CSS pour chaque bouton. De plus si l'on change l'un on peut garder l'autre et vice et versa.
edit pour 'is-primary'(bootstrap?) cela aurais du te mettre la puce à l'oreille.
Comme préciser je ne connais rien au code car cela fait juste quelques jours que je m'y colle, j'apprend au jour le jour. Concernant ce que tu dis sur le CSS, je comprend - par contre ce que je ne comprend pas, je n'ai rien écrit coté CSS dans mon éditeur de code VSCode - alors que du coté html j'ai écris les lignes présenter ci-dessus, et cela apparaît bien dans google lorsque j'envoie l'index.html dessus.

Tu me conseille d'éditer "is primary" (bootstrap) - quel procédure dois-je employer pour ce faire ?

Bien à toi
Commenter la réponse de soulfly