div inactif dans article

Réduire
X
 
  • Filtrer
  • Heure
  • Afficher
Tout effacer
nouveaux messages

  • [RÉGLÉ] 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 :

    Code HTML:
    <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.

  • #2
    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 ?
    Pas de demande de support par MP.
    S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

    Commentaire


    • #3
      Re : div inactif dans article

      Envoyé par syl-20 Voir le message
      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 :

      Code HTML:
      <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.

      Commentaire


      • #4
        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)... !

        Commentaire


        • #5
          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 ,
          Code PHP:
          <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.
          Pas de demande de support par MP.
          S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

          Commentaire


          • #6
            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 :

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

            Code:
            #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 ?

            Commentaire


            • #7
              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.
              Pas de demande de support par MP.
              S'il n'y a pas de solution, c'est qu'il n'y a pas de problème (Devise Shadok)

              Commentaire


              • #8
                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 ?

                Commentaire


                • #9
                  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
                  Code:
                  <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>
                  UP, le plugin universel à découvrir sur https//up.lomart.fr
                  bgMax
                  , AdminOrder, MetaData, Zoom, ArtPlug, Custom, Memo, Filter, ... sur http://lomart.fr/extensions

                  Commentaire


                  • #10
                    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 !

                    Commentaire

                    Annonce

                    Réduire
                    Aucune annonce pour le moment.

                    Partenaire de l'association

                    Réduire

                    Hébergeur Web PlanetHoster
                    Travaille ...
                    X