バナー部分に検索窓を埋め込みたいのですが、firefoxで表示が崩れてしまいます。

右の画像の下にバナーを表示し、かつfirefoxでも表示が崩れないようなアドバイスをお願い致します。
【検索窓なしソース】
<!-- タイトル部分 -->
<h2>
<div id="catetitle">
<div id="titlehidari" align="left><a href=""><img src="../img/newlog.gif" alt="" /></a></div>
<div id="titlemigi" align="right">
<a href=""><img src="../img/logo.gif" /></a></div>
</div>
</h2>
<!-- タイトル部分終わり -->
<!-- ナビ部分 -->
<table width="700" border="0" cellpadding="0" cellspacing="0" id="navigation">
<tr id="navbar">
<td width="123"><div class="menu"><a href="contact.html" title="お問い合わせ">お問い合わせ</a></div></td>
 *複数*
</tr>
</table>
<!-- ナビ部分終わり -->

【自分で検索窓有ソース】
<!-- タイトル部分 -->
<div id="titlemigi" align="right">
<a href=""><img src="../img/logo.gif" alt="" /></a></div><br />
<table cellpadding="0" cellspacing="0">
<tr>
<td>
<form action="" name="gs" method="get">
フォームのソース
</form>
</td></tr>
</table><br />
</div>

アドバイスよろしくお願い致します。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:2008/11/14 11:08:24
  • 終了:2008/11/21 11:10:03

回答(1件)

id:rouge_2008 No.1

rouge_2008回答回数594ベストアンサー獲得回数3512008/11/16 12:31:41

ポイント60pt

画像やバナー、それぞれのボックスのサイズが不明ですが、検索窓専用のボックスを作成して、CSSで配置してはいかがでしょうか?

例えば、次のようにします。


<div style="width: 750px;" id="outline">

<div style="width: 745px; height: 120px;" id="title-box">

<div style="float: left; width: 370px; height: 115px;" id="title-left"><img src="*****.gif" width="" height="" alt="Title画像1" /></div>

<div style="float: right; width: 370px; height: 115px;" id="title-right"><img src="xxxxx.gif" width="" height="" alt="Title画像2" /></div>

</div>

<div style="clear: both; text-align: right; width: 350px; height: 28px; margin: 2px 5px 2px auto;" id="search-box">

ここに検索窓のフォームを記述

</div>

<div style="width: 745px;" id="main-box">

このボックスにメニューやテキストのボックスを配置

</div>

</div>


※CSSは「style="~"」でタグ内に記述せずに、外部スタイルシートに記述しても大丈夫です。

※各ボックスのサイズやマージン、パディングの値は、任意の値に変更して好みのデザインになるように整えてください。


ポイント

・画像用の左右のボックスを「align=""」ではなく、CSSの「float」で配置して、検索窓用のボックスに「clear: both;」を指定して解除します。

・検索窓用のボックスはCSSで「margin: 2px 5px 2px auto;」を指定して、外側のボックスの右から5pxの位置に配置するようにしています。(右からの指定位置に配置するため、左側は必ず「auto」を指定します。)

・検索窓用のボックスにCSSで「text-align: right;」を指定して、検索フォームが右側に表示されるようにしています。


スタイルシートについて分からないことがあった場合は、次のページを参考にしてみてください。

http://www.dspt.net/stylesheet_css/001.html

id:mika555

ありがとうございます。

明日、仕事場で頑張ってみます。

勉強させて頂きます。

2008/11/17 01:19:50

コメントはまだありません

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

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

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

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