web-dev-qa-db-fra.com

Mise en place de deux modules côte à côte

J'essaie de placer ces deux modules 1

cote à cote. Ils sont dans la même position et le bon ordre. J'ai également créé un nouveau suffixe de module pour la largeur des modules. Voici le code:

 .box.color3 .content {
   clear: none!important;
   float: left;
   width: 50%;
}

.box.color3 .header {
   color: #0090BE;

}

.box.border.color3 {
clear: none!important;
   float: left;
   width: 50%;

}

De plus, je gère le site localement, je ne pouvais donc pas fournir le lien du site.

moduleoverridescsstemplate-overridemodule-display
1
TheAdnan

Si vous souhaitez placer deux modules côte à côte dans une seule position de module, vous pouvez essayer les solutions suivantes:

  1. Publiez chacun des deux modules sur des positions personnalisées (par exemple, "myLeftModule" et "myRightModule").

  2. Ajoutez le code CSS suivant sur votre site pour permettre une mise en page à deux colonnes (il existe de nombreuses façons d’y parvenir, c’est juste un exemple):

    #wrap {
   width:100%;
   margin:0 auto;
}
#left_col {
    float:left;
   width:50%;
}
#right_col {
   float:right;
   width:50%;
}

  3. Créez un nouveau module HTML personnalisé et ajoutez le code suivant pour créer une disposition de deux colonnes:

    <div id="wrap">
    <div id="left_col">
        {loadposition myLeftModule}
    </div>
    <div id="right_col">
        {loadposition myRightModule}
    </div>
</div>

    Le {loadposition ...}tag va charger vos modules à partir des positions données, et ils doivent être parfaitement alignés côte à côte.

  4. Avant d'enregistrer votre module, n'oubliez pas d'activer "Préparer le contenu" dans votre module HTML personnalisé afin de permettre à la {loadposition}tiquette au travail: Joomla module Prepare content

0
johanpw

C'est difficile à dire, sans connaître le code HTML de la page. Le css que vous avez fourni ne signifie rien en soi.

Donc, quelques points à considérer:

Même si le css que vous avez créé est propre à aligner à gauche 2 éléments, cela ne signifie pas que cela fonctionnerait partout.

Il se peut que d’autres règles css aient priorité sur vos règles ou que vous n’appliquiez pas vos règles aux classes appropriées - utilisation incorrecte des sélecteurs css.

Normalement, vous devrez flotter à gauche ou afficher en ligne les 2 éléments enveloppants du contenu de vos modules, qui doivent être les éléments enfants à l'intérieur de l'élément enveloppant de la position du module.

En plus des flottants, vous devez vous assurer que leur largeur totale, marges, bordures et rembourrages comprises, est de 100% maximum.

Vous devez utiliser l'inspecteur de votre navigateur pour savoir ce qui se passe avec votre balisage et vos CSS.

0
FFrewin

MODIFIER

Pour développer un point intéressant de Lodder, ce n'est pas la solution idéale si la bibliothèque Bootstrap n'est pas déjà utilisée dans d'autres facettes du site Web.

Vous pouvez le faire facilement en utilisant la bibliothèque bootstrap). Premièrement, en haut du fichier PHP, chargez la bibliothèque:

 JHtml::_('bootstrap.framework');

Puis tournez votre code HTML comme suit:

<div>
    <div class="pull-left">
        Content
    </div>
    <div class="pull-right">
         Content
    </div>
    <div class="clearfix"></div>
</div>

Comment cela aide!

0
Brian Bolli