[RESOLU][CSS] Pb d'alignement avec balise <ul> -> Merci Lord ii !

Pb d'alignement avec balise <ul> -> Merci Lord ii ! [RESOLU][CSS] - HTML/CSS - Programmation

Marsh Posté le 22-04-2004 à 14:53:37    

Salut à tous,
 
J'ai toujours un souci de disposition de les blocs sur ma page.
 
Voici le modèle de ma page (j'ai volontairement mis des couleurs flashy pour mieux se réperer avec la CSS) :
mydotcom.free.fr
 
Le bloc .milieu est un div et devrait contenir le bloc .menu (balise <ul> ) à gauche et le bloc appelé .central à droite (celui contenant le logo "formation" ).
 
Or, là j'ai le bloc menu (en orange) qui me prend toute la ligne et impossible d'arriver à placer mes deux blocs l'un à côté de l'autre  :pt1cable:  
 
C'est grave docteur ?
 
Merci de jeter un coup d'oeil si vous avez un peu de temps  :jap:  :jap:  
 
Je mets le code CSS ici :
 

Code :
  1. body {
  2.       margin-top:35px;
  3.       margin-bottom:15px;
  4.       margin-right:0px;
  5.       margin-left:0px;
  6.       padding:0;
  7.       height: 100%;
  8.       text-align:center;
  9.       font-family: verdana, sans-serif;
  10.       background-color: #ececec;
  11.       }
  13. p {font-family: arial, verdana, helvetica, sans-serif;
  14.     text-align: left;
  15. }
  17. .entete {
  18.  background-color: #edc099;
  19.  width: 700px;
  20.  height: 15px;
  21.  border-color: #cfcece;
  22.  border-width: 1px;
  23.  border-style: dotted;
  24. }
  26. .corps {
  27.          width: 700px;
  28.  background-color: red;
  29.  border-color: #cfcece;
  30.  border-width: 1px;
  31.  border-style: dotted;
  32. }
  34. .contenu_haut {
  35. background-color: yellow;
  36. }
  39. .logo {
  40.        background-color: green;
  41.        width: 190px;
  42.        height: 100px;
  43.        border-color: #edc099;
  44.        margin-left: 10px;
  45.        float: left;
  46.        }
  48. .liens_entete {
  49. background-color: blue;
  50. width: 200px;
  51. height: 95px;
  52. margin-top: 15px;
  53. margin-right: 10px;
  54. margin-left: 450px;
  55. }
  57. .liens_entete a {
  58. color: #9e9e9e;
  59.         font-size: 8pt;
  60.         font-weight: 500;
  61.         text-align: right;
  62.         text-decoration: none;
  63. }
  65. .liens_entete a:hover {
  66.    color: #FF9933;
  67. }
  69. /* Pour la réalisation du menu de gauche */
  71. ul {
  72.     margin-top: 0px;
  73.     list-style-type: none;
  74.     text-align: left;}
  77. }
  80. .menu a {
  81.      width: 150px; /* on définit la taille du bouton de menu */
  82.      height: 10px;
  83.      display: block;
  84.      font-size: 8pt;
  85.      font-weight: 200;
  86.      text-align: right;
  87.      vertical-align: top;
  88.      text-decoration: none;
  89.      color: #6e2c04;
  90.      background: #ececec;
  91.      border: none;
  92.      }
  94. .milieu {background-color: orange;}
  96. .menu a:hover {
  97.      background: #edc099;
  98.      }
  100. .menu a:active {
  101.      background: #6e2c04;
  102.      color: #fff;
  103.      }
  105. .central {
  106. float: left;
  107. margin-left: 0px;
  108. margin-top: 0px;
  109. background: #ffffff;
  110. }
  115. .footer {
  116.  background-color: #ececec;
  117.  width: 700px;
  118.  height: 15px;
  119.       font-size: 8pt;
  120.      font-weight: 200;
  121.      text-align: center;
  122.     color: #747474;        /* gris foncé */
  123.     margin-top: 8px;
  124. }


 
 :hello:


Message édité par juanetfanny le 22-04-2004 à 15:54:16
Reply

Marsh Posté le 22-04-2004 à 14:53:37   

Reply

Marsh Posté le 22-04-2004 à 15:06:41    

pas encore eu le tps de tout épluché en détail mais je repère déjà une erreur dans le style de ul. Il ya une accolade fermante qui traine

Reply

Marsh Posté le 22-04-2004 à 15:07:09    

il manque <ul> [:spamafote]


---------------
brisez les rêves des gens, il en restera toujours quelque chose...  -- laissez moi troller sur discu !
Reply

Marsh Posté le 22-04-2004 à 15:19:34    

Une autre chose, tu as mal positionié ton élément flottant.
 
Rappel : La propriété float indique que ce qui suit le bloc doit etre placer à droite ou à gauche de celui-ci.
 
Dans ton cas le float:left doit se situer au niveau de menu ( bloc ul )
 
Edit:  
Pour une compréhension optimale de la feuille de style, j'essaye d'indiquer les éléments par un semblant d'ordre hierachique ( qui contient quoi).  
 
Dans ton cas, il serait bon d'indiquer la classe milieu, au dessus de menu dans la feuille de style, car milieu contient menu, cela facilitera la compréhension
 
Ensuite, essaye de ne pas trop mélanger les unités ( ex du menu où l'on a des pixels et des points... )
 
Pierre


Message édité par Lord II le 22-04-2004 à 15:28:06
Reply

Marsh Posté le 22-04-2004 à 15:44:30    

:jap:  pour vos conseils qui me sont très précieux et pour avoir pris de votre temps à regarder mon code, c'est très sympa  ;)  
 
Ok, pour l'ordre hiérarchique, tu as tout à fait raison, je vais remettre ça correctement.
 
Sinon, je corriges les points problèmatiques et je vous tiens au courant  :)  
 
 :hello:

Reply

Marsh Posté le 22-04-2004 à 15:51:16    

kadreg a écrit :

il manque <ul> [:spamafote]


 
Bin, je suis désolé, je vois pas où il manque <ul>... Elle est présente dans mon .php et dans ma CSS  [:airforceone]  
 
 :hello:  

Reply

Marsh Posté le 22-04-2004 à 15:53:30    

lord ii a écrit :

Une autre chose, tu as mal positionié ton élément flottant.
 
Rappel : La propriété float indique que ce qui suit le bloc doit etre placer à droite ou à gauche de celui-ci.
 
Dans ton cas le float:left doit se situer au niveau de menu ( bloc ul )


 
 [:andromaque]  c'était ça !  :jap:  C'est marrant mais il me semblait avoir corrigé ça et que ça n'avais pas fonctionné  :pt1cable:  Comme quoi, j'ai du encore m'y prendre comme un pied !  :D  
 
Merci à tous !
 :hello:

Reply

Sujets relatifs:

Leave a Replay

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