[Résolu]2 styles CSS sur une même page

Bonjour

J'ai une petite question. Est-il possible de dire que telle partie d'une page reçoit un style et l'autre partie un autre style ?

Je m'explique, je devais faire un module PHP qui doit entrer dans un gros projet. Mon module est finit et chaque page appelle la feuille de style correspondant.

Seulement voilà, maintenant que je dois l'inclure au projet final, j'ai du rajouter le menu qui était déjà définie. Pour faire le menu, une fonction javascript est appelée et dans cette fonction, y'a tout le style du menu définit ...

Alors forcément, avec ma feuille de style à moi, tout est cassé

Alors euh comment je peut arranger ça ?? Je suis pas sûre de savoir m'en sortir là ...

En tout cas merci pour votre aide
Modifié par poopsinou (26 Jun 2006 - 11:22)

Oui, en se servant des class.

Hmmm euh c'est-à-dire ??

Je vois pas trop comment je dis "toi tu utilises ça et pas ça!" lol

Je peux faire un div contenant le contenu de la page (sans le menu) et quand j'inclue la feuille CSS dans la page entière, je dis que ça va pour tel div ??
Modifié par poopsinou (22 Jun 2006 - 14:26)

Pour dire toi tu fais ca, et toi tu fais ca c'est somme toute pas si compliqué que ca :

http://www.siteduzero.com/tuto-3-32-1-mettre-en-place-le-css.html#ss_part_3

Euh tout ça je le savais déjà, mais ça ne m'avance pas (à moins que j'ai loupé la bonne partie dans ce que tu m'a donné).
En fait je crois que je me suis mal expliquée, alors je recommence !

J'ai ma page PHP comme je l'avais quand j'ai créé mon module et qui appelle une page css de cette façon :

<LINK href="CSS/cssRecherche.css" rel="stylesheet" type="text/css">

Et en fait, je fois rajouter le "bout de code" qui crée le menu dans chacune de mes pages PHP maintenant en faisant :
--> dans le head, j'appelle le fichier qui contient la fonction qui crée le menu :

<script language="javascript1.3" src="../classes/menusousIENS.js"></script>

Ce fichier contient le style du menu (en javascript) :

menStyle = "<STYLE>";
menStyle +="A {COLOR:BLUE;";
menStyle +="   TEXT-DECORATION:none;";
menStyle +="   background:'none';";
menStyle +="   font-weight : bold}";
menStyle +="A:link {}";
menStyle +="A:visited {}";
menStyle +="A:hover {COLOR:RED}";
menStyle +=".menu { font-family: Verdana, Arial, Helvetica, sans-serif ;FONT-SIZE: 11px; font-weight: bold; color: #FFFFFF}";
menStyle +=".sousmenu{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385;";
menStyle +="  	background-color:#FEF4E9}";
menStyle +=".sousmenubis{";
menStyle +="  	font-family: Verdana, Arial, Helvetica, sans-serif; FONT-SIZE: 11px;";
menStyle +="  	font-weight: bold;";
menStyle +="  	color: #005385}";
menStyle +=".sep{";
menStyle +="    background-color:#FEF4E9;";
menStyle +="    font-family: Verdana, Arial, Helvetica, sans-serif;";
menStyle +="    font-size: 1px;";
menStyle +="    border-bottom: 1px solid #005385;";
menStyle +="}";
menStyle +="</STYLE>";
document.write(menStyle);

--> dans le body, je crée le menu :

<script language="javascript1.3">
				var focusMenu = 0;
				
				focusMenu = menuActif(location.href);
				
				myBrowser = new Browser();
				var myMenu = new MenuObj(focusMenu);
				createmenu(myMenu,"");
			</script>

Donc en gros, j'appelle une feuille de style pour ce que j'avais créé, et ensuite j'appelle une page JS qui elle même définit un style. Donc au final ma page mixe les deux lol

Alors je voudrais savoir si y'a pas moyen (peur-être) d'entourer ma page PHP initiale (sans le menu) dans un div, et dire que ma feuille de style que j'importe ne s'applique qu'au div définit (comme ça le menu serait pas toucher). En fait, il existe peut-être une méthode pour éviter de faire monDiv.balise (ou autre) dans mon fichier CSS. Surtout que le body est définit dans le CSS et il est centré, alors le menu déroulante là, c'est la catastrophe, il déroule tout au milieu ...

Mais bon même si j'entoure ma page initiale, ça va pas aller, parce que le menu est dans le body qui lui fait partie de ma page initiale (euh j'suis claire là ?? )
Modifié par poopsinou (22 Jun 2006 - 14:43)

En appliquant la méthode mentionnée dans le dernier message de nORKy sur le post juste en dessous. Non ?!

http://forum.alsacreations.com/topic-4-15400-1-Mettre-un-bloc-sur-toutes-les-pages.html

poopsinou a écrit :
Mais bon même si j'entoure ma page initiale, ça va pas aller, parce que le menu est dans le body qui lui fait partie de ma page initiale (euh j'suis claire là ?? )

Suffit d'entourer deux fois

<div class="mapage">
...
</div>

TON MENU

<div class="mapage">
...
</div>

Euh je vais essayer mais là j'ai un doute.
par contre je peux pas entourer ma balise body par un div, c'est dommage pour le reste de la page c'est tout bon, mais ce que j'ai définie dans mon body, comment je fais ?
Modifié par poopsinou (22 Jun 2006 - 15:16)

Non, on ne peut pas entouré le body. A première vue, ton javascript ne modifie pas le body.

Et bien si ....

Parce que avec le body et le corps de la page, je faisais ce qu'il fallait pour centrer ce qu'il y a dans mon body.

Alors comme le menu est dans le body, il le centre ... et les sous-menus sont tous décalés après ... Et je peux pas m'amuser à changer le style du menu malheureusement

Alors là j'suis bien lol

Là c'est le menu comme il devrait être :


Et le menu qui est tout décalé à cause de mon body :

Modifié par poopsinou (22 Jun 2006 - 15:30)

Et pourtant, même à seconde et troisième vue ton JavaScript ne touche pas au body

Ceci dit, un menu comme ca, ca a une certaine classe

T'aurais pas une page en ligne histoire de voir le problème dans son intégralité ?!

Sinon, une idée comme ca, si le problème est que ton body centre tout, tu peux essayer :

<div align="left">
TON MENU
</div>

hihi

C'est nickel !! Merci merci beaucoup Je me voyais déjà tout reprendre

J'ai juste une toute petite dernière question.

#page_css #devisSaisi,#page_css #moeSaisi,.#page_css #ecoSaisi,#page_css #planningSaisi

Je suppose qu'il y a plus simple comm écriture non ?

EDIT :

Je viens de tester avec firefox Tout est bien positionné, mais y'a pas intérêt à dérouler le menu



D'où peut venir ce "gros trou" entre le menu et le sous-menu ??
Modifié par poopsinou (22 Jun 2006 - 16:04)

Pas que je sache

Ceci dit, un conseil, si tu as bien deux parties de pages que tu souhaites modifier, et donc une "class" que tu appeleras deux fois dans la même page, n'utilise pas d'id.

Ainsi

<div class="main"></div>
...
<div class="main"></div>

est correct, mais

<div id="main"></div>
...
<div id="main"></div>

est incorrect.

poopsinou a écrit :


J'ai juste une toute petite dernière question.

#page_css #devisSaisi,#page_css #moeSaisi,.#page_css #ecoSaisi,#page_css #planningSaisi

Je suppose qu'il y a plus simple comm écriture non ?

fait gaffe, tu as mis un . devant #page_css #ecoSaisi

Sinon, beh, non, il n'y a pas plus simple, enfin, ca depent ce que tu veux faire.
Tu peux mettre #page_css *


EDIT :
vivi, un identifiant devrait être référencer une seule fois seulement
et pour ton menu, beh, faudrait nous en mettre plus..
Modifié par nORKy (22 Jun 2006 - 16:09)

La marge peut peut être venir d'une marge (justement ^^) qui n'est pas défini comme nulle (une marge de dd, dt, ul, li).

Lol merci pour le point oublié !!!

Sinon Jedi, en fait c'est id, parce que le menu est la première chose faire après <body> donc voilà.

Euh sinon ton astuce du div aligné en left pour remettre le menu à gauche, c'est nickel sous IE, mais Firefox il est pas OK, il m'aligne tous les sous-menus tout à gauche, alors je peux jamais aller dedans

Vais-je m'en sortir ??

Pour ta remarque des marges, avant que je fasse tout ce que j'ai dit ici, ça allait sous Firefox ...
Modifié par poopsinou (22 Jun 2006 - 16:11)

Oups j'ai pas vu pour en mettre plus, ben le code est déjà plus haut, les imprim-écrans sont là. Tout ce que j'ai changé c'est :

<body>
	<div align="left">
                 Mon menu
         </div>
        <div id="page_css">
                 Mon contenu
         </div>
</body>

Et le changement du CSS, je vous ai montré :

body
{
	background-color:#FEFDCF;
	text-align : center;
}

#page_css #corps
{
	width : 590px;
	margin : 0 auto;
	text-align : left;
}
 ..............

Modifié par poopsinou (22 Jun 2006 - 16:20)

Bah si ca marchait avant sans les modifs que je t'ai proposé, pitêtes qu'enlever le centrage dans ton body et enlever le div que je t'ai proposé pour mettre le cetrage par la suite pourrait rendre le résultat attendu.

CSS :

body {
background-color:#FEFDCF;
}

#page_css {
text-align: center;
}

XHTML :

<body>
Mon menu

<div id="page_css">
Mon contenu
</div>

</body>

Ca marchait avant que je mette le menu ET fasses tout ce que tu as dit.

Bon j'ai changé comme tu l'as dit, ça marche sous IE, mais c'est toujours pareil sous Firefox. Là je suis perdue !

Je pense que y'a quelque chose qui le contrarie quand j'importe mon fichier css, mais là je vois pas, mais c'est bizarre, si j'enlève ma feuille de style, ça change rien