Menu avec image

Par Fabien57, il y a 3 ans

Les bases HTML/CSS

Décrivez ici votre problème ou ce que vous cherchez à faire.

CSS .menu { position:relative; } .ham { background-image: url(img/burg.png); background-repeat: no-repeat; text-decoration: none; float:right; position:relative; top:1%; right:1%; } HTML <header id="top" class="header"> <nav class="menu"> <ul> <li> <a href="#menu-menu" class="ham">menu</a>

Ce que je veux

Bonjour, je souhaite faire afficher un bouton menu avec le texte à sa gauche de l'image.

Ce que j'obtiens

Je n'y arrive pas car le titre 'menu' s'affiche sur l'image.

Help :-)

3 réponses

popotte, il y a 3 ans

Hello :)

Alors les float c'est très ancien comme système, le mieux serait d'utiliser flexbox ou grid

CSS .menu { width: 250px; } .menu_list { width: 100%; } .menu_list-item { display: flex; justify-content: space-between; align-items: center height: 35px; width: 100%; padding: 3px 10px; } HTML <header id="top" class="header"> <nav class="menu"> <ul class="menu_list> <li class="menu_list-item"> <img src="img/burg.png" height="25" width="25" /> <a href="#menu-menu" class="ham">menu</a> </li> </ul> </nav> </header>

Un truc dans le genre ça devrait le faire, après tu arranges les tailles et les padding :p

Fabien57, il y a 3 ans

Salut,

Oh oui effectivement ça fonctionne niquel !

Merci pour ton aide :-)