Question

我的标题应该是这样的。

但每小时左右都会恢复原状。

我设置它以便在主图像后面有两个div，这样无论用户的浏览器有多宽，它们都可以重复。

问题是图像是否改变位置（它们向上或向下移动），无论我是否在布局上工作。我不知道是什么导致它经常变化，但它让我疯了！

该网站 www.rheanna.net （抱歉，我现在无法发布超过2个链接），以防您需要查看我在这里忘记提供的任何内容。< / p>

适用的标题HTML如下所示：

<div id="top1"></div><div id="top2"></div>
<div class="container">
<div id="logo-area">

我的CSS看起来像这样：

#top1 {
    width:49%;
    position:absolute;
    top:91px;
    left:0;
    height:127px;
    background:url("http://rheanna.net/images/topLeft_bg.gif") repeat-x;
    z-index:-10;
    }
#top2 {
    width: 49%;
    position: absolute;
    top: 91px;
    right: 0;
    height: 141px;
    background: url("http://rheanna.net/images/topRight_bg.gif") repeat-x;
    z-index: -10;
}
.container { text-align: left; margin: 0 auto; width: 960px; position: relative; }
.container #logo-area { text-align: center; margin-bottom: 57px; }

如果有人想知道为什么会改变我的立场，我会非常感谢你的意见！谢谢！

Answer 1

当您设置元素的position属性为absolute时，您尝试将其与其他元素对齐，您应该将它们包含在另一个元素（如div或section标签）中，并将其放在相对位置上。

您当前的代码似乎有点乱，因此我已经重新编码了您想要的设计元素。您的徽标区域需要移动到其当前容器之外，并在您的标题后留在它上面。

<强> CSS

.LogoArea {
    position: relative;
    clear: both;
    display: block;
    width: 100%;
    min-width: 960px;
    margin-top: -60px;
    /* margin-bottom: 60px; */
    box-shadow: 0 0 7px rgba(0,0,0,0.05);
}
.LogoArea>.LeftStripe,
.LogoArea>.RightStripe {
    width: 49%!important;
    position: absolute;
    z-index: -10;
}
.LogoArea>.LeftStripe {
    background: url("/images/topLeft_bg.gif") repeat-x;
    background-position: 0 -72px;
    height: 35px!important;
    top: 72px;
}
.LogoArea>.RightStripe {
    background: url("/images/topRight_bg.gif") repeat-x;
    right: 0;
    height: 21px;
    background-position: 0 -120px;
    top: 120px;
}
.LogoArea>.Logo {
    background: url("/wp-content/uploads/2016/05/logo.jpg");
    width: 781px;
    height: 245px;
    margin: 0 auto;
}
.LogoArea>.DonateLink {
    width: 21px;
    overflow: hidden;
    left: 50%;
    margin-left: calc(-364px/2);
    position: absolute;
    top: 74px;
    opacity: 0;
    height: 27px;
}

<强> HTML

<div class="LogoArea">
    <div class="LeftStripe"></div>
    <div class="RightStripe"></div>
    <div class="Logo"></div>
    <a href="YOUR DONATION LINK HERE" title="Donate using PayPal" class="DonateLink">Donate</a>
</div>

HTML部分应放在底部的头文件中。在之前，因为您的徽标构成了标题的一部分。

我希望这个改进的答案更有意义，整体效果更好。

我还提供了额外的移动支持

移动CSS

@media (max-width: 960px) {
    .LogoArea {min-width:initial;}
    .LogoArea>.RightStripe,
    .LogoArea>.LeftStripe {display:none;}
    .LogoArea>.Logo {width: 100%;background-size:cover;height: 215px;}
    .container, .page #left-area, .single-post #left-area {width:100%;margin:0;}
    .LogoArea>.DonateLink {display: none;}
}
@media (max-width: 701px) {
    .LogoArea>.Logo {height: 190px}
}
@media (max-width: 625px) {
    .LogoArea>.Logo {height: 170px}
}

@media (max-width: 550px) {
    .LogoArea>.Logo {height: 145px}
}

@media (max-width: 459px) {
    .LogoArea>.Logo {height: 120px}
}

@media (max-width: 439px) {
    .LogoArea>.Logo {BACKGROUND-IMAGE: NONE;height: auto;}
    .LogoArea>.Logo:before {
   CONTENT:"RHEANNA DOT NET";
   font-size: 14px;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   font-family: cursive, sans-serif;
   color: #8BC34A;
   }.LogoArea>.Logo:after {
   CONTENT:"A collection of life, love and memories.";
   font-size: .35em;
   DISPLAY:BLOCK;
   text-align:center;
   padding: 1em;
   padding-top:0;
   color: #607D8B;
   margin-top: -10px;
   margin-bottom: 0px;
   padding-bottom: 2em;
   }
}

Answer 2

为什么不改变最高价？ 59px适用于top1和top2？

或者，您可以将整个标题设为一个图像，而不是使用3个单独的图像。

编辑：对不起，我没有注意到repeat-x。

Div保持移动位置？

2 个答案: