Question

我正在构建我的第一个模板，所以我确定这是由于某种不正确的标记造成的。

我一直在尝试让两个图像分隔符显示在我主页上的3个框之间。一个似乎正在显示。然而有些事情是对的，我不能让第一个分离器出现。

我尝试使用背景图片创建一个div并将其添加到index.php中并尝试添加为图像（第二个如何工作）。

有没有人可以了解最新情况？

我的CSS可以在这里找到; http://www.adamtoms.co.uk/templates/mk1/css/system.css，网站为http://adamtoms.co.uk

这是我试图找到div / img;

的地方

    <?php if ($this->countModules( 'left or right or midmid' )) : ?>    
<div id="leftrightmain">
        <div id="midleft">  
            <jdoc:include type="modules" name="left" />
        </div>      
        <div id="midmid">
            <jdoc:include type="modules" name="midmid" />
        </div>
        <img id="sep" src="/templates/mk1/images/sep.png">
        <div id="midright">
            <jdoc:include type="modules" name="right" />
        </div>
    </div>
<?php endif; ?>

非常感谢，亚当

Answer 1

鉴于你目前的结构，你需要简单地做这样的事情：

首先，删除您添加的HTML图像。

<?php if ($this->countModules( 'left or right or midmid' )) : ?>    
<div id="leftrightmain">
        <div id="midleft class="sepp">  
            <jdoc:include type="modules" name="left" />
        </div>
        <div id="midmid class="sepp">
            <jdoc:include type="modules" name="midmid" />
        </div>
        <div id="midright">
            <jdoc:include type="modules" name="right" />
        </div>
    </div>
<?php endif; ?>

我已经为你的midleft和midmid div添加了一个类。该课程为.sepp

在CSS中，您需要更改此行：

#sepp {
    background-image: url("../images/sep.png")
}

要...

.sepp {
    background-image: url("../images/sep.png");
    background-position: 50% 100%;
    background-repeat: no-repeat;
}

以上内容将.sepp的CSS类样式应用于左侧和中间div。 css告诉背景图像不重复，并且位于垂直（中心）的50％和左边的100％（右对齐）。

修改

相当多的变化......我们需要交换样式，使sepp div成为容器。

<?php if ($this->countModules( 'left or right or midmid' )) : ?> <div id="leftrightmain"> <div class="sepp"> <div id="midleft"> <jdoc:include type="modules" name="left" /> </div> </div> <div class="sepp"> <div id="midmid"> <jdoc:include type="modules" name="midmid" /> </div> </div> <div class="sepp last"> <div id="midright"> <jdoc:include type="modules" name="right" /> </div> </div> </div> <?php endif; ?>

CSS：

.sepp { width: 25%; min-height: 100%; padding: 0 1%; margin: 0px -1% 0px 7%; position: relative; background-image: url("../images/sep.png"); background-position: 50% 100%; background-repeat: no-repeat; background-size: 1px 100%; }

在3 ID的midleft midmid中间，删除边距和填充，并使100％。

#midleft { min-height: 100%; float: left; width: 100%; /* -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; border: 0px 3px 3px solid rgb(255, 255, 255); border-radius: 5px 5px 5px 5px; box-shadow: 0px 0px 5px rgb(153, 153, 153); */ position:relative; background-image:url("../images/bksa.png"); background-size:75px 75px; background-repeat:no-repeat; background-position: top center; display:block; }

完成此操作然后发表评论并告诉我，还有更多需要发生的事情。

CSS Separator问题，需要标记/语法帮助

1 个答案: