Comment attribuer des styles différents à [Résol

Question

fuerchan

10 Oct 2008 à 19:07

Bonjour,

Tout d'abord je m'excuse si le sujet est un peu léger mais je ne sais comment rèsumer mon problème en une ligne Smiley smile

Bon voilà.

dans une page tous mes suivent cette règle CSS :


p{
	margin:5px;
	text-align:center;
	padding-bottom:10px;
}

Ok, tout va bien.

Mais, dans une autre page mes ne suivent plus cette règle mais, celle ci :


.para2{
	margin-top:5px;
	margin-right:auto;
	margin-left:auto;
	width:600px;
	height:auto;
	text-align:justify;
}

Suis je obligé d'appliquer class="para2" à tous mes


<p class="para2"> bla bla bla </p>

ou existe-t-il une astuce, un truc, un tour de magie, autocollant... ou autres pour éviter d'avoir à le mettre à chaque fois ?

Merci à vous Smiley smile

F.
Modifié par fuerchan (12 Oct 2008 - 07:46)

Mikachu

10 Oct 2008 à 19:13

Salut,

Pour constater un peu plus précisément ton problème et être en mesure de t'aider, il serait bien que tu nous fournisses dans l'idéal une page en ligne, ou au moins l'intégralité de ton code, comme le recommande la règle 13 du forum. Smiley cligne

En l'état, il est peu évident de cerner le problème. Smiley murf

knarf

10 Oct 2008 à 19:16

Bonjour,

a écrit :
Suis je obligé d'appliquer class="para2" à tous mes

Avec le peu d'explications fournies comme le souligne Mikachu je dirai non.

#mon_autre_page p

{
margin-top:5px;
margin-right:auto;
margin-left:auto;
width:600px;
height:auto;
text-align:justify;
}

Cela appliquera le propriétés à tous les pargraphes inclus dans #mon_autre_page
Modifié par knarf (10 Oct 2008 - 19:20)

yodaswii

10 Oct 2008 à 19:50

Cela ressemble fort à un "problème" de priorité des sélecteurs ... Smiley cligne

Mais en effet, il nous en faut plus pour s'en assurer ...

fuerchan

10 Oct 2008 à 21:58

Malheureusement je ne peux pas le mettre en ligne... Cela dit je peux donner le code (en chantier).

Page accueil (index.html) :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <link rel="stylesheet" type="text/css" href="styles/commun.css"/>

        <title>Accueil</title>

    </head>

    <body>

        <div id="conteneur">

            <!-- DEBUT TETE -->

            <div id="tete">
                <p class="titremodele">Accueil</p>
            </div>

            <!-- DEBUT BANDE -->

            <div id="bande">
                <p class="titrenotice">Titre</p>
            </div>

            <!-- DEBUT CORPS -->

            <div id="corps" class="lienmenu">

                <div id="menugauche">
                </div>

                <div id="divmodele">
                    <p>texte, texte, texte, texte, texte, texte, texte, texte, </p>
                    <p>texte, texte, texte, texte, texte, texte, texte, texte, </p>
                    <p>texte, texte, texte, texte, texte, texte, texte, texte, </p>
                </div>

            </div>
            <!-- DEBUT PIED -->

            <div id="pied">
            </div>
        </div>

    </body>
</html>

Le style pour les de la page accueil :


p{
	margin:5px;
	text-align:center;
	padding-bottom:10px;
}

L'autre page (page2.html), sur laquelle les doivent être réglés différemment :



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <link rel="stylesheet" type="text/css" href="../../styles/commun.css"/>

        <title>page 2</title>
    </head>
    <body>
        <div id="conteneur">

            <!-- DEBUT TETE -->
            <div id="tete">
                <p class="titremodele">Titre du modèle</p></div>

            <!-- DEBUT BANDE -->
            <div id="bande">
                <p class="titrenotice">Présentation</p>
            </div>

            <!-- DEBUT CORPS -->
            <div id="corps" class="lienmenu">

                <div id="contenu">
                    <!-- DEBUT CONTENU -->

                    <p class="para2">texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, </p>
                    <p class="para2">texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, </p>
                    <p class="para2">texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, </p>
                    <p class="para2">texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, texte, </p>
                </div>

            </div>

            <!-- DEBUT PIED -->
            <div id="pied">
            </div>
        </div>

    </body>
</html>

Le style à appliquer pour les à la page 2 :


.para2 {
	margin-top:5px;
	margin-right:auto;
	margin-left:auto;
	width:600px;
	height:auto;
	text-align:justify;
}

J'ai fait le test avec #nom_ma_page{ ... }
Mais cela ne change rien.

Merci

F.

Felipe

Administrateur

11 Oct 2008 à 10:31

Bonjour,

je n'ai pas compris quel résultat tu souhaitais obtenir sur la 2ème page? Que ce soit centré (sélecteur p) ou au contraire que ce soit la règle avec .para2 qui soit appliquée? (je suppose que pour la 1ère page c'est bon et qu'il n'y a pas de régression càd que la nouvelle règle avec .para2 ne fait pas tout planter dans la 1ère page. Si c'est pas ça précise aussi ce que tu veux pour la 1ère page et pour quelle raison tu as créé la règle avec .para2 ...)

D'après ton dernier message, toutes les instructions de p{} SAUF UNE sont "annulées" (écrasées) par .para2{}
Regarde tes paragraphes avec l'extension Firebug pour Firefox, c'est plus visuel (la règle p{} est en-dessous parce que moins spécifique, avec toutes les instructions barrées sauf une)
Il s'agit de

padding-bottom: 10px;

Si tu veux une valeur de 0 pour .para2{} il va te falloir le préciser sinon l'instruction padding-bottom de p{} continuera à s'appliquer ...

fuerchan

11 Oct 2008 à 14:34

En faite mon problème est plus simple que ça Smiley smile

Par rapport aux codes donnés ci dessus, je voudrais que les propriétés de la règle para2 soient appliquées aux de ma page 2 sans avoir à mettre la class="para2" à chaque paragraphe, c'est à dire éviter ceci :


<p class="para2"> paragraphe 1 </p>
<p class="para2"> paragraphe 2 </p>
<p class="para2"> paragraphe 3 </p>
... etc

Alors je me demandai s'il n'y avait pas une solution à cela.
Comme m'a proposé Knarf en ajoutant le nom de ma page dans ma règle :


#ma_page p{

 }

Mais cela ne fonctionne pas.

Merci Smiley smile

F.

knarf

11 Oct 2008 à 15:26

Bonjour,

As tu déclaré une id #ma_page au moins dans ton code html ?

Vu le code :


<div id="contenu"> <!-- dans la premiere page appelé divmodele -->
<!-- DEBUT CONTENU -->
   <p></p>
   <p></p>
   <p></p>
   <p></p>
</div>

l'exemple deviendrait #contenu p et cela devrait fonctionner

fuerchan

11 Oct 2008 à 19:33

Super !!
Ca fonctionne !

Effectivement, cela venait d'un problème d'identification dans le html et css.

Donc voilà comment j'ai corrigé la chose, selon vos remarques :

1) Identifier les 2 div qui contient les différemment (contenu et contenu2).

2) Appliquer la même règle pour les 2 div comme ceci :


div#contenu, #contenu2{
...		
}

3) Ensuite, pour contenu j'applique ceci :


p{ 
...
}

4) Et pour contenu2 ceci :


#contenu2 P { 
...
}

Toute fois, corrigez moi si j'ai des erreurs de syntaxe...

Un grand merci !!

F.

knarf

12 Oct 2008 à 06:00

Cool

,

Pour la syntaxe css non il n'y a pas d'erreur.

Si tu considères que ce sujet est [Résolu] merci de l'indiquer en éditant ton premier post et en modifiant le titre Smiley cligne

.
Modifié par knarf (12 Oct 2008 - 06:00)

fuerchan

12 Oct 2008 à 07:49

Bonjour,

Ok, donc si tout est bon, c' est résolu Smiley biggrin

Encore un grand merci !

F.

Sujet clos

CSS et mise en forme, CSS3

Comment attribuer des styles différents à <p> </p> [Résol