-1

私はすでにこのサイトでいくつかの優れたサポートを受けているので、問題が発生したときはもちろん、スタック オーバーフローが私の最初の連絡先です。

レスポンシブ Web サイト テンプレートをダウンロードして、たくさんの変更を加えました。私はほとんど完成しています。ただし、1 つ問題が残っています。

サイトの上部にログイン フォームを作成し、別の SO ユーザーの助けを借りて、クリック可能な相対イメージを作成しました。問題は、サイトが表示される画面が 479px よりも小さくなると、関連する画像が本来あるべき場所に表示されないように見えることです。

ここにウェブサイトをアップロードしました。問題を解決するための助けをいただければ幸いです。

4

3 に答える 3

0

完成したコードを提供するだけでなく、なぜこれが起こっているのかを説明しようと思います。

したがって、position：relativeを使用する場合。要素をその親に対して相対的に配置します。.forgotten_2画像では、右を使用しました：226px; そのようにして、親（）の右端から226pxの位置に配置しました。
さて、フォームが2行に分かれている場合、その配置は適切ではありません。

代わりに使用する必要があるもの：

  • 入力フィールドに背景画像としてアイコンを配置する（どこかにリンクする必要がない場合）
  • 入力とそのアイコンの周りにdivをラップするようにHTMLを変更し、それに比較的配置します

私が見るように、「忘れた...」を指すリンクが必要なので、おそらく2番目の解決策を使用する必要があります。HTMLは次のようになります。

<form method="" action="" name="">

  <div class="input-box">
    <img class="forgotten_1" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Username?">
    <input type="text" id="login" onfocus="if(this.value=='E-Mail Address') this.value='';" onblur="if(this.value=='') this.value='E-Mail Address';" value="E-Mail Address">    
  </div>

  <div class="input-box">
    <img class="forgotten_2" src="http://www.razorrobotics.com/images/question-mark.gif" onclick="open_win()" title="Forgotten Your Password?">
    <input type="password" id="login" onfocus="if(this.value=='Password') this.value='';" onblur="if(this.value=='') this.value='Password';" value="Password">
  </div>

<input type="submit" name="submit" value="Log In" class="general_button" style="margin-left:-35px;">
</form>

次に、input-box用にCSSを追加します。

block_login（フォームの親）にはfloat：rightがあることに注意してください。それはあなたのスタイリングを妨げるかもしれません;）

于 2013-01-08T01:48:22.887 に答える
0

画像は、フォームまたはラッパー div に対して相対的に配置されます。これらは、次のように、入力または入力をラップする div に対して相対的に配置する必要があります。

<form name="" action="" method="">
<div style="position: relative; overflow: auto; display: inline-block;">
    <img title="Forgotten Your Username?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_1">
    <input type="text" value="E-Mail Address" onBlur="if(this.value=='') this.value='E-Mail Address';" onFocus="if(this.value=='E-Mail Address') this.value='';" id="login">
<div style="position: relative; overflow: auto; display: inline-block;"> 
    <img title="Forgotten Your Password?" onClick="open_win()" src="http://www.razorrobotics.com/images/question-mark.gif" class="forgotten_2">
    <input type="password" value="Password" onBlur="if(this.value=='') this.value='Password';" onFocus="if(this.value=='Password') this.value='';" id="login">
</div>
<input type="submit" style="margin-left:-35px;" class="general_button" value="Log In" name="submit">

そうする場合は、これをログインボタンに配置してください...

display: inline-block;
margin-left: 0;
vertical-align: top;

物事はかなり良さそうです。

別の注意事項...疑問符ボタンのリンク用に新しいウィンドウを開かないでください。通常、通常のブラウザ機能とそのようなフローを壊したくはありません。また、簡単にするために、インライン JS の代わりに jQuery の Placeholder プラグインを使用することを検討してください。

于 2013-01-08T01:43:09.327 に答える
0

さすがに、同じIDの複数要素を参照してはいけません。両方のフィールドに #login の ID があります。ほとんどの場合、これを .login のクラスに変更する必要があります。

私にとって、？最初のフィールドの画像は、2 番目のフィールドとは異なる位置に着地します。

ビューポートが変更されてもフィールドのサイズは変更されないため、各フィールドを含む div (position:relative セットを使用) に移動することをお勧めします。入力の幅と高さを 100% にしてから、上下を使用して画像を絶対に配置し、入力の最後に配置します。

于 2013-01-08T02:17:48.617 に答える