28106 sujets

CSS et mise en forme, CSS3

Bonsoir, je suis en train de créer un menu horizontale à l'aide de ul et de li, et je suis bien embêté Smiley eek car elle ne se place pas comme je le souhaiterais.
En effet, comme vous pouvez le voir elle se chevauche et çe ne rend pas ce que je souhaiterais.
upload/52072-lichevauch.png .

si je descend la petite maison, elle fait descendre le reste, et si je remonte les autres li la maison remonte.
J'ai essayé de les isoler par des classes et mon défaut demeure.
Je vous mets les code en suivant :
mon fichier html :
<nav>
<ul>
    <li ><a href="#"><img src="url.png"></a>
    <li><a href="#">About</a></li>
    <li><a href="#">Maintenance</a></li>
    <li><a href="#">Repair</a></li>
    <li><a href="#">Price List</a></li>
    <li><a href="#">Locations</a></li>
</ul> 
</nav>


mon fichier CSS
ul {
    background: linear-gradient(to bottom, rgba(221,223,227,1) 0%,rgba(245,246,246,1) 42%,rgba(245,246,246,1) 66%,rgba(184,186,198,1) 100%); /* W3C */;
    height: 50px; 
}
li {
    height: 100%;
    list-style: none;
    display: inline-block;
    border-right:2px solid white;
    padding-right: 15px;
    padding-left: 15px;
}
li:first-child
{border-left: 2px solid white;
padding-right: 15px;}


Qui pourrait m'éclairer ?

Cdt
Squeek
Modérateur
Salut

Il te manque une vertical-align sur ton li :
li {
    vertical-align:top;
}

En effet les inline-block s'alignent les un par rapport aux autres. Il faut leurs spécifier comment. Par défaut, vertical-align prend la valeur "baseline" ce qui fait s'aligner le bas de tes textes au bas de l'image. "Top" alignera le haut des blocs etc..

Bon code ! Smiley murf


PS : Ton premier li n'est pas fermé.
Modifié par _laurent (25 May 2015 - 23:34)
Merci, effectivement, là elle se cale bien reste plus qu'a jouer sur le padding-top pour le faire redescendre !