0

http://bmww.com/clients/phwm_sc_website/index.html

^ 这就是目前正在测试的站点的链接。我在这里听取了每个人的建议，并正在努力删除我为头部导航所做的表格。所以现在它们并排对齐，但带有 div 的徽标需要更高，但顶部不会被切断。

这是我的html：

<div id="header" class="header2" align="center">

<div class="container3">

<div class="divrow"><h1><a class="ex1" href="index.html">[ HOME ]</a></h1></div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ TEAMS ]</a></h1></div>
<div class="divrow1"><img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo" /> </div>
<div class="divrow"><h1><a class="ex1" href="index.html">[ STAFF ]</a></h1></div>
<div class="divrow"><h1><a href="index.html" class="ex1">[ GALLERY ]</a></h1> </div>
</div>

</div><!--end red navigation header div-->

这是我的CSS：

.header1 { position:relative; top: 0px; z-index:10;
width: 100%; height:50px;
background: rgba(0, 54, 103, 0.6); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
background: rgb(0, 54, 103) transparent;
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667,  endColorstr=#99003667);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99003667, endColorstr=#99003667)";}

.header2 { position:relative; top:10px;
width: 100%; height:80px; z-index:50;
background: rgba(210, 6, 46, 0.4); /* Color white with alpha 0.9*/
/* Fallback for web browsers that doesn't support RGBa */
    background: rgb(210, 6, 46) transparent;
    /* For IE 5.5 - 7*/
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e,   endColorstr=#99d2062e);
/* For IE 8*/
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99d2062e,  endColorstr=#99d2062e)";}


.divrow { position: relative; display:inline; margin-top:30px;
float:left;  }
.divrow1 { position:relative; display:inline; margin-top:-60px;
float:left; z-index:50; margin-bottom:-20px;  } 

.sponsor { position:absolute; top: 730px; z-index:10;
width: 100%; height:300px;
background-color: #FFF;
-webkit-box-shadow: 0 0 10px #FFF;
-moz-box-shadow: 0 0 10px #FFF;
box-shadow: 0 0 10px #FFF
}
  .container1 { clear:both;
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:60px;
}
.container2 {
width: 960px; z-index:-1;
background-color: none; /* Color white with alpha 0.9*/
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout */
margin-top:100px; }

.container3 {
width: 700px; 
background-color: none; /* Color white with alpha 0.9*/
margin:auto; /* the auto value on the sides, coupled with the width, centers the layout */
}

如果需要，我可以提供更多...我知道这可能是一个简单的解决方法，但我仍在学习。提前致谢！

4

4 回答 4

1

divrow1 类的 CSS 有错字。您拼错了“位置：绝对；” 在 CSS 文件的第 134 行。如果绝对拼写正确，图像将不再被截断。

于 2012-11-28T16:29:09.117 回答
0

添加

clear: both;

至.container1

并删除

overflow:hidden;

从.container3

这应该够了吧！

于 2012-11-28T16:13:36.177 回答
0

我注意到您的 .divrow1 边距需要更改：

.divrow1 {
    position: absoulte;
    display: inline;
    /*margin-top: -30px;*/
    float: left;
}

编辑：

您需要对布局进行少量更新，这不是最好的方法，但它可能是最简单的方法：

<div class="container3">
    <div class="divrow1">
        <img align="middle" src="images/phwm_sc_logo.png" width="170" height="212" alt="logo"> 
    </div>
    <div class="divrow"><h1><a href="index.html">[ HOME ]</a></h1></div>
    <div class="divrow"><h1><a href="index.html">[ TEAMS ]</a></h1></div>
    <div class="separator"></div>
    <div class="divrow"><h1><a href="index.html">[ STAFF ]</a></h1></div>
    <div class="divrow"><h1>[ GALLERY ]</h1> </div>
</div>

修改后的 CSS：

.divrow1 {
    position: absolute;
    display: block;
    margin-top: -50px;
    margin-left: 200px;
}

.separator {
    float: left;
    width: 150px;
    margin-top: 30px;
}
于 2012-11-28T16:11:22.410 回答
0

如果您删除

overflow:hidden;

从.container3，您的图像不会被截断。

但是，这会扭曲您的网站。这是因为 logo 太大了，把它调整到 190px 左右的高度就可以了。

于 2012-11-28T16:08:38.037 回答