2

画面の上部に固定メニューがあり、うまく機能しますが、ブラウザウィンドウを小さくする必要がある場合、メニュー内のすべての要素をそのままにするのではなく、メニューの下にすべてドロップダウンして、ウィンドウを開く。私の考えは、ウィンドウを小さくしたときに位置が固定されないようにしたいので、位置を維持してスクロールして残りのコンテンツを表示できるようにすることです。これは可能ですか？

メニュー ヘッダーの html のコードは次のとおりです。

<div id="head_wrapper">
        <div id="head_company"></div><!---end head_company--->
        <div id="head_name"></div><!---end head_name---->

        <div id="head_search"></div><!---end head_search--->
        <div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
        <div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
        <div id="head_more"></div><!---end head_more--->


    </div><!---end head_wrapper--->

そして、これがそのcssです：

#wrapper #head_wrapper {
    background-image: url(../images/general/head_bar.png);
    background-repeat: repeat-x;
    float: left;
    height: 44px;
    min-width: 100%;
    width: auto !important;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
    background-image: url(../images/general/navs/arion_co_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
    background-image: url(../images/general/hover/company_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_name {
    background-image: url(../images/general/navs/arion_logo.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 144px;
}
#wrapper #head_wrapper #head_more {
    background-image: url(../images/general/navs/head_more.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
#wrapper #head_wrapper #head_more:hover {
    background-image: url(../images/general/hover/head_more_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
    background-image: url(../images/general/navs/head_settings.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
    background-image: url(../images/general/hover/head_settings_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home {
    background-image: url(../images/general/navs/head_home.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
    background-image: url(../images/general/hover/head_home_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_search {
    background-image: url(../images/general/navs/search_bar.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 327px;
    margin-right:15px;
    background-position-y: 5px;
    margin-left:31%;
}

助けてくれてありがとう

4

1 に答える 1

1

#wrapperと#head_wrapperスタイルを次のように変更します。

width: 100%
min-width: 960px; /* set here a fixed value >= menu width */

デモ: http://jsfiddle.net/uPe2L/9/ (わかりやすくするために余白と背景を削除し、境界線を追加しました)

ところで、あなたのコードは間違っていて面倒です。ul li構造体を使用する必要があります。

于 2012-07-28T11:38:09.087 に答える