[CSS] Problème d'alignement d'un menu dans un div

Problème d'alignement d'un menu dans un div [CSS] - HTML/CSS - Programmation

Marsh Posté le 03-12-2004 à 20:17:57    

Bonjour à tous !
 
Je débute en css, et je bute sur un problème certainement idiot...
Je m'inspire de : http://www.alsacreations.com/articles/menu/
Je voudrais centrer un menu (en utilisant ul et li) dans un div. J'ai ça en code html :
 

Code :
  1. <div id="menu">
  2. <h4>Titre</h4>
  3. <br>
  4. <ul class="menu">
  5. <li><a href="">Menu 1</a></li>
  6. <br>
  7. <li><a href="">Menu 2</a></li>
  8. <br>
  9. <li><a href="">Menu 3</a></li>
  10. <br>
  11. <li><a href="">Menu 4</a></li>
  12. </ul>
  13. </div>


 
Et pour le css :

Code :
  1. #menu {
  2. /* menu de droite, gris aligné à droite */
  3. width: 30%;
  4. height: 100%;
  5. background-color: #CCCCCC;
  6. float: right;
  7. text-align: center;
  8. color: #333333;
  9. }
  10. ul {
  11. list-style-type: none; /* on supprime les puces, inutiles */
  12. width: 100%; /* précision pour Opera */
  13. }
  14. li {
  15. float: left;
  16. width: 100%;
  17. }
  18. .menu a{
  19. margin-bottom: 2px;
  20. width: 100%; /* on définit la taille du bouton de menu */
  21. float: left;
  22. text-align: center;
  23. text-decoration: none;
  24. color: #333333;
  25. font-size: 10pt;
  26.      }
  27. .menu a:hover {
  28.      background: #999999;
  29.      }
  30. .menu a:active {
  31.      background: #CCCCCC;
  32.      color: #333333;
  33.      }


 
Je voudrais que toute la ligne du menu change de couleur, donc j'ai mis 100% pour li (sinon c'est plus petit).
Et là ça fait ce que je veux, mais légèrement décalé sur la droite :??:
 
http://img77.exs.cx/img77/4746/57-menu.png

Reply

Marsh Posté le 03-12-2004 à 20:17:57   

Reply

Marsh Posté le 03-12-2004 à 21:33:55    

sur .menu a:
enlève le text-align (redondant normalement)
enlève width et remplace le par display: block
enlève le float
enlève le margin, si tu veux un espace entre les éléments de menus mets le sur le li
 
et accessoirement le class menu sur ton <ul> est inutile, dégage le et remplace tes .menu a par des #menu a
retire moi ces <br> pourri, les listes reviennent automatiquement à la ligne, idem pour les <h> qui sont en display:block, donc TOUS les <br> doivent sauter
 
Ah et si tu veux centrer le <ul> dans le <div>, ajoutes
 
margin-left: 0px auto;
margin-right: 0px auto;
 
pour le <ul>


Message édité par masklinn le 03-12-2004 à 21:36:15

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-12-2004 à 21:44:51    

Masklinn a écrit :

ajoutes
 
margin-left: 0px auto;
margin-right: 0px auto;
 
pour le <ul>


Tu veux dire margin: 0px auto; je suppose ?


---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-12-2004 à 21:51:15    

SIBELIUS a écrit :

Tu veux dire margin: 0px auto; je suppose ?


d'après ce que j'ai compris il veut le centrer horizontalement, pas verticalement...
Donc tu supposes mal


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-12-2004 à 22:28:46    

Oui donc c'est bien ce que j'ai écrit :)
margin: 0px auto;
= margin : 0 auto 0 auto;
= margin-top : 0 / margin-right: auto / margin-bottom : 0 /margin-left: auto
 
Ce que tu as écrit  
margin-left: 0px auto;
margin-right: 0px auto;
 
N'est pas correct puisque tu donnes plusieurs valeurs (top, right; bottom, left)... à une propriété margin-left (ou right), qui ne peut par définition en accepter qu'une !
 
PS : merci pour l'agressivité. Je "suppose" que personne n'a rien à t'apprendre ?  :??:  
 
http://www.yoyodesign.org/doc/w3c/ [...] def-margin :
"Margin : Quand il n'y a qu'une seule valeur spécifiée, celle-ci s'applique à tous les côtés. S'il y en a deux, alors la première valeur s'applique pour la marge du haut et celle du bas, et la seconde pour la marge droite et celle de gauche."


Message édité par sibelius le 03-12-2004 à 22:46:53

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-12-2004 à 22:48:50    

SIBELIUS a écrit :

merci pour l'agressivité.


 :heink:  
Où ca agressitivé?
 
(PS: à part ton complexe de persécution et après vérifications, tu as effectivement raison)


Message édité par masklinn le 03-12-2004 à 22:50:18

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 03-12-2004 à 22:50:30    

Masklinn a écrit :

:heink:  
Où ca agressitivé?


 
"Donc tu supposes mal"... en clair : j'ai rien compris je me tais.
Désolé si c'est une erreur d'interprétation, mais dans ce cas, tu as oublié le smiley de rigueur :) <--
 
Perséctution : oh non, moi je m'en fous, j'en ai connu des vertes et des pas mûres, mais on trouve de plus en plus de puristes-qui-connaissent-tout-mieux-que-les-autres et qui se contentent en général de dire : "ton truc c'est de la daube".
 
J'ai cru un instant que c'était le cas ici.
Désolé pour la méprise.


Message édité par sibelius le 03-12-2004 à 22:52:56

---------------
www.polychromies.com (Portfolio) - www.photographier-bebe.com (livre photo de bébé) - www.alsacreations.com
Reply

Marsh Posté le 03-12-2004 à 22:51:42    

SIBELIUS a écrit :


Désolé si c'est une erreur d'interprétation, mais dans ce cas, tu as oublié le smiley de rigueur :) <--


 [:itm]  
tiens, ce coup ci j'ai même mis un smiley pour te faire plaisir [:itm]


Message édité par masklinn le 03-12-2004 à 22:52:16

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-12-2004 à 01:05:10    

J'ai pas lu très attentivement alors je suis peut-être à côté de la plaque.
 
Il manque pas un "display: block;" quelquepart dans la règle associée à "a" ? Les blocs occupent toujours toute la largeur disponible et ça rendrait redondant le "width:100%;".
Et "text-align: center;" me parait bizarre pour un élément qui est par défaut "display:inline;" comme a.
 
Je peux me tromper, je suis nouveau dans le domaine, c'est juste une idée comme ça...
Une piste de réflexion peut-être...

Reply

Marsh Posté le 04-12-2004 à 01:14:41    

little_ghost a écrit :

Il manque pas un "display: block;" quelquepart dans la règle associée à "a" ?


Oui (3e ligne de mon 1er post ;) )


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 04-12-2004 à 01:14:41   

Reply

Marsh Posté le 04-12-2004 à 01:18:20    

Masklinn a écrit :

Oui (3e ligne de mon 1er post ;) )


 
oups désolé....
j'avais parcouru le topic en diagonale pour voir si ça n'avait pas déjà été dit et je l'ai manqué....

Reply

Marsh Posté le 04-12-2004 à 12:32:56    

Merci à tous !
Je regarde ça cet après midi, et je vous tiens au courant :jap:

Reply

Marsh Posté le 05-12-2004 à 18:34:08    

J'ai compris ce que vous avez dit, et corrigé le code, mais ça ne suffisait pas !
J'ai regardé d'un peu plus près avec un copain, et on a trouvé, il fallait mettre un padding pour ul !
 
Merci à tous :hello:

Reply

Sujets relatifs:

Leave a Replay

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