スタイルシートCSSの設定について教えて下さい。

希望通りの形で設定ができた場合は、2000ポイント進呈させていただきます。

対象サイト http://www.obanzaiya.com/
参照サイト http://www.agoda.jp/asia/indonesia/bali.html

対象サイトの左カラム最上部に“検索”という欄があります。
下部に宿泊日、出発日等の入力項目のある、検索ボックスがありますが、
CSSを設定して、上記参照サイト左上部の検索ボックスと、同じようなスタイル(見栄え)にしたいのですが、どのように設定すればよいでしょうか?
検索ボタンに使う画像は、サイズが同じであれば、後程変更しますので、何でも構いません。
参照サイトの検索ボックス内にある「価格保証」の箇所は不要です。
どうぞよろしくお願いいたします。

検索ボックスのHTML構造は、以下のURLにアップしてあります。
http://www.obanzaiya.com/html-example
また、検索ボックスの見本CSSは以下のURLにアップしてあります。
http://www.obanzaiya.com/css-example

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/01/25 19:13:40
  • 終了:2012/01/27 11:26:38

ベストアンサー

id:Cherenkov No.1

Cherenkov回答回数1503ベストアンサー獲得回数4932012/01/25 20:20:56

ポイント2000pt
#agoda_calImg1, #agoda_calImg2 {
  vertical-align: -9px !important;
  margin-top: 0 !important;
}

#agoda_checkin_selection, #agoda_checkout_selection {
  float: left;
  margin: 10px 0 !important;
}

#agoda_checkin_selection {
  margin-right: 40px !important;
}

#agoda_roompeople_selection, #agoda_button_selection {
  clear: left;
}

#agoda_button_selection {
  margin-top: 10px !important;
}

#agoda_room_selection, #agoda_adult_selection {
  float: left;
}

#agoda_btnSubmit {
  background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120125/20120125212909.gif") no-repeat transparent;
  border-radius: 7px 7px 7px 7px;
  box-shadow: 3px 3px 5px #C0BEC3;
  border: 3px solid #109FFF;
  height: 55px;
  width: 165px;
  cursor: pointer;
  text-indent: -9999px;
}

#agoda_btnSubmit:hover {
  border: 3px solid #1971EF;
}

#agoda_btnSubmit:active {
  background: url("http://cdn-ak.f.st-hatena.com/images/fotolife/C/Cherenkov/20120125/20120125215009.gif") no-repeat;
}

この回答は要望に対して技術的に可能であることを証明する目的であり、パクリを推奨するものではありません。一応念のため。

他4件のコメントを見る
id:nobu55

なるほど。画像で問題ありません。どうぞよろしくお願いします。

2012/01/25 21:25:56
id:Cherenkov

ボタンの「検索」の文字を消すために、text-indentを使って飛ばしていますが、使うべきではないといった意見もあります。text-indentを使わない方法としてはボタンのvalueの値を空にするだけです。

2012/01/25 22:06:12
  • id:nobu55
    cherenkovさん、もしよろしければ、また是非回答をお願いいたします。
  • id:Cherenkov
    リクエストありがとうございます^^;
    人数のパーツなど参照サイトとは異なるので希望する位置がわかる図を提示していただくと回答が付きやすいと思います。
    また、カレンダーのデザインも含まれるのか、など。
  • id:nobu55
    了解です。
  • id:nobu55
    1列目=宿泊日、出発日
    2列目=部屋、大人、子供
    3列目=ボタン

    このような配列で、参照サイトと似通ったデザインを希望しています。
  • id:nobu55
    カレンダーのデザインはデフォルトの状態でかまいません。
  • id:nobu55
    Cherenkovさん、質問を修了しました。
    回答、本当にありがとうございました。
    今後とも、是非よろしくお願いいたします。
  • id:nobu55
    ポイントは、2000ポイント送らせていただきました。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません