- 締切済み
CSSでのテキストの下に画像などを配置したい。
CSSでレイアウトしたページを作っています。 画面左のナビをテキストで作成しました。 （ヘッダーの下に、左のナビと右のメインエリアという構造） テキストの周囲をボーダーで囲んであります。 （TABLEは使っていません） テキストでの一覧のメニューの下に、画像のボタン等を配置したいのですが、メニューのテキストのテキストサイズを固定していないため、ブラウザの文字サイズを大きくしたりすると、メニューが縦に伸びたりします。 この時、メニューの下に配置する画像を、上のメニューの大きさ（縦幅）が変わってもそれに合わせて配置を上下させたいのですが、どうすればいいのでしょうか？ とりあえずposition:absoluteでは絶対位置で指定されてしまうので、うまくいかないってことは分かっているのですが・・・ CSS自体まともに使うのは初めてなので、本等で調べながらやっているのですが、この部分が解決できません。
- alien
- お礼率87% (21/24)
- その他([技術者向] コンピューター)
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
ご質問の文章を読んで、3フレームに分割した構成で左がナビ用のフレーム、右が本文フレームというよく見かける例なのかな、と想像しました。本文フレームをmainと名付けたとして <html><head> <title>leftframe</title> <style type="text/css"> <!-- .Navi{position:absolute; top:100px; left:20px;} --> </style></head> などとしておいてからBODYの中身を <DIV class="Navi"> ■fileAへ<BR> <A href="A.htm" target="_main"><IMG src="buttonP.gif"></A><BR> ■fileBへ<BR> <A href="B.htm" target="_main"><IMG src="buttonQ.gif"></A> </DIV> と言うように文字やリンクを貼ったgif画像などの要素一つ一つを <BR>で改行してつないでやれば如何でしょうか。自分で確認はしておりませんが これで上手く行くと思います。フォント部分は勿論CSSでデザイン指定されると 思います。フォントは文字数を出来るだけ少なくしてやらないと「大きいフォント」に設定している環境では左フレームにスクロールバーがついてしまうかも知れませんね。
お礼
ありがとうございます。お礼が遅れて申し訳ございません。 私が今しているのは、フレームを使わずにCSSでレイアウトする方法です。 本やネットで調べ、もう少しで解決できそうです。 せっかく丁寧にご指導いただいたのに申し訳ございません。 でも、今回だけでなく今後お答えのようなことがあると思いますので、ぜひ参考にさせていただきます。 ありがとうございました。