Liens décalés dans un menu avec firefox

Liens décalés dans un menu avec firefox - HTML/CSS - Programmation

Marsh Posté le 15-05-2005 à 11:12:54    

[b]Bonjour à tous !.
 
Je suis un débutant qui a besoin d'un peu d'aide.
J'ai un problème avec mon menu flottant a gauche, avec Internet Explorer tout marche bien, mais avec firefox il y a des liens qui sont décalés à droite du menu, je ne sais pas du tout comment faire pour que les liens du menu soient correctement là où il devrait être.
Si quelqu'un pouvait me dire comment faire, ça serait très gentil, car la je suis vraiment perdu !.
Je remercie par avance ce qui voudront bien m'aider.
Amicalement.
Julien.
Voici mon code.
 

Code :
  1. /* CSS Document */
  2. #deux { /*compteur colonne de gauche*/
  3. background: #FFCC00;
  4. float: left;
  5. width: 140px;
  6. height: 20px;
  7. text-align: center;
  8. }
  10. #trois { /*compteur colonne de gauche*/
  11. background: #FFCC00;
  12. float: left;
  13. width: 140px;
  14. height: 20px;
  15. text-align: center;
  16. }
  17. #quatre { /*compteur colonne de gauche*/
  18. background: #FFCC00;
  19. float: left;
  20. width: 140px;
  21. height: 20px;
  22. text-align: center;
  23. }
  24. #cinq { /*compteur colonne de gauche*/
  25. background: #FFCC00;
  26. float: left;
  27. width: 140px;
  28. height: 20px;
  29. text-align: center;
  30. }
  32. ul.liste, .liste li, .liste a {padding:0px ; margin:0px} /*met à 0 les marges internes et  
  34. externes de la liste et des liens */
  36. .liste {width :10.3em ; /* largeur de la liste : environs 15 lettres majuscules - voir em */
  37. list-style-type:none /* suppression des boutons CSS devant les items de la liste */
  38. background: #FF6600;  /*colonne de gauche de menu couleur orange */
  39. float: left; width: 140px; /* colonne de gauche du menu*/
  40. }
  41. .liste li a {border-left:0.5em solid #FF6600 ; /* crée un gros carré gris à gauche des liens non  
  43. survolés */
  44. background-color:#FF6600 ; /* couleur de fond des liens non survolés #CCD*/
  45. display:block; /* force le lien à prendre 100% de la largeur de la liste */
  46. padding-left:0.2em ; /* insère un espace entre le texte du lien et le gros carré gris */
  47. color:black ; /* la police des liens non survolés est noire */
  48. text-decoration:none ; /* on suprime le soulignement des liens */
  49. height:1.5em;} /* hauteur de chaque ligne. N'est indispensable que pour IE 5.0 et 5.5 */
  51. .liste li a:hover { /* style des liens lors du survol */
  52. background-color:black ; /* le fond du lien passe au noir */
  53. color:white ; /* le texte passe au blanc */
  54. border-left-color:red} /* crée un gros carré rouge à gauche des liens survolés */
Code :
  1. <ul class="liste">
  2. <div id="deux">compteur</div>
  3. <div id="trois">galeries photos</div>
  4. <li><a href="index.php">Accueil</a></li>
  5. <li><a href="nocario1.php">Nocario 1</a></li>
  6. <li><a href="nocario2.php">Nocario 2</a></li>
  7. <li><a href="nocario3.php">Nocario 3</a></li>
  8. <li><a href="pietricaggio1.php">Pietricaggio 1</a></li>
  9. <li><a href="pietricaggio2.php">Pietricaggio 2</a></li>
  10. <li><a href="pietricaggio3.php">Pietricaggio 3</a></li>
  11. <li><a href="erbaggio1.php">Erbaggio 1</a></li>
  12. <li><a href="erbaggio2.php">Erbaggio 2</a></li>
  13. <li><a href="michel.php">Saint-Michel</a></li>
  14. <li><a href="#">link</a></li>
  15. <li><a href="#">link</a></li>
  16. <li><a href="#">link</a></li>
  17. <li><a href="#">link</a></li>
  18. <li><a href="#">link</a></li>
  19. <li><a href="merci.php">Remerciements</a></li>
  20. <div id="quatre">histoire</div>
  21. <li><a href="#">link</a></li>
  22. <li><a href="#">link</a></li>
  23. <li><a href="#">link</a></li>
  24. <li><a href="#">link</a></li>
  25. <li><a href="#">link</a></li>
  26. <div id="cinq">la généalogie</div>
  27. <li><a href="#">link</a></li>
  28. <li><a href="#">link</a></li>
  29. <li><a href="#">link</a></li>
  30. <li><a href="#">link</a></li>
  31. <li><a href="#">link</a></li>
  32. <li><a href="#">link</a></li>
  33. <li><a href="#">link</a></li>
  34. <li><a href="#">link</a></li>
  35. <li><a href="#">link</a></li>
  36. </ul>


Voici une page de mon site.
http://ile.chrispat.free.fr/index.php  
 

Reply

Marsh Posté le 15-05-2005 à 11:12:54   

Reply

Marsh Posté le 16-05-2005 à 08:37:26    

Tu ne peux pas mettre de DIV dans une liste  [:airforceone]  
 
par compte tu peux mettre une liste dans un DIV  ;)  
 
ce qui donnerai:

Code :
  1. <div class="menu">
  2.     <p id="deux">compteur</p>
  3.     </div>
  4.     <div class="menu">
  5.     <p id="trois">galeries photos</p>
  6.     <ul class="liste">
  7.     <li><a href="index.php">Accueil</a></li>
  8.     <li><a href="nocario1.php">Nocario 1</a></li>
  9.     <li><a href="nocario2.php">Nocario 2</a></li>
  10.     <li><a href="nocario3.php">Nocario 3</a></li>
  11.     <li><a href="pietricaggio1.php">Pietricaggio 1</a></li>
  12.     <li><a href="pietricaggio2.php">Pietricaggio 2</a></li>
  13.     <li><a href="pietricaggio3.php">Pietricaggio 3</a></li>
  14.     <li><a href="erbaggio1.php">Erbaggio 1</a></li>
  15.     <li><a href="erbaggio2.php">Erbaggio 2</a></li>
  16.     <li><a href="michel.php">Saint-Michel</a></li>
  17.     <li><a href="#">link</a></li>
  18.     <li><a href="#">link</a></li>
  19.     <li><a href="#">link</a></li>
  20.     <li><a href="#">link</a></li>
  21.     <li><a href="#">link</a></li>
  22.     <li><a href="merci.php">Remerciements</a></li>
  23.     </ul>
  24.     </div>
  25.     <div class="menu">
  26.     <p id="quatre">histoire</p>
  27.     <ul class="liste">
  28.     <li><a href="#">link</a></li>
  29.     <li><a href="#">link</a></li>
  30.     <li><a href="#">link</a></li>
  31.     <li><a href="#">link</a></li>
  32.     <li><a href="#">link</a></li>
  33.     </ul>
  34.     </div>
  35.     <div class="menu">
  36.     <p id="cinq">la généalogie</p>
  37.     <ul class="liste">
  38.     <li><a href="#">link</a></li>
  39.     <li><a href="#">link</a></li>
  40.     <li><a href="#">link</a></li>
  41.     <li><a href="#">link</a></li>
  42.     <li><a href="#">link</a></li>
  43.     <li><a href="#">link</a></li>
  44.     <li><a href="#">link</a></li>
  45.     <li><a href="#">link</a></li>
  46.     <li><a href="#">link</a></li>
  47.     </ul>
  48.     </div>


avec des CSS (à adapter a tes besoins)
 

Code :
  1. .menu
  2.     {
  3.     margin-top: 1.1em;
  4.     left: 1.2em;
  5.     width: 14em;
  6.     border: 1px solid #6495ED;
  7.     background-color: #FFFFFF;
  8.     color: black;
  9.     }
  11. .menu ul
  12.     {
  13.     list-style-type: none;
  14.     margin: 0px;
  15.     padding: 0px;
  16.     }
  18. .menu li
  19.     {
  20.     margin: 0px;
  21.     padding: 0px;
  22.     }
  24. .menu p
  25.     {    /* configuration des titres */
  26.     clear:both;
  27.     font-weight: bold;
  28.     font-size: 1.2em;
  29.     width: 11.6em;
  30.     height: 1.3em;
  31.     margin: 0px;
  32.     border: 1px solid #6495ED;
  33.     background-color: #6495ed;
  34.     color: #FFFFFF;
  35.     text-align: center;
  36.     }
  38. .menu a
  39.     {
  40.     margin-left: 0.6em;
  41.     padding-top: 0.2em;
  42.     padding-bottom: 0.2em;
  43.     width: 13em;
  44.     height: 1.3em;
  45.     display: block;
  46.     text-align: left;
  47.     text-decoration: none;
  48.     color: #000000;
  49.     font-size: 1em;
  50.     }
  52. .menu a:hover
  53.     {
  54.     background-color: #add8e6;
  55.     color: #000000;
  56.     text-align: left;
  57.     text-decoration: none;
  58.     }


---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 16-05-2005 à 13:28:16    

bonjour Flyman30
 
un grand merci à toi pour avoir pris le temps de rectifier mon code.
Le seul problème qui survient maintenant, c'est que le menu est bien à sa place, mais le centre et les menus droits se positionnent en bas.
Voici la page Web :
http://ile.chrispat.free.fr/index.php  
si quelqu'un peut me dire comment je dois faire pour rectifier sa, je l'en remercie.
Amicalement.
Julien.

Reply

Marsh Posté le 16-05-2005 à 13:34:50    

julien2b a écrit :

bonjour Flyman30
 
un grand merci à toi pour avoir pris le temps de rectifier mon code.
Le seul problème qui survient maintenant, c'est que le menu est bien à sa place, mais le centre et les menus droits se positionnent en bas.
Voici la page Web :
http://ile.chrispat.free.fr/index.php  
si quelqu'un peut me dire comment je dois faire pour rectifier sa, je l'en remercie.
Amicalement.
Julien.


 
Pourquoi utilise tu 3 fichiers CSS différents  :??:  


---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 16-05-2005 à 13:39:45    

Inspire toi des modèles de mise en page et des tuto de ce site, car tu as pas mal de choses à revoir il semble que tu n'ai pas compris le fonctionnement des positionnents en CSS.  ;)  
 
http://css.alsacreations.com/Model [...] age-en-CSS


---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 16-05-2005 à 14:48:14    

Bonjour
 
j'ai une feuille de style pour le haut , le milieu, et le bas de ma page.
Une feuille de style pour mon menu.
Et une feuille de style pour mes  images.
Car tout mettre sur une même feuille, ça fait  beaucoup.
Je suis un vrais débutant, alors je range tous pour mieux m'y reconnaître .
Julien

Reply

Marsh Posté le 16-05-2005 à 18:04:29    

julien2b a écrit :

Bonjour
 
j'ai une feuille de style pour le haut , le milieu, et le bas de ma page.
Une feuille de style pour mon menu.
Et une feuille de style pour mes  images.
Car tout mettre sur une même feuille, ça fait  beaucoup.
Je suis un vrais débutant, alors je range tous pour mieux m'y reconnaître .
Julien


 
il faut une seule feuille de style  :D
 
Prend ce modele d'alsacréation http://css.alsacreations.com/modeles/modele9.htm et essaye de le comprendre c'est exactement ce que tu cherche, après tu modifie les menus avec ce que je t'ai donné en essayant de comprendre comment ça fonctionne avec ça tu fera ton propre site sur de bonne bases.  ;)


Message édité par Flyman30 le 16-05-2005 à 18:21:05

---------------
planuldep | Association pêche à la Sempé
Reply

Marsh Posté le 16-05-2005 à 18:25:52    

Voila, le problème est résolu, ça marche, le menu est bien en place, par contre avec firefox, il y a une grande marge entre les menus et le bas de la page.
Demain je vais tout mettre sur une seule feuille de style.
En tout cas, un grand merci à toi, d'avoir partagé tes compétences avec moi.
Amicalement.
Bonne soirée.
Julien.

Reply

Marsh Posté le 16-05-2005 à 20:46:34    

Rajoute un padding a tes liens de droite  ;)

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed