0

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

我一直在尝试让两个图像分隔符显示在我主页上的 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; ?>

非常感谢，亚当

4

1 回答 1

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

以上将CSS类样式应用于.sepp您的左侧和中间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 midright上，去掉margin和padding，make with 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;
}

完成这项工作，然后发表评论，让我知道，还有更多事情需要发生。

于 2013-05-03T13:08:01.850 回答