人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

バナー部分に検索窓を埋め込みたいのですが、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>

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


●質問者: mika555
●カテゴリ:インターネット ウェブ制作
✍キーワード:firefox アドバイス ソース バナー 検索
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● rouge_2008
●60ポイント

画像やバナー、それぞれのボックスのサイズが不明ですが、検索窓専用のボックスを作成して、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

◎質問者からの返答

ありがとうございます。

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

勉強させて頂きます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ