Question

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 */
}

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

Answer 1

divrow1类的CSS有一个拼写错误。你拼错了“position：absolute;”在CSS文件的第134行。如果拼写正确，则不再剪切图像。

Answer 2

如果删除

overflow:hidden;

来自.container3，您的图片不会被切断。

然而，这会扭曲您的网站。这是因为徽标太大，将其调整到大约190px的高度，你就可以了。

Answer 3

我注意到您的.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;
}

Answer 4

添加

clear: both;

到.container1

并删除

overflow:hidden;

来自.container3

这应该可以做到！

为什么我的形象会被切断？ - 仅限IE浏览器

4 个答案: