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 にタイプミスがあります。「position: absolute;」のスペルが間違っています。CSSファイルの134行目。アブソリュートのスペルが正しい場合、画像が途切れることはなくなります。

于 2012-11-28T16:29:09.117 に答える
0

削除した場合

overflow:hidden;

から.container3、画像が切り取られることはありません。

ただし、これによりサイトが歪められます。これは、ロゴが大きすぎるためです。サイズを約190pxの高さに変更すれば、問題ありません。

于 2012-11-28T16:08:38.037 に答える
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

追加

clear: both;

に.container1

そして取り除く

overflow:hidden;

から.container3

それでうまくいくはずです！

于 2012-11-28T16:13:36.177 に答える