Easy-Design.Net forum




Aide générale La différence entre ces deux cas CSS

m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 19/01/2019 à 09h44
Salut.

Quelle est la différence entre ces deux codes svp ?

Code CSS :
#module-mini-notifications.module-mini-container {
    margin: 90px 0px 0px 0px;
    padding: 10px;
    background-color: transparent;
    border:none;
    border-spacing: 1px;
    clear: both;
    box-shadow: none;
    color: #fbfbfb;   
    font-size:1.1em; 
}
 
#module-mini-notifications .module-mini-contents {
    padding-top:0;
    border-top: none;
    border-bottom: none;
    text-align: left;
}


Je m'explique d’avantage, je vous inquiétez pas :)

Premier cas, j'ai mis #module-mini-notifications .xxxxxx qui est accroché, sans espace, et ça fonctionne. Si je met un espace comme le deuxième cas, mon CSS n'est plus pris en compte.

Inversement bien sûr sur le deuxième cas par rapport au premier cas, qui lui est collé à #module-mini-notifications.xxxxxxx

Merci pour vos lumières :)
Myster Membre non connecté

EDN Enraciné(e)

Rang

Avatar

Inscrit le : 19/01/2011 à 16h42

Messages: 871

Le 19/01/2019 à 11h19
Coucou,

Donc bah je vais essayer de t'expliquer donc en fait déjà les deux propriétés css commencent par un #, donc ce qui veut dire que un id="" en html qui est affecté par ces deux propriétés et pas un class="", ensuite .module-mini-container, c'est parce que tu touche au css à l'intérieur de l'id

Bon j'avoue que là c'est pas clair je t'explique

Code CSS :
 
#notification{
background:black;
}
#notification a {
color:orange;
}
 


Code HTML :
 
<div id="notification">
<a href="">Je suis à l'intérieur de l'id</a>
</div>
 


Comme tu peut le voir, j'ai modifier la propriété A qui est dans la div notification, et les A qui ne sont pas dans cette div ne seront pas affecté par le changement de la couleur en orange

Bon c'est peut-être flou encore non ? xD

Edit: Enfin je pense que c'est ça du moins je l'ai appris comme ça dans les cours vidéos Edité par Myster Le 19/01/2019 à 12h16
   
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 19/01/2019 à 11h34
Bonjour,

C'est vrai que je me suis déjà posé la question .. Mais vu que c'est une id et une class et associé, cela arrive parfois ! j'ai cherché aussi si cela ne venait pas de la structure en elle-même, et il serait plausible aussi que cela soit dû au fait qu'il sont associés sur le même div et le même tpl ou pas. Donc descendance parent.s enfant.s (je sais que cela va être dur à saisir).

Exemple 1 : CSS non relié



Tu vois pour ce code en vérité , il est généré par un tpl par défaut dans le "templates\default\framework\menus\modules_mini.tpl" donc un TPL indépendant du module lui même. Et que l'{ID} est redirigé par le php et pas en direct. C'est se qui causerait cette différence.

Code HTML :
<div id="{ID}" class="module-mini-container# IF C_HIDDEN_WITH_SMALL_SCREENS # hidden-small-screens# ENDIF #">
    <div class="module-mini-top">
        <h5 class="sub-title">{TITLE}</h5>
    </div>
    <div class="module-mini-contents">
        {CONTENTS}
    </div>
    <div class="module-mini-bottom">
    </div>
</div>


Code CSS :
 
#module-mini-notifications.module-mini-container {
    margin: 90px 0px 0px 0px;
    padding: 10px;
    background-color: transparent;
    border:none;
    border-spacing: 1px;
    clear: both;
    box-shadow: none;
    color: #fbfbfb;   
    font-size:1.1em; 
}


Exemple 2 : CSS relié



Après tu as l'autre exemple dans ton design.css ou tout est connecté en CSS car dans le même tpl et sur le même div :

Code TPL :
    <div id="main" class="# IF C_MENUS_LEFT_CONTENT #main-with-left# ENDIF ## IF C_MENUS_RIGHT_CONTENT # main-with-right# ENDIF #" role="main">
        # IF C_MENUS_TOPCENTRAL_CONTENT #
        <div id="top-content">
            # START menus_top_central #
            {menus_top_central.MENU}
            # END menus_top_central #
        </div>


OU là en Css :

Code CSS :
    #main.main-with-left,
    #main.main-with-right {
        width: calc(100% - 200px);
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }
 
    #main.main-with-left.main-with-right {
        width: calc(100% - 400px);
        -ms-flex: 1 0 auto; /*Tricks IE*/
    }


Après , je peux me tromper, mais je pense que c'est cela ..

Swan.


swan_signature

Site web    
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 20/01/2019 à 10h14
Bonjour et merci à tous les deux.

D'accord, donc si ça marche pas avec un espace, faut aussi essayer en accrochant les deux parties .. Une histoire de "cascade" en CSS si je comprends bien :)

Merci :top
ElenWii Membre non connecté

EDN Intéressé(e)

Rang

Avatar

Inscrit le : 30/12/2009 à 11h09

Messages: 73

Le 29/01/2019 à 23h45
L'espace permet simplement de préciser que tu parle d'un élément enfant.
Code TPL :
<div class="maclass-parent"><span class="maclass-enfant"></span></div>

Code CSS :
.maclass-parent .maclass-enfant


Si tu ne met pas d'espace c'est que tu parle du même élément.
Code TPL :
<div class="maclass-parent maclass-parent2"><span class="maclass-enfant"></span></div>

Code CSS :
.maclass-parent.maclass-parent2


C'est l'un des principes de sélecteur CSS. Edité par ElenWii Le 29/01/2019 à 23h46


Équipe Graphique PHPBoost.com
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 30/01/2019 à 10h36
Bonjour,

Donc c'est bien se que je pensais ^^

Swan.


swan_signature

Site web    
m-ickael Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 23/02/2010 à 09h15

Messages: 2296

Le 30/01/2019 à 15h54
Merci bien :top
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie