検索窓について

Question

https://ec-masters.club/forum/post_view.php?id=548を拝見し

同様に設置を試みておりますが、

下記検索が正常に動作致しません。
↓↓↓↓↓↓↓↓
結果が〓〓〓になる、開いたページが右に開いてしまう。

GOLD内HTMLファイル
http://www.rakuten.ne.jp/gold/presentinc2/kensaku/kensaku.html

修正箇所をアドバイスお願い致します。

また、下記のように
http://www.rakuten.ne.jp/gold/compmoto-r/iframe/i_tabbanner.html

検索窓全体を四角で囲った、ようにしたいのですが。
どのようにすればよいのでしょうか？

宜しくお願い致します。

Answer

＞結果が〓〓〓になる
楽天の検索は、文字コードがEUCのデータを送信しないと文字化けいたします。
HTML作成ソフトで、文字コードをEUCに変換して保存をお願いいたします。
http://support.justsystems.com/faq/1032/app/servlet/qadoc?QID=046528

タグにaccept-chaset属性を加える方法もありますが、
InternetExplorerには対応しておりません。
詳しくは、こちらのページをご参照下さい。
http://www.webbibo.com/blog/htmlcss/accept-charset.html


＞開いたページが右に開いてしまう。
検索結果をページ全体で開くように設定する必要があります。
タグに、「target="_top"」の指定を加えれば可能です。


↓



＞また、下記のように
＞http://www.rakuten.ne.jp/gold/compmoto-r/iframe/i_tabbanner.html
＞検索窓全体を四角で囲った、ようにしたいのですが。
＞どのようにすればよいのでしょうか？
例示していただいたHTMLファイルの場合、
スタイルシートを使用して、
ページ全体を囲むdivタグ、の背景を
http://www.rakuten.ne.jp/gold/compmoto-r/image/sub_search_cr.png
にし、縦・横に繰り返さないという設定をしております。
実際に例示ファイルに書かれているスタイルシートの指定は、以下の通りです。

.search {
  width: 190px;
  height: 120px;
  text-align: center;
  background-image: url(../image/sub_search_cr.png);
  background-repeat: no-repeat;
}

Answer

動作正常になりました。ありがとうございました。

背景がよくわからず、
下記に画像のアドレスを入れましたが、
このスタイルシートはどこに入れればよいのでしょうか？

.search {
 width: 190px;
 height: 120px;
 text-align: center;
 background-image: url(http://image.rakuten.co.jp/presentinc2/cabinet/kensakumado.jpg);
 background-repeat: no-repeat;
 }

宜しくお願い致します。

Answer

既に入れていただいている通り、
同じHTMLに～タグで囲っていただく形で結構です。

画像の幅が200pxですので、
width: 190px;　を、　width: 200px;　にご変更ください。

あとは、入れていただいたスタイルシートの適用先が必要となりますので、
HTML内の～タグを、
 と  タグで囲っていただけますでしょうか。

Answer

表示されました、ありがとうございます。

たびたび申し訳ないのですが、

重なりの、後ろの画像だけ少し上にずらすには
どうすればよいのでしょうか？

宜しくお願い致します。

Answer

先ほどのスタイルシート内、 .search { と } の間に、
以下の指定を追加していただけますでしょうか。

padding-top: 40px;

「40」の数字を変更すると、上端からの間隔を調整できます。

Answer

なんとか設置できました。ありがとうございます。

感謝申上げます。

今は常時表示されておりますが、
最初は表示されず、
たとえば、画面をスクロールして少し下に来たときだけ
表示するというようなことは可能でしょうか？

たびたび申し訳ありません。
宜しくお願い申上げます。

Answer

その場合、JavaScriptによる処理が必要となるのですが、
埋め込み先のページ（www.rakuten.co.jp内のページ）ではJavaScriptが使えないため、
下に来た時だけの表示を実現することはできません。
もし、他ショップで同様の処理をしているショップがありましたら、
実現する方法を分析いたしますので、お知らせください。

Answer

ありがとうございました。
お手数をお掛けしました。
深謝申し上げます。

Answer

確認したいのですが、下記の

上記[1]と同じ値
上記[2]と同じ値は

top: expression((documentElement.scrollTop || document.body.scrollTop) + 90 + 'px'); /* 上記[1]と同じ値 */

90 + 'px');
↑↑
この部分

right: expression((documentElement.scrollRight || document.body.scrollRight) + 0 + 'px'); /* 上記[2]と同じ値 */

0 + 'px');
↑↑
この部分

で良いのでしょうか？

間違えて下記と部分と

top: 90px; /* [1]画面上端からの距離（下寄せの場合は bottom に変更してください） */
right: 0px; /* [2]画面右端からの距離（左寄せの場合は left に変更してください） */

異なる数値で登録してしまった時があり
それでも問題なく表示されておりましたので
確認したいのですが、

解決済みを再度申し訳ありませんが
御返信宜しくお願い致します。

Answer

はい、その部分で正しいです。

top: expression((documentElement.scrollTop || document.body.scrollTop) + 90 + 'px'); /* 上記[1]と同じ値 */
right: expression((documentElement.scrollRight || document.body.scrollRight) + 0 + 'px'); /* 上記[2]と同じ値 */

この2行は、InternetExplorer5～7に対応するための指定で、
それ以外のブラウザでは無視されます。

Answer

なるほど
了解しました。
ありがとうございました。