28172 sujets

CSS et mise en forme, CSS3

[Résolu] Cacher une div sur une seule de mes pages web

Bonjour,


Est-il possible de cacher une div sur une seule de mes pages, alors qu'elle est présente sur toutes mes pages?

En gros j'ai:

<div id="partie1> Des trucs dedans </div>
<div id="pagespéciale"> Des trucs dedans </div>


Et je voudrais que sur ma "page spéciale", la div partie1 se masque.

Existe il des conditions de type: If "sur la page on a la div pagespéciale" alors on masque la "div partie 1", le tout en CSS?

Il s'agit d'un wordpress avec l'appli wp-e-commerce donc j'ai accès à peu de pages, voilà pourquoi j'essaie de le régler en css.

Merci pour votre aide,

Lili-
Bonjour,
Je ne suis pas un spécialiste de wordpress, mais il me semble que les pages y sont identifiées.
Le body de chaque page comporte un identifiant de page dans l'attribut "class":

<body class="home page-template-default page page-id-24 wordpress-francophone" ...>


Ce qui te permet d'écrire, si ta page spéciale est identifiée par wordpress comme "page-id-24":

.page-id-24 #partie1{ display:none; }
Bonjour Loic,

Merci pour votre réponse!
J'ai essayé mais j'ai l'impression que le plugin annule le ID des pages, car ca ne fonctionne pas.

J'ai essayé avec .post-id-2099 mais ca ne fonctionne pas..
Et tu as 
<body class="customize-support">
dans toutes tes pages ou juste dans ta page spéciale ?
Non dans toutes mes pages, que ca soit le thème, les pages créées par le plugin ect...
Ben alors je ne sais pas.

Tu peux toujours le faire un peu salement en js:

if(document.getElementById("pagespéciale")){
  document.getElementById("partie1").style.display = "none";
}


Mais ce serait mieux que quelqu'un de calé en wp passe par ici.

Bon courage.
Meilleure solution
Merci!! Smiley smile

Pardonnez mon ignorance mais... Je peux inclure du .js dans ma page css?
Car je ne connais pas du tout ce language, uniquement le html et css.

Merci encore!
Non, on ne peut pas mettre du js dans du css ... Il faudrait le mettre dans le html (entre <script>et </script>) ou dans un fichier .js appelé par la page.

Cependant, comme je l'ai dit au départ, je ne connais pas suffisamment wordpress pour te donner la meilleure méthode.
Ca a fonctionné!!!

Merci beaucoup!

J'ai placé le code que vous m'avez donné dans la page "page.php" de mon thème.

Au début j'essayais dans les fichiers PhP du plugin wp-ecommerce mais en fait comme il s'agit d'une page créée dans wordpress, c'était tout bêtement le page.php!

Merci encore!!! Smiley smile
En fait j'ai une autre question,
La technique que vous venez de m'apprendre va m'être utile pour d'autres pages finalement.


<script>
 if (document.getElementById("checkout_page_container")){
  document.getElementById("shoppingcart").style.display = "none";
}
        
 if (document.getElementsById("wpsc_default_product_list")){
  document.getElementsByTagName("thead").style.display = "none";
}
<script>


Pensez-vous que je puisse l'utiliser deux fois à la suite comme ceci? Ca n'a pas l'air de fonctionner quand je l'utilise 2 fois de suite donc j'essaie un peu dans tous les sens jusqu'au moment ou je trouverais une combinaison qui fonctionne!

Merci,


Lili-
Bonjour,
Tu n'as pas vraiment écrit la même chose, dans la 2ème condition, tu utilises getElementsByTagName, qui renvoie un tableau de tous les thead de la page.

Il faudrait écrire
document.getElementsByTagName("thead")[0].style.display = "none";
pour faire disparaître le 1er thead de la page, ...[1] pour le 2ème etc ...
J'ai essayé de me familiariser avec cette fonction cet après midi.. peu concluant!
En fait le display:none fonctionne une fois que j'ai rechargé la page, je ne comprends pas pourquoi, c'est très étrange!


Aussi, je n'arrive pas à changer la couleur de mon cadre sur la dite "spéciale page", j'ai pourtant trouvé qu'on pouvait écrire dans la fonction "backgroundColor", pensez vous que cela peut venir du fait que .cadre est plus haut que .default_products_page_container dans mon arborescence?

         if (document.getElementById("default_products_page_container")){
document.getElementById("cadre").style.backgroundColor = "rgba(10, 10, 10, .88);
}



Merci!
Modérateur
lili- a écrit :
J'ai essayé de me familiariser avec cette fonction cet après midi.. peu concluant!
En fait le display:none fonctionne une fois que j'ai rechargé la page, je ne comprends pas pourquoi, c'est très étrange!

si ton script est lancé avant le chargement complet de la page, il se peut que la condition ne soit pas rempli.
lili- a écrit :

Aussi, je n'arrive pas à changer la couleur de mon cadre sur la dite "spéciale page", j'ai pourtant trouvé qu'on pouvait écrire dans la fonction "backgroundColor", pensez vous que cela peut venir du fait que .cadre est plus haut que .default_products_page_container dans mon arborescence?

C'est une autre question ... sinon, non si ton script est lancé auchargement complet de la page.
lili- a écrit :

         if (document.getElementById("default_products_page_container")){
document.getElementById("cadre").style.backgroundColor = "rgba(10, 10, 10, .88);
}



Merci!

Il te manque la double apostrophe fermante .
         if (document.getElementById("default_products_page_container")){
document.getElementById("cadre").style.backgroundColor = "rgba(10, 10, 10, .88)";
}


Cdt
Sujet clos
Aller à