0

これは私のページヘッダーです。選択メニューがあり、背景画像の上に適切に配置する必要があります。画面の解像度が変わったときに、どのように固定すればよいですか？

見てください

ここに画像の説明を入力してください

ここでより大きな解像度で

ここに画像の説明を入力してください

htmlは次のようになります。

    <div class="header">
            <table border="0" cellpadding="0" cellspacing="0" width="100%">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0 52px ;text-align: right; width: 230px; background: url('images/searchbar_dropdown.png') no-repeat scroll 72px 15px transparent;">
                       <select id="dept" name="dept" type="text" style="background-color: white; border: 2px solid rgb(182, 109, 49); width: 150px; height: 35px; opacity: 0;"><option></option>                                    
</select></div></td>
                        <td rowspan="2" style="width: 2px;">&nbsp;</td>

                    </tr>

            </table>
         </div>

およびヘッダーCSS

 .header {
background: url("../../images/background.png") repeat;
position: fixed;
color: white;
min-height: 65px;
padding: 5px 5px;
margin: 0;
}
4

3 に答える 3

4

選択はあなたのために流れています。なぜなら、fixed position

position relativeボックスの周りに aとボックスのラッパーが必要ですposition absolute

例：

<div id="boxWrapper">
    <select class="selectbox">
        <option value="">option 1</option>
        <option value="">option 2</option>
        <option value="">option 3</option>
    </select>
</div>

#boxWrapper {
    position: relative:
}

.selectbox {
    position: absolute;
    top: 0px; 
    left: 0px;
}
于 2013-01-09T17:11:33.263 に答える
0

このコードを試してください

<div class="header">
            <table width="100%" cellspacing="0" cellpadding="0" border="0">
                <tbody>
                    <tr>
                        <td style="padding: 16px 10px 0px 52px; text-align: right; width: 230px; background: none repeat scroll 0% 0% whitesmoke; position: relative;">
                       <select style="border: 2px solid rgb(182, 109, 49); height: 35px; background: none repeat scroll 0% 0% yellow; opacity: 1; position: absolute; width: 150px; left: 0px;" type="text" name="dept" id="dept"><option></option>                                    
</select></td>
                        <td style="width: 2px;" rowspan="2">&nbsp;</td>

                    </tr>

            </tbody></table>
         </div>
于 2013-01-09T18:10:18.580 に答える
0

width: 100%あなたのontableとあなたの の組み合わせである可能性が高いと思いtext-align: rightますtd。あなたはあなたtdが望むように行動しておらず、その を保持していないと思われますがwidth: 230px、 とともに画面幅が拡大していますtable。要素とともに移動しますtext-align: right。select最も簡単な修正方法は、正しい位置に配置し、背景を追従させたい場合を除いて、selectをそのように配置することtext-align: leftです (この場合、背景をどのように取り付けるかを修正する必要があります)。

于 2013-01-09T17:18:43.070 に答える