[Résolu] Menu horizontal qui s'adapte à la résolution de l'écran

Bonjour,

Je sollicite votre aide car j'ai essayé de créer un menu horizontal qui s'adapte à la résolution de l'écran mais je n'y parviens pas

Le problème est que lorsque je réduis la fenêtre du navigateur (google chrome) . Les éléments entre les balises <li> se mettent les uns sous les autres , ils ne restent pas sur une seule et même ligne

Voici le code html :

 <div id="menu"> 
            
         <ul>
        <li> <a href="test.php">Accueil</a> </li>         
        <li> <a href="test.php"> Element 1</a> </li>        
        <li> <a href="test.php"> Element 2</a> </li>        
        <li> <a href="test.php"> Element 3</a> </li>   
        <li> <a href="test.php"> Element 4 </a> </li>
         </ul>
            
        </div>

Et le code css :

#menu
{
    width : 65%;
    margin-left: 17%;
}

ul
{
    list-style-type: none; /* Pour enlever les puces de la liste */
    padding : 0 ; /* Marge intérieure à 0 */
    width : auto;   
}
                           
li
{
   background: url("images/image.jpg") ;
   display : inline; /* Pour aligner les cases */
   padding :0 6%; /* pour élargir l'intérieur des cases */
   margin : 0 0.1%; /* Pour espacer les cases */
}

Voilà , j'espère avoir été assez clair dans l'explication de mon problème .
Merci de m'avoir lu

Ps : Une image du problème

Bonjour,

As-tu essayé de donné un width à ton ul en % et pareil pour tes li ? (margin*2+border*2+padding*2+width = 100%)
Ensuite n'oublie pas de donner quand même un min-width à un des parents.
Et est ce que ton menu est un fils direct de body? Est-ce-que tu as appris comment construire une structure?

Merci pour ta réponse !

Le problème s'est résolut en mettant des min-width pourquoi je n'y ai pas pensé

Sinon mon div menu est dans le body juste avant il y a un div pour la banniere .
POur la structure d'une liste oui j'ai appris en regardant des tutos et plusieurs exemples mais je n'en avait jamais fait .

En tout cas le problème est résolut . Je te remercie !
Je vais pouvoir avancer

D'accord tant mieux mais sinon je parlais de structurer ton code html c'est à dire faire une hiérarchie de tes différents éléments et pas tout mettre simplement les uns à la suite des autres.

Je ne comprends pas bien ..
Moi je fais des div et ensuite avec le css je les places correctement c'est pas la bonne façon de faire ?

J'ai cherché un tuto qui en parle j'ai trouvé que celui la mais ca devrait bien t'aider quand tu commencera à avoir beaucoup d’élément à placer tu n'auras pas besoin de tous les positionner en css puisqu'ils seront directement bien placé grâce au propriétés du parent.

http://www.siteduzero.com/informatique/tutoriels/apprenez-a-creer-votre-site-web-avec-html5-et-css3/les-balises-structurantes-de-html5

il est fait pour html5 mais tu peux très bien remplacer les balises par <div id="head"> par exemple dans le cas ou ta page ne l'est pas.

Salut,

Effectivement le tuto m'a filé un bon petit coup de pouce !

a écrit :
il est fait pour html5 mais tu peux très bien remplacer les balises par <div id="head"> par exemple dans le cas ou ta page ne l'est pas.

Oui je procédais de cette manière auparavant
En tout cas merci pour le coup de pouce et désolé du retard !

Maintenant je cherche la meilleure façon pour y ajouter un diaporama ^^