Discussion :

[moimp]

Bonjour,
J'ai récupéré un exemple de menu horizontal qui contient:

Code css :

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

1
2
3
4
5
6
.menuH li
{ 
	float : left; 
	/* pour IE qui ne reconnaît pas "transparent" */
	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}

Cette écriture provoque l'écriture de l'élément suivant le menu sur la même ligne que ce dernier.
J'ai essayé de jongler avec des :: after et des clear:both mais je n'arrive pas à mon but.
La seule modification que j'ai apportée à ce style a été de remplacer un id par une classe.

[headmax]

Salut peut être en cherchant dans le css ou dans le js ou dans le html si ce fameux id est utilisé et le remplacer par cette class sachant qu'au niveau js si tu change id (un seul élément) par une class (plusieurs éléments), les répercutions peux avoir lieu...

[JefReb]

La seule modification que j'ai apportée à ce style a été de remplacer un id par une classe.

ben ça c'est pas rien! Quelle est la différence entre l'utilisation d'un ID (#) et d'une classe (.)??

La moindre des choses aurait été de nous donner un MINIMUM de css et de html pour comprendre.

c'est pas méchant de ma part, mais écrire

J'ai récupéré un exemple de menu horizontal qui contient:

Copier c'est bien, mais comprendre ce que l'on copie, c'est mieux.
Si j'écris cela c'est que tu parles de ... ::after !! ça vient faire quoi dans le problème.
Qu'est-ce qu'un pseudo élément vient faire dans cette galère? Tu as cherché à comprendre l'utilisation de ::after ou ::before et du clear:both?

Mais j'écris tout ça pour que tu nous exposes un peu mieux avec des données.
Amicalement bien sûr!
De plus, regardes dans les forums, il y a beaucoup d'exemples.
Pourquoi utiliser une classe, alors que l'on peut s'en passer.
Pourquoi utiliser float, qui ou était très bien (autrefois) alors que l'on peut utiliser flex.
Regardes le travail qui ce fait en ce moment sur https://www.developpez.net/forums/d1.../menu-flex-ie/
Exemple de code qui nous aurait aidé:

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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
 
* {
	margin: 0;
	padding: 0;
	border: 0;
	box-sizing: border-box;		/* taille des boites width= contenu + padding + border */
}
html, body {
	font-family: Arial, sans-serif;
	fonts-size: 100%;
	font-size: 100%;
}
/*=========== définition commune =======================================*/
#navMain ul, #navMain li {
	list-style-type: none;
}
#navMain a {
	width: 100%;
	display: block;
	padding: 10px 15px;
	background-color: #2980b9;
	color: #fff;
	text-decoration: none;
}
#navMain a:hover {
	background: #20638f;
	text-decoration: underline;
}
#navMain > ul ul {
	display: none;
}
#navMain li:hover > ul {
	display: block;
}
#navMain li li a {
	background: #333;
}
/*======================================================*/
/*=============== Pour desktop et >640px ===============*/
/*======================================================*/
@media screen and (min-width: 641px) {
/*==== Utilisation de flex pour rendre horizontal ======*/
#navMain > ul {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;		/* centrons le texte */
}
#navMain > ul > li {
	-webkit-flex: 1 1 auto;
	flex: 1 1 auto;
}
#navMain > ul {
	width: 50%;
	min-width: 640px;
	margin: 0 auto;
}
/*================= Définition du niveau 2 ==============*/
#navMain li {
	position: relative;
	min-width: 180px;
}
#navMain > ul ul {
	width: 100%;
	position: absolute;
	top: 100%;
	left: 0;
}
}
/*======================================================*/
/*=============== Pour phone et < 640px  ===============*/
/*======================================================*/
@media screen and (max-width: 640px) {
}

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<nav id="navMain">
  <ul>
    <li> <a href="#">A - One</a>
      <ul>
        <li> <a href="#">1</a> </li>
        <li> <a href="#">2</a> </li>
        <li> <a href="#">3</a> </li>
        <li> <a href="#">4</a> </li>
      </ul>
    </li>
    <li><a href="#">B - Two</a></li>
    <li><a href="#">C - Three</a></li>
    <li><a href="#">D - Four</a></li>
  </ul>
</nav>

[JefReb]

Je rajoute car headmax n'a pas tord dans sa réponse.
Tout dépend de ce que l'on veut faire avec un menu horizontal.
Si il n'y a pas d'effets spéciaux, pas besoin de javascript, avec uniquement css3 on peut faire de beaux effets, et surtout très simple.
Par contre sur des phones, il faudra peut être utiliser du JQuery pour avoir du menu vertical au clic.
Mais sans spécifications précises, rien à dire de plus.

[moimp]

HTML:

Code html :

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

<ul class="menuH"><li><a href="editAccomp.php?stage=1">1 - Accompagnement</a></li><li><a href="editAccomp.php?stage=2">2 - Etat-civil, adresses</a></li><!-- suite 3 à 5 --></ul>

CSS:

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
.menuH, .menuH ul {
	padding : 0;
	margin : 0;
	list-style : none;		/* on supprime le style par défaut de la liste */
	line-height : 21px;		/* on définit une hauteur pour chaque élément */
	text-align : center;	/* on centre le texte qui se trouve dans la liste */
}
 
.menuH {
	font-weight : bold; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
	font-size : 12px; /* hauteur du texte : 12 pixels */
}
 
.menuH a {
	display : block;
	padding : 0;
	background : #000;
	color : #fff;
	text-decoration : none;
	width : 144px;
}
 
.menuH li
{ 
	float : left; 
	/* pour IE qui ne reconnaît pas "transparent" */
	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
 
/* IE ne reconnaissant pas le sélecteur ">" */
html>body .menuH li
{
	border-right: 1px solid transparent ; /* on met une bordure transparente à droite de chaque élément */
}

[Invité]

Bonjour,

Je t'invite à faire les exercices proposés ici.

Ce sera mieux que ton vieux code...



N.B. puisque tu as UN SEUL menu comme ça, c'est un id qu'il faut utiliser.

[moimp]

Merci. Dans un premier temps, j'ai fait un bricolage qui me permet d'avancer sur mon projet. Mais je garde tes exercices pour quand j'aurais avancé.

[Invité]

Ca ne sert à rien de faire du "bricolage".
tu penses gagner du temps, alors que c'est au contraire une perte de temps.


Lis au moins ce message.
Et le code donné par JefReb fait le job.

[DMC]

Bonjour,
Essaye cela :

Code :

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

1
2
3
4
5
.menuH:after{
  content:"";
  display:block;
  clear:both;
}

mais à mon avis un display:inline-block à la place de float:left du LI devrait suffire pour faire la même chose

[JefReb]

Désolé, mais avec ce bout de code de rien du tout pour pas dire autre chose de méchant, que veux-tu que l'on puisse tester ton problème de float et de menu horizontal???
Déjà, en rajoutant un niveau 2 on commence à voir un peu.
Et donc DMC avec son :after qui devrait être ::after puisque pseudo element n'a rien pu voir et résoudre.

Pour le peu de code que tu as donné, il suffit de cibler uniquement le premier niveau, les enfants directs de UL

Code css :

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

1
2
3
.menuH > li {
	float : left;
}

et voici le code d'après ton mini-code ...

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
.menuH, .menuH ul {
	padding : 0;
	margin : 0;
	list-style : none;		/* on supprime le style par défaut de la liste */
	line-height : 21px;		/* on définit une hauteur pour chaque élément */
	text-align : center;	/* on centre le texte qui se trouve dans la liste */
}
.menuH {
	font-weight : bold; /* on met le texte en gras */
	font-family : Arial; /* on utilise Arial, c'est plus beau ^^ */
	font-size : 12px; /* hauteur du texte : 12 pixels */
}
.menuH a {
	display : block;
	padding : 0;
	background : #000;
	color : #fff;
	text-decoration : none;
	width : 144px;
}
.menuH > li {
	float : left;
	/* pour IE qui ne reconnaît pas "transparent" */
	border-right : 1px solid #fff; /* on met une bordure blanche à droite de chaque élément */
}
/* IE ne reconnaissant pas le sélecteur ">" */
html>body .menuH li {
	border-right: 1px solid transparent; /* on met une bordure transparente à droite de chaque élément */
}

Code html :

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
 
<ul class="menuH">
  <li><a href="editAccomp.php?stage=1">1 - Accompagnement</a>
    <ul>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
      <li> <a href="#">4</a> </li>
    </ul>
  </li>
  <li><a href="editAccomp.php?stage=2">2 - Etat-civil, adresses</a>
    <ul>
      <li> <a href="#">1</a> </li>
      <li> <a href="#">2</a> </li>
      <li> <a href="#">3</a> </li>
      <li> <a href="#">4</a> </li>
    </ul>
  </li>
  <!-- suite 3 à 5 -->
</ul>

Après, bien sûr il faut jouer avec la position absolute et les display des niveau 2 et plus...
Mais essayes de cerner un peu plus le code que tu donnes. nous ne sommes pas voyant.

PS: un

Code css :

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

margin-right:1px;

fait la même chose que

Code css :

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

border-right: 1px solid transparent ;

et c'est compatible IE

[moimp]

Je me suis inspiré de ton premier exemple ce qui me donne un code court mais sans bricolage mais suffisant. Et pour ma fierté personnelle, il a fonctionné du premier coup sans une erreur. Je ferai les autres exercices plus tard: J'ai mis le lien dans mes favoris.