css - 我如何在我的 flexslider 旁边的 Magento 主页中添加两个横幅？

Question

我的网站上有一个 camera.js slider ，我将其替换为 Flexslider。我这样做是因为我无法使 camera.js slider 可点击，我想摆脱“点击此处”按钮。现在我在我的网站上安装了 flexslider 我想带回两个横幅，它们在我的网站中位于我的 camera.js slider 旁边，但我没有让它工作......

这是我的主页，您可以看到横幅没有显示在 slider 的右侧，而是显示在错误的位置:

http://imgur.com/j8PVOuR

我想在 slider 右侧放置两个尺寸为 381 x 219 的横幅，一个在另一个之上。

代码如下:

<div class="container">
<div class="row">
<div class="span12">
<script type="text/javascript">// <![CDATA[
jQuery.noConflict();
{{widget type="cms/widget_block" template="cms/widget/static_block/default.phtml" block_id="25"}}
</script>
<ul class="banner-block-right">
<li><a href="{{store url='nieuwe-producten'}}"> <img src="{{skin url='images/media/banners-8.png'}}" alt="" /> </a></li>
<li><a href="{{store url='klantenservice'}}"> <img src="{{skin url='images/media/banners-7.png'}}" alt="" /> </a></li>
</ul>
</div>
</div>
</div>

只是为了澄清:

• 我使用了代码:script type="text/javascript">//etc

因为我的导航栏有问题，当我放入新的 slider 时它不再工作了。

• 我将 slider 放在一个小部件中只是因为我认为那样会更容易。

所以我的问题是，我必须在代码中进行哪些调整才能使 flexslider 旁边有两个小横幅？

顺便说一句。当我使用脚本让我的导航栏工作时，默认的 magento 定价布局又回来了，就像让导航栏工作或让 magento 定价在正确的布局中一样。我选择导航栏大声笑，有人知道解决这个问题吗？

编辑:flexslider 的 CSS 代码

/*
 * jQuery FlexSlider v2.0
 * http://www.woothemes.com/flexslider/
 *
 * Copyright 2012 WooThemes
 * Free to use under the GPLv2 license.
 * http://www.gnu.org/licenses/gpl-2.0.html
 *
 * Contributing author: Tyler Smith (@mbmufffin)
 */


/* Browser Resets */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  {outline: none;}
.slides,
.flex-control-nav,
.flex-direction-nav {margin: 0; padding: 0; list-style: none;} 

/* FlexSlider Necessary Styles
*********************************/ 
.flexslider {max-width: 700px; margin: -20; padding: 0;}
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */

.flexslider .slides img { 
  display: block;
  max-width: 100%; height: auto; margin: - auto;
}

Answer 1

这取决于您的 CSS。

检查是否:

• 您的 banner-block-right 类没有“清晰”的样式规则。 “清除”清除 float 。
• 检查 slider 和 banner-block-right 是否都有 float 规则。
• 检查 slider 是否太宽。

如果它不起作用，也许您可​​以发布您的 CSS 的相关部分。

看到网页后更新

问题是您的 ul 元素没有嵌套在 div 行中。检查您的网页给我以下嵌套结构:

<div class="container">
    <div class="row">
        <div class="span12">
            <script type="text/javascript">
            <script         src="http://www.site.nl/js/magestore/bannerslider/jquery.flexslider.js">
            <link media="all" href="http://www.site.nl/skin/frontend/base/default/css/magestore/bannerslider/flexslider.css" type="text/css" rel="stylesheet">
            <script type="text/javascript">
            <div class="flexslider flexslider-7-1">
            <script type="text/javascript">
        </div>
    </div>
    <script type="text/javascript">
</div>
<ul class="banner-block-right">

所以您的小部件正在关闭 .container 和 .row div。您插入的模板末尾可能有很多 div 结束标记。