List UL en dehors de div

Bonjour,

J'ai le code suivant :

 <div class="menu">
                <ul class="menu_list">
                        <li>le menu du jour -----</li>
                        <li>végétarien</li>
                        <li>viande</li>
                        <li>poisson</li>
                        <li>accompagnements</li>
                </ul>
        </div>

.menu{
                        border: dotted brown;
                        background-color: green;

                }

                ul.menu_list {
                        list-style-type: none;
                        padding-left: 0;
                        margin-left: O;
                }

                .menu_list li{
                        float: left;
                        padding-left: 5px;
                        padding-right: 5px;
                }       

Cela donne donc un menu horizontal (les liens ne figurent pas dans le code copié ci-dessus).

J'aurais aimé que la liste (horizontale) se trouve dans la div "menu" qui a une couleur de fond etc.

Or, sur ma page web, j'ai un rectangle vert avec en dessous la liste. Comment faire pour que la liste se trouve dans le rectangle ?

Merci,

Igor

En mettant tes <li> en float, ceux-ci deviennent flottants (logique !). Du coup, ils sortent du flux en ne sont plus liés aux parents. Sans faire de test, je vois 2 solutions de bases pour faire ce que tu veux :
1. Ne pas mettre tes <li> en float, mais en display: inline-block. ils seront ainsi gérés comme des caractères de texte alignés sur une ligne.
Avantage : ne sort pas tes élément du flux, toujours risque de soucis pour qui ne maîtrise pas, et permet de gérer l’alignement vertical.
Inconvénient : les espaces dans ton code entre les <li> risquent d'être interprétés (il existe des contournements à ce problème)
2. Lire ces 2 articles bien faits pour comprendre :
- http://www.alsacreations.com/article/lire/7-depassement-flottants-css.html
- http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html
et choisir la solution qui te convient…
Modifié par Derwoed (06 Dec 2013 - 16:54)

Merci beaucoup !