Menu avec image

Fabien57
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

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
Auteur

Salut,

Oh oui effectivement ça fonctionne niquel !

Merci pour ton aide :-)

popotte

De rien ;)

Un conseil pour tes prochains projets, regardes un peu le système de flexbox et de grid :p

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

Et au passage y a pas mal de doc utile dans le menu de gauche :p