Question

我的问题是，我有一个比我的浏览器更大的标题图像，我想这样做是因为我希望图像根据您的浏览器宽度变得或多或少可见。当您的浏览器大于图像时，会有一种颜色重复出现。最重要的是，我有一个居中的图像，然后是两个三角形。一个漂浮左，一个漂浮右。我的问题是，当我将.content-outer .content-inner的宽度从978px更改为1134px以容纳三角形上的大图像时，它会与导航栏的中心混淆。这是我的代码。列表样式是我的导航。

<div class="content-outer" id="top_nav">
<div class="content-inner">
</div>


<div class="content-outer" id="header_map">
<div class="diamond-left">
<div class="diamond-right">
<div class="content-inner">
</div>
</div>
</div>
</div>


#header,

#header_map {
height:529px; 
background:#3b96a9 url(Layer-57.jpg) top center no-repeat;
margin-bottom:45px; 
overflow:visible;
}

#header .diamond-left,

#header_map .diamond-left {
width:100%; 
height:529px; 
overflow:visible; 
float:left; 
background:url(Layer-58.png) top left no-repeat;
}

#header .diamond-right,

#header_map .diamond-right {
width:100%;
height:529px; 
overflow:visible; 
float:right; 
background:url(Layer-59.png) top right no-repeat;
}

#header_map .content-inner  {
height:391px; 
background:url(Layer-61.png) top center no-repeat; 
position:relative; 
overflow:visible; }

#header .content-inner {
position:relative; 
overflow:visible; 
padding-bottom:20px;
}

.content-outer
{ width:100%; float:left; overflow:visible; }
.content-outer .content-inner
{ width:978px; margin:0 auto; overflow:visible; position:relative; }
.content-outer .content-inner ul
{ margin:20px 0; padding:0; }
.content-outer .content-inner ul li
{ margin:3px 0 3px 20px; padding:0; font-size:1.1em; }
.content-outer .content-inner ul li p
{ font-size:1em; }

Answer 1

除非我误解了某些内容，否则代码似乎没问题。您是否经过双重检查以确保：

三角形图像具有透明背景，因此您可以在它们后面看到它们？
主标题背景位于样式表中指定的正确位置？

如果页面在我们可以查看的某个地方有效，请告诉我们 - 它可以为您的问题提供更多信息。

标题和浮动问题

1 个答案: