Votre question

Menu déroulant récalcitrant (mise en page avec css)

Tags :
  • Php
  • CSS
  • Programmation
Dernière réponse : dans Programmation
21 Octobre 2011 07:49:08

Bonjour,
je me suis remis à la création de mon site après destruction de celui par mon ancien hébergeur. Et je retombe pour la deuxième fois sur un problème de mise en page de mon menu déroulant. Ce menu est codé en php et est mis en forme en css, mais alors que le code ne renvoie pas d'erreur, le menu se colle à gauche de la page. Voulant le centrer, je n'ai pas trouvé mieux que de mettre des marges définies en pixel, ce qui est mauvais (si résolution différente, le menu s'affichera mal). *

voici le menu en php :
  1. <ul id='menu'>
  2. <li><a href="http://localhost/presentation/index.php" ><img src="http://localhost/images/presentation.jpg" style="display:inline" border="0"/>Présentation</a>
  3. <ul>
  4. <li><a href="http://localhost/presentation/minecraft.php" target="_self">Minecraft</a></li>
  5. <li><a href="http://localhost/presentation/edenwaith.php" target="_self">Edenwaith</a></li>
  6. <li><a href="http://localhost/presentation/staff.php" target="_self">Staff</a></li>
  7. <li><a href="http://localhost/presentation/galerie.php" target="_self">Galerie</a></li>
  8. </ul>
  9. </li>
  10. <li><a href="http://localhost/guides/index.php" ><img src="images/guides.jpg" style="display:inline" border="0"/>Guides</a>
  11. <ul>
  12. <li><a href="http://localhost/guides/crafts.php" target="_self">Crafts</a></li>
  13. <li><a href="http://localhost/guides/commandes.php" target="_self">Commandes</a></li>
  14. <li><a href="http://localhost/guides/plugins.php" target="_self">Plugins</a></li>
  15. <li><a href="http://localhost/guides/mobs.php" target="_self">Mobs</a></li>
  16. </ul>
  17. </li>
  18. <li><a href="http://localhost/forum/index.php" ><img src="images/forum.jpg" style="display:inline" border="0"/>Forum</a>
  19. <li><a href="http://localhost/rejoindre/index.php" ><img src="images/rejoindre.jpg" style="display:inline" border="0"/>Nous rejoindre</a>
  20. <ul>
  21. <li><a href="http://localhost/rules.php" target="_self">Règles</a></li>
  22. <li><a href="http://localhost/forum/member.php?action=register" target="_self">S'enregistrer</a></li>
  23. </ul>
  24. </li>
  25. <li><a href="http://localhost/assistance/index.php" ><img src="http://localhost/images/help.jpg" style="display:inline" border="0"/>Assistance</a>
  26. <ul>
  27. <li><a href="http://localhost/assistance/faq.php" target="_self">FAQ</a></li>
  28. <li><a href="http://localhost/forum/forumdisplay.php?fid=9" target="_self">Aide sur le forum</a></li>
  29. <li><a href="http://localhost/assistance/contact.php" target="_self">Nous contacter</a></li>
  30. </ul>
  31. </li>
  32. <li><a href="#" ><img src="http://localhost/images/cartes.jpg" style="display:inline" border="0"/>Cartes</a>
  33. <ul>
  34. <li><a href="http://omega.dedicraft.fr:4565" target="_self">Edenwaith</a></li>
  35. </ul>
  36. </li>
  37. <li><a href="http://localhost/magasin/index.php" ><img src="http://localhost/images/magasin.jpg" style="display:inline" border="0"/>Magasin</a>
  38. <ul>
  39. <li><a href="http://localhost/magasin/don.php" target="_self">Don</a></li>
  40. <li><a href="http://localhost/magasin/achat.php" target="_self">Achats</a></li>
  41. </li>
  42. </ul>
  43. </ul>


et voici le css correspondant :
  1. #menu, #menu ul /* Liste */
  2. {
  3. padding : 0; /* pas de marge intérieure */
  4. margin : 0; /* ni extérieure */
  5. list-style : none; /* on supprime le style par défaut de la liste */
  6. line-height : 30px; /* on définit une hauteur pour chaque élément */
  7. text-align : center; /* on centre le texte qui se trouve dans la liste */
  8. }
  9.  
  10. #menu /* Ensemble du menu */
  11. {
  12. font-weight : bold; /* on met le texte en gras */
  13. font-family: "Lucida Blackletter"; /* police du texte */
  14. font-size : 16px; /* hauteur du texte : 16 pixels */
  15. vertical-align: middle;
  16. margin-left: auto;
  17. margin-right: auto;
  18. min-width: 450px;
  19. }
  20.  
  21. #menu a /* Contenu des listes */
  22. {
  23. display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  24. padding : 0; /* aucune marge intérieure */
  25. background : #000; /* couleur de fond */
  26. color : #fff; /* couleur du texte */
  27. text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
  28. width : 144px; /* largeur */
  29. }
  30.  
  31. #menu li /* Elements des listes */
  32. {
  33. float : left;
  34. }
  35.  
  36. #menu li ul /* Sous-listes */
  37. {
  38. position: absolute; /* Position absolue */
  39. width: 144px; /* Largeur des sous-listes */
  40. left: -999em; /* Hop, on envoie loin du champ de vision */
  41. }
  42.  
  43. #menu li ul ul
  44. {
  45. margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
  46. }
  47.  
  48. #menu a:hover /* Lorsque la souris passe sur un des liens */
  49. {
  50. color: #37873D; /* couleur du texte */
  51. background: #C3C2C2; /* couleur du fond */
  52. }
  53.  
  54. #menu li:hover ul ul, #menu li.sfhover ul ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  55. {
  56. left: -999em; /* On expédie les sous-sous-listes hors du champ de vision */
  57. }
  58.  
  59. #menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
  60. {
  61. left: auto; /* Repositionnement normal */
  62. min-height: 0; /* Corrige un bug sous IE */
  63. }


Merci d'avoir lu.

Cordialement,
Unadrielas

Autres pages sur : menu deroulant recalcitrant mise page css

21 Octobre 2011 09:05:11

Bonjour,

Oui, t'as raison, ça s'affiche assez mal !
Citation :
Ce menu est codé en php et est mis en forme en css, mais alors que le code ne renvoie pas d'erreur, le menu se colle à gauche de la page. Voulant le centrer, je n'ai pas trouvé mieux que de mettre des marges définies en pixel, ce qui est mauvais (si résolution différente, le menu s'affichera mal).
Je pense que si le centrage doit se faire sur toutes les résolutions, en pixels c'est pas terrible, le mieux est de le faire en %, par exemple : width:20%;margin-left:auto;margin-right:auto;
Un conseil toutefois; ton menu fait partie d'un tout, et c'est ce "tout" qu'il faut centrer, pas le menu par lui-même ! Capichi ?


C'est vrai que ton menu est assez basic, ce que je te suggère c'est d'aller sur DynamicDrive , au moins, tu trouveras certainement ton bonheur !

Bon courage.

A+

Masterfree
a c 232 L Programmation
21 Octobre 2011 09:06:01

Salut,

Le menu s'affiche bien au milieu de la page chez moi en mettant ton code ?
Contenus similaires
21 Octobre 2011 10:09:00

Oui, mais avec ce fragment de css, il n'apparait que les noms des menus. J'ajoute le reste du css sur le premier post

@masterfree : Merci, je vais voir ça
21 Octobre 2011 11:21:46

Unadrielas a dit :
Oui, mais avec ce fragment de css, il n'apparait que les noms des menus. J'ajoute le reste du css sur le premier post

@masterfree : Merci, je vais voir ça
Exemple :
CSS :
  1. #menu{
  2. width:20%;
  3. margin-left:auto;
  4. margin-right:auto;
  5. }
  6. #menu .menuitem{
  7. ...
  8. ...
  9. }

HTML :
  1. <div id="menu">
  2. <ul class="menuitem">
  3. <li>......</li>
  4. </ul>
  5. </div>


En gros, c'est ce qu'il faut savoir et c'est le plus simple.
Après, c'est à toi à mettre à formater le menu !
a c 232 L Programmation
21 Octobre 2011 11:37:05

Ca il l'a déjà fait.
Le soucis, c'est qu'il met ses <li> en float et ses <a> en display block, du coup le <ul> n'est plus centré.
21 Octobre 2011 12:00:28

OmaR a dit :
Ca il l'a déjà fait.
Le soucis, c'est qu'il met ses <li> en float et ses <a> en display block, du coup le <ul> n'est plus centré.
Je lui ai précisé que son menu devait être dans une boîte et c'est elle qui doit être positionnée sur la page !:p 
Apparemment, il l'a pas fait sinon il dirait si ça marche ou pas !
C'est pas ton avis ?:) 

Je suis en train de lui faire un menu vertical à plusieurs niveaux, ça lui servira peut-être ! ;) 

a c 232 L Programmation
21 Octobre 2011 12:15:29

Ca change rien de mettre le menu dans une boite, si tu mets le menu en margin:auto;, il va être centré.
Mais comme j'ai expliqué, il a mis des options à l'intérieur de son menu qui l'ont rendu incentrable.
En jouant un peu avec les options, on peut le recentrer, mais j'ai pas été satisfait par ce que j'ai fait, et j'ai pas plus de temps à consacrer.
21 Octobre 2011 12:45:52

OmaR a dit :
Ca change rien de mettre le menu dans une boite, si tu mets le menu en margin:auto;, il va être centré.
Mais comme j'ai expliqué, il a mis des options à l'intérieur de son menu qui l'ont rendu incentrable.
En jouant un peu avec les options, on peut le recentrer, mais j'ai pas été satisfait par ce que j'ai fait, et j'ai pas plus de temps à consacrer.
D'accord avec toi pour le margin mais si tu ne donnes pas une valeur de largeur de la boite contenant le menu, ça na donnera rien !

Et franchement,jouer un peu avec les options comme tu dis n'est pas franchement à préconiser, surtout comme ça, parce que lè, en faisant ça tu risque de centrer dans l'écran !;)
Il y a certainement des solutions auxquelles on ne pense pas forcément ! Ca m'est arrivé et c'est pour ça que je t'en parle.
Moi aussi, je jouais sur différents points pour ça colle, mais après recherches et doc, j'ai trouvé plus simple pour le même résultat !


21 Octobre 2011 14:09:15

Après avoir lu vos réponses, j'ai relu mon code. Je ne sais pas comment je pourrais retirer mon display : block; et mon float : left; sachant que sans eux, le menu pourra être, certes centré, mais vertical.
21 Octobre 2011 15:01:46

Unadrielas a dit :
Après avoir lu vos réponses, j'ai relu mon code. Je ne sais pas comment je pourrais retirer mon display : block; et mon float : left; sachant que sans eux, le menu pourra être, certes centré, mais vertical.
Non, n'y touche surtout pas, le prb du centrage est ailleurs !

a c 232 L Programmation
21 Octobre 2011 15:37:36

Mouais, normalement on ne fait pas du float:left avec les <li>, mais plutôt du display:inline pour faire un menu vertical.
21 Octobre 2011 17:06:01

Si ça peut te servir Unadrielas, bien-sûr c'est du vite fait, mais tu auras un petit aperçu !
menu vertical à niveaux

Bonne continuation.
Enjoy !
21 Octobre 2011 17:38:42

ah, j'ai compris, nous ne sommes pas sur la même longueur d'onde. Mon projet est un menu Horizontal déroulant, et non vertival ;) 
D'où le float : left; :) 
21 Octobre 2011 18:39:50

OK !
Je verrais ça demain !

A+
24 Octobre 2011 23:08:13

donc de mon côté je cherche toujours, et le menu est visible à ce lien : http://tescraft.dyndns.org/
sous le carrousel.
Le site est ouvert la journée, en fonction de l'état de ma machine. :) 

Tout ce site est un brouillon, une zone de tests divers et variés, donc ne prêtez pas attention au style ^^
25 Octobre 2011 07:15:10

Unadrielas a dit :
donc de mon côté je cherche toujours, et le menu est visible à ce lien : http://tescraft.dyndns.org/
sous le carrousel.
Le site est ouvert la journée, en fonction de l'état de ma machine. :) 

Tout ce site est un brouillon, une zone de tests divers et variés, donc ne prêtez pas attention au style ^^
T'es sûr que ce lien marche ?
Parce que chez moi, avec FF, la connexion a échoué !:( 

Je t'avais dit que je verrais le menu horizontal, mais je n'arrive pas trop à mettre les flèches au bon endroit. Comme c'est du bricolage ! :ange: 

Pour infos : j'ai relu ton 1er post et tu parles de centrage, mais il me semble que je t'avais donné une petite solution non ?

25 Octobre 2011 18:18:15

En même temps, à 7 heure du mat' pendant les vacances, je dors :D  donc la machine est au repos.
à l'heure de ce message et jusqu'à minuit, le site est disponible (sauf problème de routeur, mais c'est peu probable).

J'ai essayé les diverses solutions proposée, mais rien, le menu se colle à gauche et n'est bouge pas. Le seul truc qui fonctionne à l'heure actuelle est le margin-left: ....px; et le margin-right: ....px; mais ça ne centre que sur les résolutions identiques aux miennes (1600*900)

PS : Attention, vidéo automatique plus bas sur la page ^^
a c 232 L Programmation
25 Octobre 2011 18:35:34

Avec quelques petits changements par rapport à ton code Unadrielas, j'arrive à avoir ton menu centré. Je te recopie tout.
Le CSS :
  1. #menu, #menu ul /* Liste */
  2. {
  3. padding : 0; /* pas de marge intérieure */
  4. margin : 0; /* ni extérieure */
  5. list-style : none; /* on supprime le style par défaut de la liste */
  6. line-height : 30px; /* on définit une hauteur pour chaque élément */
  7. text-align : center; /* on centre le texte qui se trouve dans la liste */
  8. }
  9.  
  10. #menu /* Ensemble du menu */
  11. {
  12. font-weight : bold; /* on met le texte en gras */
  13. font-family: "Lucida Blackletter"; /* police du texte */
  14. font-size : 16px; /* hauteur du texte : 16 pixels */
  15. vertical-align: middle;
  16. margin-left: auto;
  17. margin-right: auto;
  18. min-width: 450px;
  19. }
  20.  
  21. #menu a /* Contenu des listes */
  22. {
  23. display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  24. padding : 0; /* aucune marge intérieure */
  25. background : #000; /* couleur de fond */
  26. color : #fff; /* couleur du texte */
  27. text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
  28. width : 144px; /* largeur */
  29. }
  30.  
  31. #menu li /* Elements des listes */
  32. {
  33. display: inline-block;
  34. vertical-align: top;
  35. }
  36.  
  37. #menu li ul /* Sous-listes */
  38. {
  39. display: none;
  40. width: 144px; /* Largeur des sous-listes */
  41. }
  42.  
  43. #menu li ul ul
  44. {
  45. margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
  46. }
  47.  
  48. #menu a:hover /* Lorsque la souris passe sur un des liens */
  49. {
  50. color: #37873D; /* couleur du texte */
  51. background: #C3C2C2; /* couleur du fond */
  52. }
  53.  
  54. #menu li:hover ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  55. {
  56. display: block;
  57. }


Le HTML ne change pas.

Testé avec Firefox 7, IE 9, Chrome 14, Opéra 11 et ça fonctionne.

Le seul soucis, c'est qu'il y a un petit espace blanc entre les éléments s'ils ont un sous-menu. J'ai pas réussi à l'enlever.
25 Octobre 2011 19:07:36

Unadrielas a dit :
En même temps, à 7 heure du mat' pendant les vacances, je dors :D  donc la machine est au repos.
à l'heure de ce message et jusqu'à minuit, le site est disponible (sauf problème de routeur, mais c'est peu probable).

J'ai essayé les diverses solutions proposée, mais rien, le menu se colle à gauche et n'est bouge pas. Le seul truc qui fonctionne à l'heure actuelle est le margin-left: ....px; et le margin-right: ....px; mais ça ne centre que sur les résolutions identiques aux miennes (1600*900)

PS : Attention, vidéo automatique plus bas sur la page ^^
Oui, c'est bien comme tu fais mais si c'est une autre résolution, là y a un blème.
Il faut que tu spécifies la largeur du menu (en % de préférence) :
  1. width:80%;
  2. margin-left:auto;
  3. margin-right:auto;


27 Octobre 2011 10:49:30

masterfree a dit :
Unadrielas a dit :
En même temps, à 7 heure du mat' pendant les vacances, je dors :D  donc la machine est au repos.
à l'heure de ce message et jusqu'à minuit, le site est disponible (sauf problème de routeur, mais c'est peu probable).

J'ai essayé les diverses solutions proposée, mais rien, le menu se colle à gauche et n'est bouge pas. Le seul truc qui fonctionne à l'heure actuelle est le margin-left: ....px; et le margin-right: ....px; mais ça ne centre que sur les résolutions identiques aux miennes (1600*900)

PS : Attention, vidéo automatique plus bas sur la page ^^
Oui, c'est bien comme tu fais mais si c'est une autre résolution, là y a un blème.
Il faut que tu spécifies la largeur du menu (en % de préférence) :
  1. width:80%;
  2. margin-left:auto;
  3. margin-right:auto;




Oui oui, j'ai essayé, mais ça ne fonctionne pas à cause du float: left; et si je l'enlève, c'est un menu vertical qui apparait, qui est assez moche en passant xD
27 Octobre 2011 10:50:44

OmaR a dit :
Avec quelques petits changements par rapport à ton code Unadrielas, j'arrive à avoir ton menu centré. Je te recopie tout.
Le CSS :
  1. #menu, #menu ul /* Liste */
  2. {
  3. padding : 0; /* pas de marge intérieure */
  4. margin : 0; /* ni extérieure */
  5. list-style : none; /* on supprime le style par défaut de la liste */
  6. line-height : 30px; /* on définit une hauteur pour chaque élément */
  7. text-align : center; /* on centre le texte qui se trouve dans la liste */
  8. }
  9.  
  10. #menu /* Ensemble du menu */
  11. {
  12. font-weight : bold; /* on met le texte en gras */
  13. font-family: "Lucida Blackletter"; /* police du texte */
  14. font-size : 16px; /* hauteur du texte : 16 pixels */
  15. vertical-align: middle;
  16. margin-left: auto;
  17. margin-right: auto;
  18. min-width: 450px;
  19. }
  20.  
  21. #menu a /* Contenu des listes */
  22. {
  23. display : block; /* on change le type d'élément, les liens deviennent des balises de type block */
  24. padding : 0; /* aucune marge intérieure */
  25. background : #000; /* couleur de fond */
  26. color : #fff; /* couleur du texte */
  27. text-decoration : none; /* on supprime le style par défaut des liens (la plupart du temps = souligné) */
  28. width : 144px; /* largeur */
  29. }
  30.  
  31. #menu li /* Elements des listes */
  32. {
  33. display: inline-block;
  34. vertical-align: top;
  35. }
  36.  
  37. #menu li ul /* Sous-listes */
  38. {
  39. display: none;
  40. width: 144px; /* Largeur des sous-listes */
  41. }
  42.  
  43. #menu li ul ul
  44. {
  45. margin : -22px 0 0 144px ; /* On décale les sous-sous-listes pour qu'elles ne soient pas au dessus des sous-listes */
  46. }
  47.  
  48. #menu a:hover /* Lorsque la souris passe sur un des liens */
  49. {
  50. color: #37873D; /* couleur du texte */
  51. background: #C3C2C2; /* couleur du fond */
  52. }
  53.  
  54. #menu li:hover ul /* Sous-sous-listes lorsque la souris passe sur un élément de liste */
  55. {
  56. display: block;
  57. }


Le HTML ne change pas.

Testé avec Firefox 7, IE 9, Chrome 14, Opéra 11 et ça fonctionne.

Le seul soucis, c'est qu'il y a un petit espace blanc entre les éléments s'ils ont un sous-menu. J'ai pas réussi à l'enlever.


Merci OmaR, je vais l'installer et tenter de corriger cette petite erreur.
Je vous tiens au courant :) 

Édit : Le menu est en effet centré, mais les sous menus chassent le reste de la page. Peut-être qu'en trouvant un compromis on devrait y arriver.
Je vous tiens au courant.
27 Octobre 2011 12:13:17

Essaye de remplacer ça par :
  1. display: inline
.
Je ne suis pas très calé mais personnellement, je ne vois que ça pour avoir le menu sur toute la ligne.
27 Octobre 2011 13:25:29

masterfree a dit :
Essaye de remplacer ça par :
  1. display: inline
.
Je ne suis pas très calé mais personnellement, je ne vois que ça pour avoir le menu sur toute la ligne.


Le display: inline; ferait que le chaque case du menu serait le texte/lien, il prendrait sa taille et son alignement. Ce n'est pas la solution ici. L'alignement ici est bon, le centrage aussi. J'ai corrigé le problème de chasse de la page par un prosition: absolute; , mais il reste encore l'espace entre deux blocs.
a c 232 L Programmation
27 Octobre 2011 14:10:43

Bon, je suis reparti du début, c'est plus simple...

Le CSS:
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. }
  5.  
  6. img {
  7. border-width: 0;
  8. }
  9.  
  10. #menu {
  11. margin: 0 auto;
  12. text-align: center;
  13. font-size: 16px;
  14. font-family: "Lucida Blackletter";
  15. font-weight: bold;
  16. width: 1010px;
  17. }
  18.  
  19. #menu ul {
  20. overflow: auto;
  21. }
  22.  
  23. #menu li {
  24. list-style: none inside none;
  25. float: left;
  26. line-height: 30px;
  27. }
  28.  
  29. #menu li a {
  30. display: block;
  31. width: 144px;
  32. color: #FFF;
  33. background-color: #000;
  34. text-decoration: none;
  35. }
  36.  
  37. #menu li a:hover {
  38. background: #C3C2C2;
  39. color: #37873D;
  40. }
  41.  
  42. #menu ul ul {
  43. display: none;
  44. clear: left;
  45. position: absolute;
  46. }
  47.  
  48. #menu ul ul li {
  49. float: none;
  50. }
  51.  
  52. #menu ul li:hover ul {
  53. display: block;
  54. }


Et le HTML (tu avais quelques erreurs dedans...):
  1. <div id="menu">
  2. <ul>
  3. <li>
  4. <a href="http://localhost/presentation/index.php" ><img src="http://localhost/images/presentation.jpg" />Présentation</a>
  5. <ul>
  6. <li><a href="http://localhost/presentation/minecraft.php" target="_self">Minecraft</a></li>
  7. <li><a href="http://localhost/presentation/edenwaith.php" target="_self">Edenwaith</a></li>
  8. <li><a href="http://localhost/presentation/staff.php" target="_self">Staff</a></li>
  9. <li><a href="http://localhost/presentation/galerie.php" target="_self">Galerie</a></li>
  10. </ul>
  11. </li>
  12. <li>
  13. <a href="http://localhost/guides/index.php" ><img src="images/guides.jpg" />Guides</a>
  14. <ul>
  15. <li><a href="http://localhost/guides/crafts.php" target="_self">Crafts</a></li>
  16. <li><a href="http://localhost/guides/commandes.php" target="_self">Commandes</a></li>
  17. <li><a href="http://localhost/guides/plugins.php" target="_self">Plugins</a></li>
  18. <li><a href="http://localhost/guides/mobs.php" target="_self">Mobs</a></li>
  19. </ul>
  20. </li>
  21. <li>
  22. <a href="http://localhost/forum/index.php" ><img src="images/forum.jpg" />Forum</a>
  23. </li>
  24. <li>
  25. <a href="http://localhost/rejoindre/index.php" ><img src="images/rejoindre.jpg" />Nous rejoindre</a>
  26. <ul>
  27. <li><a href="http://localhost/rules.php" target="_self">Règles</a></li>
  28. <li><a href="http://localhost/forum/member.php?action=register" target="_self">S'enregistrer</a></li>
  29. </ul>
  30. </li>
  31. <li>
  32. <a href="http://localhost/assistance/index.php" ><img src="http://localhost/images/help.jpg" />Assistance</a>
  33. <ul>
  34. <li><a href="http://localhost/assistance/faq.php" target="_self">FAQ</a></li>
  35. <li><a href="http://localhost/forum/forumdisplay.php?fid=9" target="_self">Aide sur le forum</a></li>
  36. <li><a href="http://localhost/assistance/contact.php" target="_self">Nous contacter</a></li>
  37. </ul>
  38. </li>
  39. <li>
  40. <a href="#" ><img src="http://localhost/images/cartes.jpg" />Cartes</a>
  41. <ul>
  42. <li><a href="http://omega.dedicraft.fr:4565" target="_self">Edenwaith</a></li>
  43. </ul>
  44. </li>
  45. <li>
  46. <a href="http://localhost/magasin/index.php" ><img src="http://localhost/images/magasin.jpg" style="display:inline" border="0"/>Magasin</a>
  47. <ul>
  48. <li><a href="http://localhost/magasin/don.php" target="_self">Don</a></li>
  49. <li><a href="http://localhost/magasin/achat.php" target="_self">Achats</a></li>
  50. </ul>
  51. </li>
  52. </ul>
  53. </div>
29 Octobre 2011 13:38:43

Un grand bravo ! ;) 
Comme quoi il ne fallait pas grand chose pour bloquer, et en plus je n'avais pas assez prêté attention au html, qui était la cause du problème.

Je vous remercie OmaR, masterfree d'avoir apporté la solution à mon problème :) 

Édit : OmaR, le menu est en px, et non pas en %... Du coup sur mon Linux 15" ça marche moins bien, ça déborde un peu sur le côté ^^
a c 232 L Programmation
29 Octobre 2011 20:56:32

Bah j'ai repris les tailles que tu avais mis... tu voulais des menus de 144px (ou qlq chose comme ça).
Tu réduis un peu les menus, et tu peux réduire la largeur du bloc en même temps.
7 Novembre 2011 17:59:23

Correction apportée ! Il suffisait de mettre la largeur de page en pixel et non en pourcentage. Tout semble fonctionner, et le site sera en ligne pour la semaine : http://tescraft.le-web.net/

Merci à vous !
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS