-1

私は完全に迷っています。ナビゲーションバーの設定を終えたところですが、設定アイコンとメインテキストを固定以外の位置に表示できないようです...これが私のコードサンプルです。表示できません画像

これは、関連するコード全体、html および css です。

最終結果は、facebook が「グループ」に使用するものと同様のナビゲーションバーになるはずです。

HTML(php):

    <div style='width:100%;max-height:31px;position:relative;top:1px;overflow:hidden;'>

        <div style='width:2000px;max-height:31px;position:relative;overflow:hidden;'>

            <div class='groups_navi-active' id='navbar-groupname'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                ".$navbar_groupname."
                </div>

                <div style='height:30px;float:left;width:11px;'>
                </div>

            </div>


            <div class='groups_navi-inactive' id='navbar-structure'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                Structure
                </div>

                <div style='height:30px;float:left;width:11px;'>
                </div>

            </div>

            <div class='groups_navi-inactive' id='navbar-explore'>

                <div style='height:30px;float:left; width:11px;'>
                </div>

                <div style='height:30px;float:left;'>
                Explore!
                </div>

                <div style='height:30px;float:left;width:11px;'>
            </div>

        </div>



        <div class='groups_navi-right'>

        </div>


    </div>





    <div style='float:right;position:fixed;top:42px;height:22px;width:796px;z-index:1'>

        <div class='groups_navi-settingsicon' id='groups_navi-settingsicon' ></div>

        <div style='clear:both;'></div>

<!-- THIS IS HIDDEN AND WILL BE MADE VISIBLE WITH JAVASCRIPT !-->    
        <div id='navbar-settings-list' style='border-left:1px solid #787878;border-right:1px solid #787878;border-top:1px solid #787878;background-color:#ffffff;border-bottom:2px solid #283d6c;background color:#ffffff;float:right;display:none;z-index:5;'>
            <div style='width:126px;height:4px;'></div>
            <div class='groups-navi-settings-list_option-inactive' id='groups-navi-settings-list_option--deletegroup' title='".$_GET['groupid']."'>
            Delete Group
            </div>
            <div style='width:126px;height:4px;'></div>
        </div>

    </div>







    <div style='z-index:8;position:fixed;width:796px'>

        <div>
        <img src='IMG/texticon.png'>
        </div>
        <div>
        ".$groupoverview_groupdescription."
        </div>
    </div>

CSS:

.groups_navi-active
{
height:30px;position:relative;line-height:30px;
font-size:13px;
font-weight:bold;
color:#000000;
float:left;
z-index:2;
}

.groups_navi-inactive
{
float:left;
height:30px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px; 
font-weight:bold;
color:#818181;
z-index:2;
}


.groups_navi-right
{
float:left;
height:30px;
width:1000px;
position:relative;
background-color:#f2f2f2;
border-bottom:1px solid #cccccc;
border-left:1px solid #dbdbdb;
border-right:0px;
border-top:0px;
line-height:30px;
font-size:11px; 
font-weight:bold;
color:#818181;
}


.groups_navi-settingsicon
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 0;
}


.groups_navi-settingsicon-active
{
width:31px;height:22px;background: url('../IMG/navbar-stgs.png');float:right;background-position: 0 -22;
}

.groups-navi-settings-list_option-inactive
{
width:126px; height: 18px;text-align:center;line-height:18px;
border-top:1px solid #ffffff;
border-bottom:1px solid #ffffff;
}

.groups-navi-settings-list_option-inactive:hover
{
width:126px; height: 18px;text-align:center;line-height:18px;background-color:#6c83b6;color:#f8ffff;
border-top:1px solid #39579b;
border-bottom:1px solid #39579b;
cursor:pointer;
}
4

2 に答える 2

0

設定アイコンのコンテナー (親 div) は position:fixed です。それは float:right をオーバーライドします。実際、X/Y オフセットを設定せずに position:fixed を使用した例が 2 つありますが、これは実際には機能しません。

そうでない場合...コードを問題のある領域にまで煮詰めることができれば、より良い答えが得られると思います。

于 2012-04-18T09:37:08.327 に答える
0

画像のパスを確認する必要があると思います。正しいはずです。この URL http://jsfiddle.net/563Vx/でサンプルを作成しました。

このフィドルを自由に更新してください

于 2012-04-18T09:43:23.450 に答える