28234 sujets

CSS et mise en forme, CSS3

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

Bonjour, Smiley biggrin

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 Smiley decu

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 Smiley bawling

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 Smiley cligne

Ps : Une image du problème upload/49891-pb.jpg
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 ! Smiley biggrin

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

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 . Smiley lol

En tout cas le problème est résolut . Je te remercie !
Je vais pouvoir avancer Smiley biggrin
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 ^^
Sujet clos
Aller à