Discussion :

[JefReb]

Bonjour
Je suis confronté à 2 problèmes que je n'arrive pas à résoudre et comprendre.
Voir sur: http://codepen.io/JefReb/pen/xjKcC
1) Cela ressemble à une fusion des marges, mais je n'arrive pas trouver où.
Dans l'exemple, le bandeau jaune présente un décalage en haut qui est équivalent à un margin-top:20px indiqué nul part.
Si je rajoute un margin-top:20px à #bandeau, celui-ci se colle bien en haut de fenêtre.
Pourquoi?

2) Je n'arrive pas à centrer de façon harmonieuse le menu par rapport au bandeau.
Je ne trouve pas la façon de centrer ce menu horizontal par rapport au bandeau (ou autre conteneur).
Bien sûr, comme il est en float:left, le nombre d'item conditionne la largeur de la liste.
Mais comment le centrer automatiquement si je rajoute un item sans avoir à calculer un margin-left pour <ul>?

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
/* ======     Mettons nos défauts           ====== */
html, body 	{ 
margin:0; padding:0; font-size:1em; font-weight:normal; }
body 		{
font-family:"Times New Roman", Times, verdana, arial,sans-serif;
 }
/* ====== Classe pour la largeur de la page ====== */
.largeur 	{ 
width:800px;          /* largeur                      */
margin:0 auto;        /* pour centrer dans la fenêtre */
}
/* ====== Définition du bandeau                        ====== */
#bandeau    { 
height:100px;          /* hauteur  */
margin:0; padding:0;   /* marges internes et externes */ 
background-color:yellow;
text-align:center;
}
/* ====== Définition du menu horizontal    ====== */
#hornav     {
height:25px;
margin:0; padding:0;
margin-top:2px;
text-align:center; 
vertical-align:middle;
font-weight:bold;
border: 1px solid black; 
}			  
ul#hormenu  	 { 
margin:0; padding:0; 
list-style-type:none; 
text-align:center; 
}					
ul#hormenu li 	 { 
float:left;          /* alignement horizontal grâce au flottant    */
text-decoration:none;
border-right:3px solid transparent;  /* espacement des éléments   */
} 				   			        
ul#hormenu a 	 { 
display:block; 
width:150px; 
height:25px; 
line-height:25px; 
background-color:rgba(193,196,197,0.5);
color:black; 
}
ul#hormenu li:hover>a { 
text-decoration:underline;
color:blue; 
}

Code html:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div id="bandeau" class="largeur"><h1>Bandeau</h1></div>
<div id="hornav" class="largeur">
   <ul id="hormenu">
    <li><a href="#" title="item1" target="_parent">item1</a></li>
    <li><a href="#" title="item2" target="_parent">item2</a></li>
    <li><a href="#" title="item3" target="_parent">item3</a></li>
    <li><a href="#" title="item4" target="_parent">item4</a></li>
   </ul>
</div>

Merci pour vos lumières
Jef

[Candygirl]

Hello,

Pour ton premier problème, il s'agit bien d'une fusion de marge qui provient de la marge par défaut du h1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

h1 {margin-top:0;}

Pour centrer ton menu en float, tu peux jouer avec deux positions relatives:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
ul#hormenu {
  float:right;
  position:relative;
  right:50%;
}
 
ul#hormenu li 	 { 
  position:relative;
  left:50%;
}

Autrement, plus simple mais un peu moins rétrocompatible, tu peux utiliser un display:inline-block associé à ton text-align:center.

[JefReb]

Merci Candy,
Pour le h1, je n'y aurais pas pensé, car j'étais obnubilé par la fusion des marges avec <p>

Pour le centrage du menu horizontal, c'est très bien, mais il manque quelque chose que je viens de trouver:
un display:inline-block pour <li>

voir: http://codepen.io/JefReb/pen/xjKcC

Merci pour ton aide. J'attends un petit peu avant de clore le topic, dans le cas où quelqu'un d'autre aurait une autre idée.
Encore merci
Jef

[Candygirl]

Pour le centrage du menu horizontal, c'est très bien, mais il manque quelque chose

Je suppose que tu avais viré par inadvertance le float:left des li.

Si tu choisis l'option du inline-block, tu peux supprimer les position relative left, right et les float. Le double position relative n'est utile que pour centrer des éléments en float.

Avec le inline-block ton text-align:center; sur le #hornav suffit au centrage.

[JefReb]

Aarg, merci Candy,
C'est exacte, j'avais bêtement recopié ta réponse où il n'y avait plus le float:left pour li.
Je clos donc le topic. Merci encore