1

I have a problem with banners so far and it is making me pull my hair out and I am hoping i will get the solution here. When I put more than 1 banner module on a page (let's say 3 banners), it seems all 3 show with the same size (witdth) even if all three have different sizes on the module options. What might be the problem here? example: enter image description here

this is the code of the banner:

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

Edit:

I am by the way using caroussel banners, and this is the css file:

/**
 * 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;
}

The width is set to width: 454px; but the default that showed earlier was :

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

If i change the width on that css file, will it work?

1
  • I see that all banners have the same width (not height), could it be simply bootstrap classes? (span3 for example) could you provide us a link or some code?
    – Kitase88
    Apr 12, 2016 at 11:47

3 Answers 3

1

The Carousel Banner module requires fixed widths in order to work properly, as the comment in the CSS file explains:

.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 width: 454px; value is the default value, but this can be overridden for each module in the module settings, and will be added as inline style:

Carousel Banner settings

This value is probably set to 243 in all your modules, so to solve this you have to modify each module with a value that works with your template layout.

Unfortunately, this will cause problems with your template on small screens if you're using responsive design, unless you find a way around (hide the banners on small screens or change the width using jQuery).

1
  • I already fixed the banner with in the module with different values, but still it doesnt work, i have three modules, each one is for one banner (1 , 2 , 3 ) the banner 1 & 2 have these sizes : height:351 width: 243 and 3 has : height:200 width: 1150, but in the frontend it appears that they all have the same siza
    – zenami
    Apr 14, 2016 at 14:24
0

Most likely it's going to be a template style. I assume you are using the core banners module/compenent rather than a third party one?

Use an elements inspector (F12 in Chrome, or Firebug is good in Firefox) and select the image to see what styles are being applied, and what file they are coming from - I assume there is a max-width or a width set somewhere that is overriding the value you set.

2
  • I dont necessarily want to put images on the banner, i'm using a text, please see my answer to this question
    – zenami
    Apr 13, 2016 at 14:54
  • Please see the edited question i mean
    – zenami
    Apr 13, 2016 at 15:04
0

This problem seems to be caused by jcarousel plugin.

Your .jcarousel-item has a inline css property setting width to 243px, check the size of container.

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

Your pasted code only contains divs, a example with images will be helpful.

You can try setting .jcarousel-item img {width: auto;} but is difficult to find the problem without a live demo.

Update for div size:

If you are using standard mod_banners module I must see the file default.php located at modules/mod_banners/tmpl/ directory. Seems you are using a tweaked version to use jcarousel, in standard template around the line 23:

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

Insert this:

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

Before

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

then

</div>
8
  • You need images of what exactly?
    – zenami
    Apr 13, 2016 at 15:34
  • a example with a image inside the <li> element, some like <li><a href="...><img src="/path/to/mybanner.jpg" /></a></li> . To see if jcarousel is adding inline css to image elements. All the li elements of your example contains <div> without width propertys, these divs will inherit width properties of <li> elements. Apr 13, 2016 at 15:39
  • Please check the edited code
    – zenami
    Apr 13, 2016 at 15:51
  • Try setting .jcarousel-item img {width: auto !important;} in stylesheet. But I can't predict the overflow behavior of container. Apr 13, 2016 at 16:04
  • This is changing the width of an image, but even if i use a text instead of an image, it gives me the same size
    – zenami
    Apr 13, 2016 at 16:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.