インラインフレーム内でのテーブル位置指定が上手くいかない理由と解決策

2008/12/14 19:57

このQ&Aのポイント

インラインフレーム内でのテーブル位置指定が上手くいかない理由と解決策を紹介します。
フリー素材サイトのメニューテーブルを左上フレームに配置したいが位置指定ができない問題について、解決策を提案します。
HTMLとスタイルシートの適切な使用方法により、メニューテーブルの位置指定を上手に行う方法を説明します。

インラインフレーム内でのテーブル位置指定が上手くいきません

インラインフレームを使用したホームページ作成中なんですが一箇所だけどうしても解決できないことがあったので質問させていただきますフリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいでメニューテーブルの位置指定ができずにいますテーブルは縦につなげるタイプのものです左上フレーム内のright bottomに指定したいのですが上手くいきません大変見苦しい点が多いとは思いますがどなたか解決策、アドバイス等ありましたらよろしくお願いいたします【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】～ #left{ width:180px; text-align:right; vertical-align:bottom; }

0ovino0
お礼率70% (7/10)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

buddhistic
ベストアンサー率57% (30/52)

2008/12/14 20:21 回答No.1

<html> <head> <style type="text/css"> html, body, #container { margin: 0; padding: 0; height: 100%; width: 100%; } </style> </head> <body> <table id="container"> <tr><td align="right" valign="bottom"> <h2>サイト名</h2> <table id="left" cellpadding="0" cellspacing="0"> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </td></tr> </table> </body> </html> 以上のようにしたら、おそらくご希望の動作をすると思います。

質問者