web-dev-qa-db-fra.com

Problème de taille de bannière

J’ai eu un problème avec les bannières jusqu’à présent et cela m’oblige à me couper les cheveux et j’espère pouvoir obtenir la solution ici. Lorsque je mets plus d'un module de bannière sur une page (disons 3 bannières), il semble que les 3 affichent la même taille (même largeur), même si les trois ont des tailles différentes dans les options du module. Quel pourrait être le problème ici? Exemple: enter image description here

c'est le code de la bannière:

<div class=" jcarousel-skin-tango"><div class="jcarousel-container jcarousel-container-horizontal" style="position: relative; display: block;"><div class="jcarousel-clip jcarousel-clip-horizontal" style="position: relative;"><ul id="mycarousel1714" class="jcarousel-list jcarousel-list-horizontal" style="overflow: hidden; position: relative; top: 0px; margin: 0px; padding: 0px; left: 0px; width: 486px;">

    <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">
                                            <img src="/images/ibertex.jpg" alt="Info 1" width="1150" height="60">

                        </li>
        <li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-2 jcarousel-item-2-horizontal" jcarouselindex="2" style="float: left; list-style: none; width: 243px;">
                                            <img src="/images/voip-10.JPG" alt="info 2" width="1150" height="60">

                        </li>
    </ul></div><div class="jcarousel-prev jcarousel-prev-horizontal jcarousel-prev-disabled jcarousel-prev-disabled-horizontal" style="display: block;" disabled="disabled"></div><div class="jcarousel-next jcarousel-next-horizontal" style="display: block;"></div></div></div>

Modifier:

Je suis d'ailleurs à l'aide de bannières Caroussel, et voici le fichier css:

/**
 * This <div> element is wrapped by jCarousel around the list
 * and has the classname "jcarousel-container".
 */
.jcarousel-container {
    position: relative;
}
.jcarousel-container li{
    margin-left:0;
}
.jcarousel-clip {
    z-index: 2;
    padding: 0;
    margin: 0;
    overflow: hidden;
    position: relative;
}

.jcarousel-list {
    z-index: 1;
    overflow: hidden;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    padding: 0;
}

.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 454px;
    height:auto;
    overflow: hidden;
}

/**
 * The buttons are added dynamically by jCarousel before
 * the <ul> list (inside the <div> described above) and
 * have the classnames "jcarousel-next" and "jcarousel-prev".
 */
.jcarousel-next {
    z-index: 3;
    display: none;
}

.jcarousel-prev {
    z-index: 3;
    display: none;
}
.jcarousel-item a {
    padding: 0!important;
}
.jcarousel-item a:hover
{background: none!important;
}

La largeur est définie sur width: 454px; mais le défaut qui a montré plus tôt était:

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">

Si je change la largeur de ce fichier css, ça va marcher?

joomla-3.xmodule-displaycom-banners
1
zenami

Le module Carrousel Banner requiert des largeurs fixes pour fonctionner correctement, comme l'explique le commentaire dans le fichier CSS:

.jcarousel-item {
    float: left;
    list-style: none;
    /* We set the width/height explicitly. No width/height causes infinite loops. */
    width: 454px;
    height:auto;
    overflow: hidden;
}

Le width: 454px; valeur est la valeur par défaut, mais elle peut être remplacée pour chaque module dans les paramètres du module et sera ajoutée en tant que style en ligne:

Carousel Banner settings

Cette valeur est probablement définie sur 243 dans tous vos modules, pour résoudre ce problème, vous devez modifier chaque module avec une valeur qui fonctionne avec la présentation de votre modèle.

Malheureusement, cela causera des problèmes avec votre modèle sur de petits écrans si vous utilisez un design réactif, à moins que vous ne trouviez le moyen de le contourner (masquez les bannières sur de petits écrans ou modifiez la largeur à l’aide de jQuery).

1
johanpw

Ce sera très probablement un style de modèle. Je suppose que vous utilisez le module/composant principal des bannières au lieu d’un tiers?

Utilisez un inspecteur d'éléments (F12 sous Chrome ou Firebug convient à Firefox) et sélectionnez l'image pour voir quels styles sont appliqués et quel fichier ils proviennent. Je suppose qu'il existe une largeur maximale ou une largeur définie quelque part qui remplace la valeur que vous avez définie.

0
Richard B

Ce problème semble être causé par le plugin jcarousel.

Votre élément .jcarousel a une propriété CSS intégrée définissant une largeur de 243 pixels, vérifiez la taille du conteneur.

<li class="jcarousel-item jcarousel-item-horizontal jcarousel-item-1 jcarousel-item-1-horizontal" jcarouselindex="1" style="float: left; list-style: none; width: 243px;">

Votre code collé ne contient que des divs, un exemple avec des images sera utile.

Vous pouvez essayer de définir .jcarousel-item img {width: auto;} mais il est difficile de trouver le problème sans démonstration réelle.

Mise à jour pour la taille de div:

Si vous utilisez le module standard mod_banners, je dois voir le fichier default.php situé dans le répertoire modules/mod_banners/tmpl /. On dirait que vous utilisez une version modifiée pour utiliser jcarousel, dans un modèle standard autour de la ligne 23:

<?php if ($item->type == 1) :?>
<?php // Text based banners ?>

Insérer ceci:

<div style="width:<?php echo $item->params->get('width'); ?>px !important;height:<?php echo $item->params->get('height');?>px !important;">

Avant

<?php echo str_replace(array('{CLICKURL}', '{NAME}'), array($link, $item->name), $item->custombannercode);?>

puis

</div>
0
José Sánchez Martín