[CSS2] pourquoi ce n'est pas centré ??

pourquoi ce n'est pas centré ?? [CSS2] - HTML/CSS - Programmation

Marsh Posté le 21-02-2006 à 14:38:01    

Bonjour,
 
je veux faire un truc tout bête, mais c'est tellement sim!ple que je ne comprend pas pourquoi ca ne marche pas !!
 
L'objectif est d'avoir dans un div une liste <ul><li>...</li></ul> comme pied de page centreé dans la page et en ligne.
en ligne pas de problème mais centré dans la page pas moyen!! comment faire :??:
 
voici le code de la page :

Code :
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2.     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
  4. <head>
  5. <title>Horizontal menu demo</title>
  6. <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1" />
  7. <meta http-equiv="Content-Language" content="en-us" />
  8. <!--LIST-BASED MENUS WITHOUT IDs OR CLASSES ON THE LIST ELEMENTS-->
  9. <!-- tested in NN7, Opera, Firefox, IE6, IE5.5, IE5, on Windows and Safari and IE5 on Mac -->
  10. <style type="text/css">
  11. body {font-family: verdana, arial, sans-serif; font-size:100% behavior:url(css/csshover.htc);}
  12. * {margin:0; padding:0;}
  13. /* the horizontal menu starts here */
  14. div#listmenu {
  15. width:100%;  /* makes the div full width */
  16. float:left; /*makes the div enclose the list */
  17. border-top:1px solid #069; /* draws line on top edge of div */
  18. border-bottom:1px solid #069;  /* draws line on bottom edge of div */
  19. font-size:.8em; /* SET FONT-SIZE HERE */
  20. background-color:#CCF; /* colors the div */
  21. margin-top:20px; /* TEMPORARY - pushes the div away from the top of the browser for clarity in this example*/
  22. }
  23. div#listmenu ul {margin:0 0 0 30px;/* indents ul from edge of container */
  24. }
  25. div#listmenu li {
  26. float:left; /* causes the list to align horizontally instead of stack */
  27. list-style-type:none; /* removes the bullet off each list item */
  28. background-color:#FFA; /*sets the background of the menu items */
  29. border-right:1px solid #069; /* creates dividing lines between the li elements */
  30. }
  31. div#listmenu li:first-child {
  32. border-left:1px solid #069; /*the first vertical line on the menu */
  33. }
  34. div#listmenu li:hover {
  35. background-color:#FFF; /*sets the background of the menu items */
  36. }
  37. div#listmenu a {
  38. padding:0 6px; /*creates space each side of menu item's text */
  39. text-decoration:none;  /* removes the underlining of the link */
  40. color:#069; /* sets the type color */
  41. }
  42. div#listmenu a:hover {
  43. color:#F33;
  44. }
  46. div#listmenu p {text-align:center;}
  48. * html div#listmenu ul {
  49. float:left; /* makes the ul wrap the li's */
  50. border-left:1px solid #000; /* adds the rightmost menu vertical line to the ul */
  51. margin-left:15px; /* IE doubles the given value above - why? */
  52. }
  53. * html a {display:block;}
  54. </style>
  56. </head>
  57. <body>
  58. <div id="listmenu">
  59. <p>
  60. texte au centre
  61. <ul>
  62.   <li><a href="#">Customers</a></li>
  63.   <li><a href="#">Members</a></li>
  64.   <li><a href="#">Dealers</a></li>
  65.   <li><a href="#">Distributors</a></li>
  66.   </ul>
  67. </p>
  68. </div>
  69. </body>
  70. </html>


 
seul le "texte au centre" est bien centré dans la page, pas le reste !!
 
je ne sais pas, je ne sais plus, je suis perdu ... ;)
 
Cordialement,
SteF
 


---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 21-02-2006 à 14:38:01   

Reply

Marsh Posté le 21-02-2006 à 15:57:31    

Si je me souviens bien, en css, c'est  
padding-left : 0 auto
et pareil pour la marge de droite.
Mais IE6 étant ce qu'il est, il oubliera de centrer le beau menu. (sic) Pour IE6, je sais pas faire.

Reply

Marsh Posté le 21-02-2006 à 16:28:01    

merci pour ta réponse (super rapide), question bete je doit le placer à quel endroit ??


---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 21-02-2006 à 17:22:43    

sinon c'est un peu plus chiant d'accord mais ajoute un tableau et la tu seras le centrer plus facilement a mon avis

Reply

Marsh Posté le 21-02-2006 à 17:44:32    

Vu que j'ai mis un ":" et pas un "=", c'est dans le css.
the big ben > Tant qu'a rajouter des éléments pour gérer le centrage autant utiliser directement la balise <center> qu'une table. C'est déjà moins pire bien que ca ne soit pas le top.

Reply

Marsh Posté le 21-02-2006 à 18:05:51    

pour faire une liste en ligne tu dois utiliser display:inline
ensuite pr centrer un élément tu as 2 possibilités
mettre ta liste <ul> dans un conteneur que tu définis avec  
text-align:center
 et pour les gecko tu mets ta liste avec margin:0 auto;
ca donne ca en fait :
 
#center{text-align:center}
#center ul {margin:0 auto}
 
<div class="center">
 <ul>
  <li></li>
  <li></li>
 </ul>
</div>
 
Par contre ne mets surtout pas un tableau comme on te le dit plus haut, en xhtml on ne mets pas des tableaux quand il n'y en a pas besoin.

Reply

Marsh Posté le 21-02-2006 à 18:06:00    

the big ben => merci mais j'avais déjà pensé à ca, seulement je veux le faire en XHTML strict ;)
 
omega2=> je sais bien qu'il faut le metre dans le css, mais pour quel élément ?? UL , LI, P ...   :??:


---------------
Tout à commencé par un rêve...
Reply

Marsh Posté le 21-02-2006 à 18:06:58    

C'est à mettre pour l'élément que tu veux centrer, donc le UL si j'ai bien suivit.

Reply

Sujets relatifs:

Leave a Replay

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