Ｐａｇｅ 899 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 通常モードに戻る ┃ ＩＮＤＥＸ ┃ ≪前へ │ 次へ≫ ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ▼トップページメニュー ぺ〜じ 05/1/11(火) 20:01 ┣Re:トップページメニュー 七鍵 05/1/11(火) 20:14 ┗Re:トップページメニュー Pid 05/1/11(火) 21:34 ─────────────────────────────────────── ■題名 ： トップページメニュー ■名前 ： ぺ〜じ ■日付 ： 05/1/11(火) 20:01 -------------------------------------------------------------------------
| トップページで小さいメニューを複数配置したいのですが、自分の思うような配置位置になりません。画像貼れないのでうまく説明できませんが、 ●＝メニュー ● ● ● ● ● ↑ こんな配置にしたいのです。すいませんがどなたか助言お願いします。 |
| ３×３のテーブルを作成してみてはいかがでしょうか？ <table> <tr><td></td><td>●</td><td></td></tr> <tr><td>●</td><td>●</td><td>●</td></tr> <tr><td></td><td>●</td><td></td></tr> </table> これを応用すればできると思います。 他にもメニュー全体を画像にする方法もありますが、 手間がかかる方法ですのでテーブルを使う方法をお奨めしました。 |
| 以下の例は Mozilla 1.6 で確認済みです。 毎度のことながら WinIE6 では反映されません（それでも大きな害は無さそうだったので）。各 li 要素（もしくは a 要素）に id を割り振れば IE でも何とかなりますが，面倒だったので…(^^;)。 まあ，単なるお遊びです，はい。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>…のページ</title> <style type="text/css"> #site-menu { position: relative; list-style: none; } #site-menu li a { position: absolute; /* 画像の大きさを 100x100 と仮定 */ border: 1px solid #888; width: 100px; height: 100px; } #site-menu li a[href="menu1.html"] { top: 0px; left: 100px; } #site-menu li a[href="menu2.html"] { top: 100px; left: 0px; } #site-menu li a[href="menu3.html"] { top: 100px; left: 100px; } #site-menu li a[href="menu4.html"] { top: 100px; left: 200px; } #site-menu li a[href="menu5.html"] { top: 200px; left: 100px; } </style> </head> <body> <h1>…のページ</h1> <ul id="site-menu"> <li><a href="menu1.html">メニュー 1</a></li> <li><a href="menu2.html">メニュー 2</a></li> <li><a href="menu3.html">メニュー 3</a></li> <li><a href="menu4.html">メニュー 4</a></li> <li><a href="menu5.html">メニュー 5</a></li> </ul> </body> </html> |