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

 Le 19/01/2019 à 09h44 m-ickael Avatar  
 


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 :)

CsN Fusée


 Le 19/01/2019 à 11h19 Myster Avatar  
 


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

CsN Mortier


 Le 19/01/2019 à 11h34 Swan Avatar  
 


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.


Administrateur


 Le 20/01/2019 à 10h14 m-ickael Avatar  
 


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

CsN Fusée


 Le 29/01/2019 à 23h45 ElenWii Avatar  
 


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

CsN Fuzil


 Le 30/01/2019 à 10h36 Swan Avatar  
 


Bonjour,

Donc c'est bien se que je pensais ^^

Swan.


Administrateur


 Le 30/01/2019 à 15h54 m-ickael Avatar  
 


Merci bien :top

CsN Fusée


Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie
Qui est en ligne ?

Qui est en ligne ?

Au total il y a 1 Utilisateur en ligne :: 0 Administrateur, 0 Modérateur, 0 Membre et 1 Visiteur
( basées sur les utilisateurs actifs des 5 dernières minutes )
Utilisateur en ligne: Aucun membre connecté

Membres connectés au cours des dernières 24 heures:

Swan, Sodeska,

Légende

 [ Administrateur(s) ]   [ Modérateur(s) ]   [ Helpers]   [ WebDesigner(s) ]   [ Membres ]