0

メイン コンテンツ ページの上に長方形の画像を追加しようとしています (ナビゲーション バーの追加と同様)。メイン コンテンツ ページは「mainContainer」で識別できますが、長方形の画像は「navBar」内で識別できます。問題は次のとおりです。ナビゲーション バー (または長方形の画像) を「mainContainer」またはコンテンツ ページと同じ幅にしたいのです。CSS コード部分は次のとおりです。

#navBar
    {
        background-image:url('images/Register/navbar.jpg');
        opacity:0.8; filter: alpha(opacity=80);     
        height:38px;
        border:solid 1px black;
        background-repeat:repeat-x;

    }

これは、メイン ページのコーディングの一部です。

<body>      
    <table id="mainContainer" align="center"> 
    <tr>
        <td>
            <form action="Register.php" method="post" id="standardsize">
                <table>

                <tr>
                    <td colspan="2" id="largesize"><img src="images/Register/sign up today.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="name" maxlength="30" value="<?php echo "$name";?>" /></td>
                    <td><img src="images/Register/whats your name.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="newuser" maxlength="20" value="<?php echo "$newid";?>""/></td>
                    <td><img src="images/Register/username.png"/></td>
                </tr>

                <tr>
                    <td><input type="text" name="email" maxlength="20" /></td>
                    <td><img src="images/Register/email.png"/></td>
                </tr>

                <tr>
                    <td><input type="password" name="newpass" value="" maxlength="20"/></td>
                    <td><img src="images/Register/password.png" /></td>
                </tr>

                <tr>
                    <td><input type="password" name="verifynewpass" name="verifypass" value="" maxlength="20"/></td>
                    <td><img src="images/Register/retypepassword.png"/></td>
                </tr>

                <tr>
                    <td colspan="2">
                        <!--Signup submit button-->     
                        <input type="image" src="images/Register/sign up2.png" />
                    </td>
                </tr>
                </table>
            </form>
        </td>
        <td>
            <!--AFRICAN PIC-->
            <div class="rigthPanel">


            </div>
        </td>
        </tr>

    </table>

どんな助けでも大歓迎です!

4

3 に答える 3

0

マシューのフィドルを盗むと、コンテナのサイズを指定してから、左/右のマージンを自動に設定するだけで済みます。

http://jsfiddle.net/USWzB/3/

于 2012-08-22T03:00:42.353 に答える
0

navBarと の両方をmainContainerでラップしdiv、 をフロートして、を含むのdivに十分なだけ拡張しますmainContainer。

(フィドル: http://jsfiddle.net/USWzB/2/ )

マークアップ:

<div id="wrap">
    <div id="navBar">Here's the nav</div>
    <div id="mainContainer">
        This content is wider than navBar's, so navBar will have to expand.
    </div>
</div>

CSS:

#wrap { float: left; } /* so it is only as wide as mainContainer */

mainContainerこれは、 が常に よりも広いことを前提としていますnavBar。

于 2012-08-21T18:36:50.217 に答える