Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
3128 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°914246
raph77
Posté le 03-12-2004 à 20:17:57  profilanswer
 

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. }
  11. ul {
  12. list-style-type: none; /* on supprime les puces, inutiles */
  13. width: 100%; /* précision pour Opera */
  14. }
  16. li {
  17. float: left;
  18. width: 100%;
  19. }
  21. .menu a{
  23. margin-bottom: 2px;
  24. width: 100%; /* on définit la taille du bouton de menu */
  25. float: left;
  26. text-align: center;
  27. text-decoration: none;
  28. color: #333333;
  29. font-size: 10pt;
  30.      }
  32. .menu a:hover {
  33.      background: #999999;
  34.      }
  36. .menu a:active {
  37.      background: #CCCCCC;
  38.      color: #333333;
  39.      }


 
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

mood
Publicité
Posté le 03-12-2004 à 20:17:57  profilanswer
 

n°914276
masklinn
í dag viðrar vel til loftárása
Posté le 03-12-2004 à 21:33:55  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°914280
sibelius
Vous êtes sûr ?
Posté le 03-12-2004 à 21:44:51  profilanswer
 

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
n°914281
masklinn
í dag viðrar vel til loftárása
Posté le 03-12-2004 à 21:51:15  profilanswer
 

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


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°914304
sibelius
Vous êtes sûr ?
Posté le 03-12-2004 à 22:28:46  profilanswer
 

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
n°914335
masklinn
í dag viðrar vel til loftárása
Posté le 03-12-2004 à 22:48:50  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°914337
sibelius
Vous êtes sûr ?
Posté le 03-12-2004 à 22:50:30  profilanswer
 

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
n°914341
masklinn
í dag viðrar vel til loftárása
Posté le 03-12-2004 à 22:51:42  profilanswer
 

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

---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
n°914436
little_gho​st
Posté le 04-12-2004 à 01:05:10  profilanswer
 

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

n°914440
masklinn
í dag viðrar vel til loftárása
Posté le 04-12-2004 à 01:14:41  profilanswer
 

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 ;) )


---------------
I mean, true, a cancer will probably destroy its host organism. But what about the cells whose mutations allow them to think outside the box by throwing away the limits imposed by overbearing genetic regulations? Isn't that a good thing?
mood
Publicité
Posté le 04-12-2004 à 01:14:41  profilanswer
 

n°914446
little_gho​st
Posté le 04-12-2004 à 01:18:20  profilanswer
 

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é....

n°914586
raph77
Posté le 04-12-2004 à 12:32:56  profilanswer
 

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

n°915214
raph77
Posté le 05-12-2004 à 18:34:08  profilanswer
 

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:


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
select et socket enrobé de sucre (fdopen mode lecture) -> probleme ???[Oracle - PL/SQL] Problème de trigger et de table inaccessible
[CSS]TableauProblème réalisation d'un puissance 4 sous Word
problème pour trouver des infos claires sur c++ et gtk[HTML/CSS] Simple probleme d agrandissement...
Problème de compilation sur Dev-C++[lex] problème bizarre ???
Problème d'affichage d'un menu avec Mozilla 
Plus de sujets relatifs à : [CSS] Problème d'alignement d'un menu dans un div

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.042 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)