1

Firefox でいくつかのページを作成しましたが、すべてが正常に見えました。Chrome と Safari にすばやく切り替えたところ、このページのヘッダーにあるオプトイン フォームが正しく表示されていないことに気付きました。オプトイン div 全体をヘッダー div 内に配置したいと考えています。私が知る限り、それは Firefox のヘッダー div にありますが、他のほとんどすべてのブラウザーでは、メイン ナビゲーションの下に表示されます。

ヘッダーの CSS とそこに含まれるオプトイン フォームは次のとおりです。

.header{height: 302px;min-width: 100%; background-color: #265f8b;
    margin: 0 auto;}

.opt-in {height: 280px; width: 800px;background-color: #c7e877;float: right;
    margin-right: 200px;margin-top: 10px;border:5px solid #8db530;
    border-radius: 10px;position: relative;}

HTMLは次のとおりです。

<div class='header'>
<img style='border: 1px solid black;' src='images/main-logo.jpg'></img>
<div class='opt-in'>


    <p>Enter your name and email below to get 
        <span style='font-weight: bolder;'>Free Instant Access</span> to the most comprehensive 
        guide available on how to ..</p>

        <p><span style='font-weight: bolder;'>Over 10,000 people</span> have enjoyed my eBook and receive  
            a weekly newsletter with exclusive tips!</p>

        <table>
            <form method='post' action='opt-in-form.php'>
            <tr><td><input type='text' name='name' value='Enter Name...' /></td></tr>
            <tr><td><input type='text' name='email' value='Enter Your Email...' /></td></tr>
        <input class='opt-in-button' type='image' src='images/opt-in-button.png' alt='Submit Form' />
        </table>    

        </form>


    <img class='book-cover' src="images/book-cover-new.png"></img>

</div>

</div>

これをヘッダー div に含め、その上にフロートを配置していることに気付くでしょう。

http://fairchildwebsolutions.com/packattack/index.php

4

2 に答える 2

3

左上のロゴにはfloat: left. それは問題を解決するはずです。

于 2013-10-03T14:33:04.603 に答える
3

ロゴ画像を左にフロートします。

float:left

img 要素にも幅を指定します。width:autoもします。

于 2013-10-03T14:34:45.190 に答える