0

フレームワークに Twitter Bootstrap 2 を使用しているレスポンシブ テーマ内の背景画像の上にエントリ フォームを含むテキスト ウィジェットを作成しようとしています。エントリーボタンと連絡先を画像上に正しく配置しようとしています。今は真ん中ですが、左下に移動しようとしています。ウィジェットに使用しているコードは次のとおりです。ボックスとボタンを移動するためにインラインでどの CSS を追加するかを誰かが理解するのを手伝ってくれませんか? （それから私はそれらを微調整することができます。それを行うために何を追加する必要があるかを理解する必要があるだけです。）ありがとう！

<form style="-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center; padding: 25% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" <input type="text" style="width:200px;height:20px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
    </p>
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input type="submit" value="Subscribe" />
</form>

最初に質問を投稿してから、コードを少し変更しました。

<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align: center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg) no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
    <p>
        <input type="text" style="width:170px;height:18px;margin-bottom:-110px;margin-left:-125px;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
    </p>
    <input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
    <input type="submit"  style="margin-bottom:-134px;margin-left:-220px;" value="Subscribe" />
4

1 に答える 1

1

左下隅を意図していたと思います。もしそうなら、これを使用してください：

<form style="-webkit-background-size: cover;-moz-background-size: cover;
-o-background-size: cover;background-size: cover;padding: 3px;text-align:     center;background: url(http://noahsdad.com/wp-content/uploads/2012/05/noahs-dad-side-bar.jpg)      no-repeat center;
padding: 30% 0;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=noahsdad', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<p>
    <input type="text" style="width:170px;height:18px;float:left;margin-top:28%;" name="email" onblur="if (this.value == '') {this.value = 'Enter your email address';}" onfocus="if (this.value == 'Enter your email address') {this.value = '';}" value="Enter your email address"/>
</p>
<input type="hidden" value="noahsdad" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input type="submit"  style="float:left;margin-top:28%;" value="Subscribe" />
于 2012-05-17T17:15:06.390 に答える