[RÉGLÉ] div inactif dans article

[syl-20]

Bonjour tout le monde,

Je m'arrache le peu de cheveux qui me reste. J'ai un article dans lequel je charge deux modules, chacun précédé d'un texte. Mon code source (tapé manuellement dans l'éditeur de source de l'article) est le suivant :

<p>texte d'accueil</p>
<div id="modules-container" style="border-radius:8px; box-shadow:0px 0px 6px #616161;">
<div id="module1" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 1</p>{loadposition moduleposition1}
</div>
<div id="module2" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 2</p>{loadposition moduleposition2}
</div>
</div>

ça marche ! Mais... le conteneur des 2 modules (modules-container) n'est pas pris en compte, son style (bords arrondis et ombre) ne s'applique pas en front-end, le code apparaît dans Firebug mais le div correspondant n'est pas éclairé quand je passe ma souris dessus...
Une idée ? Une erreur quelque part ?
Merci pour le coup de main.

[jisse03]

Re : div inactif dans article

Bonjour,

Pour que le border et shadow s'applique, dans le style, ne manquerait-il pas une mention border: 1px solid #000 ou n'importe quoi d'autre de valide en bordure ?

[lefabdu51]

Re : div inactif dans article

Bonjour tout le monde,

Je m'arrache le peu de cheveux qui me reste. J'ai un article dans lequel je charge deux modules, chacun précédé d'un texte. Mon code source (tapé manuellement dans l'éditeur de source de l'article) est le suivant :

<p>texte d'accueil</p>
<div id="modules-container" style="border-radius:8px; box-shadow:0px 0px 6px #616161;">
<div id="module1" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 1</p>{loadposition moduleposition1}
</div>
<div id="module2" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 2</p>{loadposition moduleposition2}
</div>
</div>

ça marche ! Mais... le conteneur des 2 modules (modules-container) n'est pas pris en compte, son style (bords arrondis et ombre) ne s'applique pas en front-end, le code apparaît dans Firebug mais le div correspondant n'est pas éclairé quand je passe ma souris dessus...
Une idée ? Une erreur quelque part ?
Merci pour le coup de main.

en bas du fichier css:
#modules-container {border-radius:8px; box-shadow:0px 0px 6px #616161;}

et suppression du style=" correspondant.

A tester.

[syl-20]

Re : div inactif dans article

Merci à tous les deux.
Malheureusement ça ne fonctionne avec aucune des 2 solutions. A ceci près que la solution de Jisse affiche un trait horizontal (ombré) en haut du modules-container. Puisque le trait est ombré des deux côtés, et qu'il fait à vue de nez le double de l'épaisseur que je lui ai donné, j'en déduis que ce trait, c'est mon div, vide, qui s'affiche en haut des deux autres (il ne les englobe pas)... !

[jisse03]

Re : div inactif dans article

Pour tes divs imbriquées, un width:49% ou approchant avec la première en float:left et la seconde float:right, ça donne quoi ?

Et si tu utilises un template bootstrap ,

<div class="container container-fluid">
    <div class="row">
        <div class="col-xs-6 col-md-4">ton premier module</div>
        <div class="col-xs-6 col-md-4">ton second module</div>
    </div>
</div> 

Bien sûr avec tes styles, et là, tu as vraiment ce qu'il te faut, avec repli pour les mobiles.

[syl-20]

Re : div inactif dans article

Yes ! Au moins j'ai le style du container, radius et shadow. Par contre les 2 div ne sont pas l'un à côté de l'autre. Mes codes :

<p>texte d'accueil</p>
<div id="modules-container" class="container container-fluid">
    <div class="row">
        <div id="module1" class="col-xs-6 col-md-4">
            <p style="font-weight: bold; margin: 0 0 20px 0;">texte module1</p>
            {loadposition moduleposition1}
        </div>
        <div id="module2" class="col-xs-6 col-md-4">
            <p style="font-weight: bold; margin: 0 0 20px 0;">texte module2</p>
            {loadposition moduleposition2}
        </div>
    </div>
</div>

CSS :

#modules-container {background:url("../images/bg-site6.png") repeat; border-radius:8px; box-shadow:0px 0px 6px #616161;}
#module1 {width:49%; padding:20px; float:left;}
#module2 {width:49%; padding:20px; float:right;}

J'ai fait une erreur ?

[jisse03]

Re : div inactif dans article

Tes CSS module1 et 2 ne servent plus à rien.
Et en fonction de ton template, tu devras peut-être ajuster les col-xs et col-md voir http://getbootstrap.com/css/ section Grid System.

[syl-20]

Re : div inactif dans article

Ok, merci, je vais étudier ça (je n'y connais rien).
Ceci dit, je ne comprends pas pourquoi il est impossible de mettre 2 div dans 1 autre dans le code source d'un article Joomla, c'est le B-A-BA du css non ?

[lomart]

Re : div inactif dans article

Bonsoir,

Ceci dit, je ne comprends pas pourquoi il est impossible de mettre 2 div dans 1 autre dans le code source d'un article Joomla

Et pas que dans Joomla! Les 2 div internes sont hors du flux du fait du float. Il suffit d'ajouter un clear avant de refermer la div parent

<p>texte d'accueil</p>
<div id="modules-container" style="border-radius:8px; box-shadow:0px 0px 6px #616161;">
<div id="module1" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 1</p>{loadposition moduleposition1}
</div>
<div id="module2" style="float: left;">
<p style="font-weight: bold; margin: 0 0 20px 0;">texte module 2</p>{loadposition moduleposition2}
</div>
[COLOR="#FF0000"]<div style="clear:both;"></div>[/COLOR]
</div>

[syl-20]

Re : div inactif dans article

Punaise, c'est pas possible d'être aussi c... Oui mais c'est à cause de vos nouvelles technologies, là, les bootstrap, flex et compagnie, j'en oublie les bases Merci lomart, ça marche !