0

ウィンドウが最小化されると、すべてがそのまま残りますが、ナビゲーションは残ります。

ここに画像の説明を入力

下の画像はウィンドウを最大化したとき、上の画像はウィンドウを最小化したときです。

HTML:

<header>
    <div class="header">
        <div class="logo">
            <img src="images/logo.png" />
        </div>

        <nav>
          <div class="navigation">

                <a href="home.html">
                    <div class="box" style="background: rgba(0, 0, 0, 0.4)">
                        <img src="images/home.png">
                     <div class="name" style="background: rgba(0, 0, 0, 0.4)">HOME</div>
                    </div>
                </a>

                <div class="box">
                    <img src="images/aboutus.png">
                    <div class="name">ABOUT US</div>
                </div>
                <div class="box">
                    <img src="images/groupcompanies.png">
                    <div class="name">GROUP OF COMPANIES</div>
                </div>
                <div class="box">
                    <img src="images/career.png">
                    <div class="name">CAREER</div>
                </div>
                <div class="box">
                    <img src="images/contactus.png">
                    <div class="name">CONTACT US</div>
                </div>

            </div>
        </nav>
    </div>    

</header>

CSS:

body {
    background-image:url(images/pattern.png);
    min-width: 775px;
    overflow:auto;
}

@font-face {
    font-family:"myfont";
    src:url(font/PTN57F.woff);
}
.header {
    max-width:1200px;
    min-width:200px;
    height:170px;
    margin:0 auto;
    margin-top:10px;
    background-color:rgba(0, 0, 0, 0.5);
    border-radius:3px;

}

.logo {
    width:230px;
}

.logo img {
    margin-left:20px;
    margin-top:31px;
    border-right:solid  #FFF 1px;
    padding-right:33px;
    height:auto;
    width:auto;
    float:left;
}


.navigation {
    width:800px;
    height:100px;
    margin-left:256px;
    float:none;

}

.box {
    height:100px;
    width:150px;
    margin-right:5px;
    float:left;
    background: rgba(0, 0, 0, 0.2);
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -moz-transition: background 1s;
    border-radius:2px;
    margin-top:31px;

}

.box:hover {
    background: rgba(0, 0, 0, 0.4);
    -webkit-transition: background 1s;
    -o-transition: background 1s;
    -moz-transition: background 1s;
}
.name {
    height:23px;
    width:auto;
    text-align:center;
    font-family:myfont;
    font-size:14px;
    color:#FFF;
    text-decoration:none;
}

.box img {

    float:none;
    margin-left:38px;
    margin-top:3px;
}
4

1 に答える 1

0

ボックスは の内側div.navigationにあり、左マージンは256pxです。サイズを変更してdiv.headerも、左マージンは同じままです。navigation内側の中央に配置したい場合は、header使用できます

.navigation {
    margin-left: auto;
    margin-right: auto;
}

このようにして、ヘッダー div をオーバーフローさせず、全体の幅に応じて左マージンを調整します。

あなたのコメントの時点で、同じままにしたい場合はheader、次のように固定幅を指定する必要があります

.header {
    width: 1200px;
}

min-width次に、 andも必要ありませんmax-width。

于 2013-07-22T13:34:33.510 に答える