[Résolu] [CSS] first-child pour un div

Salut

Je suis entrain de mettre en forme une liste et je rencontre un problème de mise en forme.
J'ai une liste entourée par un menu (identique, en haut et en bas)
Ce que je souhaite, c'est que le premier menu ait un margin-bottom et le second un margin-top

En gros, ça ressemble à ça :

<div id="Conteneur">
	<div class="Menu">mon menu</div>

	<div id="Liste">ma liste</div>

	<div class="Menu">mon menu</div>
</div>

.Menu :first-child { margin-bottom: 25px; }
.Menu { margin-top: 25px; }

Je suis entrain de me demander si first-child fonctionne pour un div...

Vous n'auriez pas une solution ? ^^
Modifié par gihefca (14 Feb 2007 - 22:40)

gihefca a écrit :

.Menu :first-child { margin-bottom: 25px; }
.Menu { margin-top: 25px; }

Je suis entrain de me demander si first-child fonctionne pour un div...

Tu n'as pas appliqué :first-child à un div, mais à... à rien, en fait. Tu as mis une espace entre la pseudo-classe :first-child et l'élément visé. Or, dans un sélecteur CSS, l'espace est un opérateur logique : div a désigne tous les éléments a enfants ou descendants d'un élément div, par exemple.

Tu pourrais écrire ceci :

.Menu:first-child

mais dans ce cas ça désignerait non pas la premier occurence d'un élément ayant pour classe "Menu", mais le premier enfant d'un élément ayant pour classe "Menu". Je n'ai pas l'impression que c'est l'effet recherché.

Je te propose plus simple :

<div id="Conteneur">
	<div class="Menu premier">mon menu (première instance)</div>
	<div id="Liste">ma liste</div>
	<div class="Menu deuxieme">mon menu (deuxième instance)</div>
</div>

En CSS, tu fais ton style pour la classe "Menu", puis tu rajoutes un style pour la classe "premier" et un autre pour la classe "deuxieme".

Sinon, ces histoires de marges peuvent sans doute également se régler en jouant sur les marges de la liste qui sépare les deux menus, non ? Ou bien sur le padding du conteneur ?


Enfin, question générale : est-il pertinent de dupliquer ce menu ? Ça sera sans doute déstabilisant pour un certain nombre d'utilisateurs.

Pour l'espace, je me suis trompé en recopiant ^^'
Mais même sans, ça ne fonctionne pas
J'ai opté pour des marges sur la liste.

Pour ta solution des deux styles différents, c'est un peu tendu vu que les menus sont affichés via un require() et donc identiques.
C'est pour ça que je voulais modifier les marges via le css et non en modifiant le menu

Sinon, le menu en haut et en bas est pas mal utile parce que la liste va être très longue (une centaine d'entrées voir plus)

En tout cas merci