1

自分のページ用に次の .css ファイルを作成しました。

#content-box, #header-box, #menu-box, #footer-box
{
    background-color:#084B8A;
    color:#FFFFFF;
}

#content-box
{
    display:block;
    width:auto;
    min-height:205px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:1px;
    padding:5px;
}

#menu-box
{
    position:fixed;
    display:block;
    width:auto;
    height:205px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:1px;
    padding:5px;
}

#footer-box
{
    display:block;
    width:auto;
    height:20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:0px;
    padding:0.5px 5px;
    text-align:right;
}

#header-box
{
    display:block;
    width:auto;
    height:20px;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin:0px;
    padding:0.5px 5px;
    text-align:left;
}

そして、ページを上下にスクロールしたときに #menu-box を移動したいのですが、機能していません。ページの配置は次のとおりです。

#header-box
---------------------------------------
         |#
         |c
#menu-box|o
         |n
         |t
         |e
         |n
         |t
         |-
         |b
         |o
         |x
---------------------------------------
                            #footer-box

すべての div(#header-box, #menu-box, #content_box, #footer-box) に情報を追加します (#menu-box に css 垂直ドロップダウン メニューを追加します)。

編集:これが私のHTMLコードです。問題はテーブルタグにあると思います:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="ro">
<head>
<title>...</title>
</head>
<body>
<table border="1" width="100%"><tr><td><div id='header-box'>Bine ai venit
</div></td></tr></table>
<table border="1" width="100%">
<tr><td style="width:200px; height:205px;"><div id='menu-box'><?php include("nav.php"); ?></div></td>
<td><div id='content-box'>
<?php // content ?>
</div></td></tr></table>
<table border="0" width="100%"><tr><td><div id='footer-box'>Creat de ...</div></td></tr></table>
</body>
</html>

(通常、境界線は 0 に設定されていますが、1 に設定したため、#menu-box が表示されません)

@Andrew: 長いページが必要なことはわかっています。#content-box にテーブルをリストしたページがあります。

4

2 に答える 2

0

同様の回答が表示されますが、独自の例を作成しようとしました。#menu-boxそして、左にフロートする方法がないので、幅を設定していただけると助かります。メニューボックスに自動幅がある場合、マージンを定義しても役に立ちません。

私の解決策は次のようになります: http://jsfiddle.net/6sg3v/

の定義width:と#menu-box適切margin-left:な#content-box

于 2013-04-12T12:02:41.217 に答える