Antivirus offre spéciale - jusqu'à 60 % de réduction avec openElement !
Accueil Forum Accueil Forum >

openElement

> Web Café > Code (JS, PHP, CSS etc.), techniques etc.
  Nouveaux messages Nouveaux messages Fil RSS  - CSS, #ID vs .classe perso
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

CSS, #ID vs .classe perso

 Répondre Répondre
Auteur
Message
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 5669
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Sujet: CSS, #ID vs .classe perso
    Envoyé : Apr 10 2015 à 10:50pm
Curieusement le code CSS suivant fontionne très bien avec #ID et très mal avec le nom de classe perso.
 
Ce code CSS fonctionne bien en start body
 
/* Fond noir transparent */
#WEb5a3414037{
    display: none;
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0,5;
    z-index: 5000;
}
 
/* panneau de demande de prix */
#WEdb4fda45b5{
 display: none; /*--masqué par défaut--*/
 position: fixed; left: 0; top: 0;
 z-index:99999 !important;
}
 
Ce code avec le nom d'une classe perso n'exécute que la ligne display.
 
/* Fond noir transparent */
.masquenoir{
    display: none;
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: 0,5;
    z-index: 5000;
}
 
/* panneau de demande de prix */
.demandesoumission{
 display: none; /*--masqué par défaut--*/
 position: fixed; left: 0; top: 0;
 z-index:99999 !important;
}
 
J'ai déjà eu du succès avec les classes perso avec des versions précédentes mais pas avec la version courante de OE.


Edité par Hobby001 - Apr 10 2015 à 11:02pm
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Jan 18 2014
Status: Inactif
Points: 3972
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 10 2015 à 11:11pm
1. c'est pas dans "header" qu'il vaut mieux mettre le CSS ? (et non dans start body?)

2. avec les class il faut parfois ajouter : !important
background: #000 !important;
position: fixed !important;
left: 0 !important;
top: 0 !important;
etc....


Edité par nico38 - Apr 10 2015 à 11:11pm
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 5669
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 10 2015 à 11:33pm
Avec !important, le résultat varie selon l'endroit donc pas de résultat probant.
 
Dès que j'utilise les classes perso.  je perd le résultat.  En fait, mettre !important sur toutes les lignes en utilisant les ID bousille le résultat. Dès que je remplace le premier ID par la classe perso, la seule ligne qui semble s'exécuter est le display: none;
 
Curieusement, dès que je sauvegarde la page avec le nom de la classe perso, l'affichage change pour: .masquenoir{<-->} les instructions sont escamotées derrière le  <-->
 
J'ai aussi suivi votre suggestion d'aller en header, sans résultats.
 
Ce qui me turlupine le plus c'est qu'il y a quelques temps j'ai suivi les directives de Larsene dans son tuto Volet d'accueil, fluidité... avec succès.  le code CSS y est écrit de la même façon avec des classes perso.
 
Donc je commence à craindre que nous ayons perdu quelque chose dans la transition vers la version courante.


Edité par Hobby001 - Apr 10 2015 à 11:58pm
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member
Avatar

Depuis le: Jan 18 2014
Status: Inactif
Points: 3972
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 12:20am
apres il faudrait un lien pour voir d'où vient le réel probleme. Si un ID fonctionne et pas les class c'est qu'il doit y avoir une "instruction" ailleurs qui empêche le code css d'être affiché


Edité par nico38 - Apr 11 2015 à 12:21am
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 5669
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 12:26am
http://www.chpsupply.com/Pages/Laveuses/EauFrFixCom1.htm
 
Si vous faites un click sur le bouton "Demander une soumission" sous le tableau, vous verrez que le masque noir ne s'affiche pas.
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5392
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 7:38am
Rien que de très normal ici. Vous avez défini un certain nombre de propriétés directement sur l'ID, et d'autres contradictoires sur la classe.

La règle de priorité en CSS veut que les règles définies sur l'ID sont prioritaires sur celles définies sur la classe.



Testez directement dans le navigateur, en décochant les règles placées sur l'ID, celles de la classe s'appliquent et tout fonctionne.

Il faut donc bien rajouter le hack "!important" sur les propriétés CSS définies dans la classe qui doivent s'imposer. Et ça fonctionne.


Edité par Larsene - Apr 11 2015 à 7:45am
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5392
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 7:54am
et pour faire le point :

Message posté par Hobby001 Hobby001 a écrit:

Curieusement, dès que je sauvegarde la page avec le nom de la classe perso, l'affichage change pour: .masquenoir{<-->} les instructions sont escamotées derrière le  <-->

C'est lié à la nouvelle possibilité de collapse de code, qui permet une meilleure vision globale. C'est vrai qu'il se replie parfois tout seul ...
Citer Ce qui me turlupine le plus c'est qu'il y a quelques temps j'ai suivi les directives de Larsene dans son tuto Volet d'accueil, fluidité... avec succès.  le code CSS y est écrit de la même façon avec des classes perso.
Donc je commence à craindre que nous ayons perdu quelque chose dans la transition vers la version courante.


Non, rien à voir, et mon tuto sur les fenêtres modales fonctionne toujours parfaitement sur la dernière version 1.48R3 (comme tous mes autres tutos).


Edité par Larsene - Apr 11 2015 à 7:56am
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: Feb 14 2015
Pays: Canada, Québec
Status: Inactif
Points: 5669
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 12:39pm

Merci de prendre le temps de vous faire comprendre c'est apprécié.

Donc, si je comprends bien, toutes les propriétés redéfinies dans le panneau « Propriétés » à droite sont assignées à l’ID de l’élément.  C'est à mon sens le seul endroit qui reflète des changements aux propriétés dans ma page.

Si cet énoncé est valable cela explique bien pourquoi, elle cessait de fonctionner correctement.

Une autre particularité surprenante, le code CSS édité en français a du être recopié sur la version anglaise. Cette fois, le code n'a pas suivi.  



Edité par Hobby001 - Apr 11 2015 à 12:49pm
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: Mar 05 2012
Pays: France
Status: Inactif
Points: 5392
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : Apr 11 2015 à 1:39pm
Message posté par Hobby001 Hobby001 a écrit:

Donc, si je comprends bien, toutes les propriétés redéfinies dans le panneau « Propriétés » à droite sont assignées à l’ID de l’élément.  C'est à mon sens le seul endroit qui reflète des changements aux propriétés dans ma page



Oui, c'est tout à fait cela (+ le positionnement via les saisies en dessous de la page).

Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 10.18
Copyright ©2001-2014 Web Wiz Ltd.

Cette page a été affichée en 0,047 secondes.
Acheter votre vélo en ligne