BullGuard Antivirus Sale - 60% Off with 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: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
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é : 10 Avr 2015 à 23:50
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 - 11 Avr 2015 à 00:02
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 00:11
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 - 11 Avr 2015 à 00:11
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 00:33
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 - 11 Avr 2015 à 00:58
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 01:20
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 - 11 Avr 2015 à 01:21
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

Depuis le: 14 Feb 2015
Pays: Canada, Québec
Status: Inactif
Points: 6507
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer Hobby001 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 01:26
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


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 08:38
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 - 11 Avr 2015 à 08:45
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 08:54
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 - 11 Avr 2015 à 08:56
Haut de la page
Hobby001 allez vers le bas
Admin Group
Admin Group
Avatar
Modérateur

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

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 - 11 Avr 2015 à 13:49
Haut de la page
Larsene allez vers le bas
Admin Group
Admin Group


Depuis le: 05 Mar 2012
Pays: France
Status: Inactif
Points: 5388
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer Larsene Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 11 Avr 2015 à 14:39
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 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.078 secondes.