0

我的问题是，我有一个比我的浏览器大的标题图像，我想这样做是因为我希望图像根据您的浏览器宽度变得或多或少可见。当您的浏览器大于图像时，会重复一种颜色。最重要的是，我有一个居中的图像，然后是两个三角形。一左一右飘。我的问题是，当我将 .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; }
4

1 回答 1

0

除非我误解了什么，否则代码似乎没问题。您是否仔细检查以确保：

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

如果该页面存在于我们可以查看的某个地方，请告诉我们 - 它可能会更清楚地说明您的问题。

于 2012-05-03T20:03:43.273 回答