[Résolu] Imbrication de classes en CSS ?

Bonsoir à tous, et merci de préter attention à mon problème.

J'ai décidé de franchir le cap et d'utiliser les standards, et j'ai donc commencé à apprendre à utiliser les CSS il y'a à peine quelques jours.

J'ai commencé à coder mon site, mais déja j'ai un problème qui se pose et que je ne saurais résoudre sans l'utilisation abusive de la divite...

Voilà le lien de l'ébauche provisoire du site :

http://perso.wanadoo.fr/mikachu/test/css.html

Je cherche à aligner chacun des divers liens de mon menu en fonction de la barre verticale bleue, comme sur la maquette découpée dans photoshop en tableaux que vous trouverez à l'adresse suivante :

http://perso.wanadoo.fr/mikachu/2005/index.htm

Dans le code déja présent sur la version en css je ne sais pas comment aligner individuellement chacun des <p> en leur attribuant une classe, sachant qu'ils sont déja dans une <div> qui en possède une.

Déja est-il possible d'imbriquer une classe à un objet contenu dans un autre objet qui a déja une classe ? Si oui comment ??

Est-il possible de faire une chose du genre :

<div class="menu">
	<p class="menu0">Accueil</p>
	<p class="menu1">Curriculum</p>
	<p class="menu2">Artwork</p>
	<p class="menu3">Liens</p>
	<p class="menu4">Contacts</p>
	</div>

et si cela fonctionne, comment indiquer cela dans le code CSS ?

Je vous remercie par avance et vous souhaite une bonne soirée.
Modifié par Mikachu (30 Jul 2006 - 23:55)

salut !

tout d'abord, perso je n'utiliserais pas la balise p pour définir un menu mais plutôt des éléments permettant de structurer un menu... genre

<ul class="menu">
       <li id="menu0">Accueil</li>
       <li id ="menu1">Curriculum</li>
</ul>

je mettrais plutot des identifiants à la place des class étant donné que t'auras visiblement qu'un menu0 dans ta page...
ensuite pour la css...

#menu0{
blabla;
}

ou si t'avais utilisé des class:

ul.menu{blabla;
}
li.menu0{blabla;
}

en espérant que j'ai répondu à tes questions.

Salut et bienvenue.
Peut-être un p'tit tour d'horizon des balises et de leur utilisation pourrait t'être utile... ce n'est pas bien compliqué, mais réfléchissons :
- ton menu va utiliser des liens -> tu vas avoir besoin de balises <a>
- as-tu donc réellement beoin de tes balises <p> là ? peut-être pas...
tu pourrais donc très bien faire quelquechose comme ça (je schématise) :

<div>
<a>lien1</a>
<a>lien2</a>
</div>

Celà peut être un peu casse tête puisque tu vas devoir gérer la différence de comportement des balises en ligne que sont les <a> par rapport aux <p> de type bloc, mais c'est faisable.

Maintenant, et si tu regardes un peu comment sont faits les menus, il serait peut-être mieux d'utiliser des balises comme les <ul><li> (ou <dl><dt> - pas de polémique )... Jette donc un oeil dans les modèles de la galerie de Raphaël ou sur le forum.

Ensuite pour ta question de classe et d'héritage, biensur qu'il est possible de les "imbriqués" : lorsque tu définis un style de div (par exemple ta classe menu a une font arial) et que tu y places un paragraphe à l'intérieur, avec une classe qui lui donne la couleur rouge... la font du paragraphe est comment ? En arial ? et en rouge ?

On a l'habitude d'utiliser les classes pour des éléments "réutilisables" : si je fais une classe qui attribue la couleur rouge, je pourrais l'appliquer à des divs, des p, des span... pleins de balises différentes dans ma page sans problème.
En revanche, si je n'ai pas besoin de réutiliser ce style tel quel et que je ne dois l'appliquer qu'une seule fois dans ma page, je vais utiliser plutôt les #id.

J'espère t'avoir apporté de quoi réfléchir. Fais des essais sans rentrer dans les détails, fais toi des blocs rouges avec des paragraphes bleux, juste pour tester les héritages, les comportements des uns et des autres et surtout essayes les exemples de la FAQ, des tutos... C'est le meilleur moyen de commencer à aborder les choses et d'en comprendre les bases qui te serviront tout le temps ensuite

/Edit/
Coiffée au poteau
Modifié par cktoon (13 Oct 2005 - 22:58)

Merci bien à vous deux pour vos réponses claires

Ah oui, je n'ai pas encore le réflexe d'utiliser ces fameuses listes, pour tout dire j'ai toujours fais des sites wysiwyg à partir de photoshop en allégeant le code html par la suite, donc l'expérience est nouvelle de faire un menu autrement...

Je pense que je pourrais faire ainsi, j'espère juste qu'il me sera possible de paramétrer la position de chacun des liens du menu exactement comme je le souhaite (centré dans la colonne verticale bleue et non dans le div), et aussi de les aligner par rapport aux puces qui suivent la courbe bleue comme sur l'exemple en tableaux :
http://perso.wanadoo.fr/mikachu/2005/index.htm

Enfin je vais tester, et si ca ne marche pas je reviendrai faire appel à vous.

Merci encore et bonne soirée/nuit/journée à vous

Et j'ai oublié de préciser que je trouve ce système génial que les CSS, et qu'on aurait pu m'en parler plus tot !!!! Le rève de tout graphiste se réalise !

Ca fait des années que je rève d'un système ou on place les éléments à sa guise, comme on le ferait sur un logiciel de mise en page façon in-design ou x-press... mais je m'égare !

Vivement que je maîtrise tout ca, et à mort les tableaux !!

Merci encore à tous, ca marche parfaitement, je crée la liste et je définis à chaque puce :

position: fixed;
    	top: 00px;
    	left: 00px;

et ca marche

Je peux donc clore le sujet