掲示板/スタイルシート質問板/過去ログ/一覧/ 配置位置について

0 名前： パンチョ ： 2006/10/23（月） 15:54 ID:FdrzQQEJ: 【何をしたいのか】
→ Googleのサーチエンジンボックスを自由に配置したい。

【現在の状況】
→ 以下のスクプリトを実行しても正常に動作しない。

【何をしてみたのか】
→ 自分なりにスクプリトを作りました。
<style type="text/css">

</style>
<p class="sample1">

<center>
<form method=get action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif"
border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr></table>
</form>
</center>

</p>
【備考】
→ 上記のスクプリトの問題点を指摘しどのように修正したらいいのかを教えてください。
　よろしくお願いします。

1 名前： カヅサツ ◆ThCi95HEzw ： 2006/10/23（月） 15:54 ［URL］ ID:f0UXxXRM: > 以下のスクプリトを実行しても正常に動作しない。

それはスタイルシートの問題ではない(スタイルシートはレイアウトや配色などの見た目の制御しかできない)ので、総合質問板がよろしいかと思います。

2 名前： m035 ◆Wpzr1YKOiq ： 2006/10/23（月） 15:54 ［URL］ ID:VfH0QWt4

>以下のスクプリトを実行しても正常に動作しない。
あの、スクリプトの間違いでしょうけれど、どこにもスクリプトなんてありませんよ？
あるのはHTMLとCSSです。
ここもスタイルシートの質問板ですし。
また、以下がポジション指定だとすると、positionが指定されていないと思います。

.sample1 { top : 200px ; bottom : auto ; right : auto ; left : 200px }

centerとp要素を消し、google検索フォームのformにclass="sample1"を設定、cssの上記部分にpositon:absoluteを追加、bottomとrightを消したところ、ポジションが指定できました。

3 名前： パンチョ ： 2006/10/23（月） 15:54 ID:FdrzQQEJ: 回答ありがとうございました
m035さんが言うように修正してみましたが、だめでした。
下記のHTMLとCSSのどこが問題なのですか？
問題の行を教えてください。
<style type="text/css">

</style>

<form method=get action="http://www.google.co.jp/search">
<a class="sample1">
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif"
border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr></table>
</form>

</a>

4 名前： m035 ◆Wpzr1YKOiq ： 2006/10/23（月） 15:54 ［URL］ ID:VfH0QWt4

>>3
私が>>2で書いた修正をすると下記のようになるはずですが･･････。
googleの検索フォームを動かしたいのですから、無理にp要素で囲まなくても、form要素にpositionを設定すればいいのでは？

<style type="text/css">
<!--
.sample1 { position:absolute; top : 200px ; left : 200px }
-->
</style>
<!-- Google -->
<form class="sample1" method=get action="http://www.google.co.jp/search">
<table bgcolor="#FFFFFF"><tr><td>
<a href="http://www.google.co.jp/">
<img src="http://www.google.com/logos/Logo_40wht.gif"
border="0" alt="Google" align="absmiddle"></a>
<input type=text name=q size=31 maxlength=255 value="">
<input type=hidden name=ie value=Shift_JIS>
<input type=hidden name=oe value=Shift_JIS>
<input type=hidden name=hl value="ja">
<input type=submit name=btnG value="Google 検索">
</td></tr></table>
</form>
<!-- Google -->

5 名前： Z ◆XTzyosZXcL ： 2006/10/23（月） 15:54 ID:0kFtme6G: >>3
　おちついて>>2をよく読みましょう。「FORM要素」にクラスセレクタ「sample」を指定し、CSSの「sample」クラスセレクタに関する記述に「positon:absoluteを追加、bottomとrightを消して」とありますよ。

参考資料：
http://www.kanzaki.com/docs/html/htminfo17.html#S32

　なお、A要素にはTABLE要素などを含めることは出来ません。下記文法チェッカなどを元に、「問題の行」をチェックしてみてください。

Another HTML-lint gateway：
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

フォームについて：
http://www.kanzaki.com/docs/html/htminfo31.html
http://www.kanzaki.com/docs/html/htminfo32.html

6 名前： パンチョ ： 2006/10/23（月） 15:54 ID:FdrzQQEJ: 解決しました
ご協力ありがとうございます