DREAMWEAVERでホームページを制作中なのですが、レイアウトが崩れて困っています。

質問

ページレイアウトは、トップ（タイトルバナー）・左（メニュー）・右（メインコンテンツ）・ボトムといった構造です。

Fireworksで全体のイメージを切り出してからDREAMWEAVERで制作するというスタイルなのですが、右側（メインコンテンツ）に文字や画像を挿入すると左側のメニューが、メインコンテンツの文字や画像を挿入したことにより、余白が生まれ縦に伸びてしまいます。

左メニューのセル高さが絶対に崩れない方法をご存知でしたらご教授お願いいたします。

回答No.3

zexus · ベストアンサー

もしかして、テーブルを使ってHPを作成されていますでしょうか？
以前テーブルでトップやメニューなどのコンテンツを作成した時に、画像が入っているセルの長さに合わせて、他のセルが伸びてしまったことがあります。テーブルをもしお使いでしたら、テーブルの中にテーブルを入れる、いわゆる入れ子のようにしてはどうでしょうか？
例えば、
トップと左メニュー、メイン、ボトムに分けたテーブルを作成し、トップはそのままで、左メニューに更にテーブル、メインに更にテーブルと、別々のテーブルを別に作ることで、伸びることはなくなると思います。
見当違いの答えでしたら、すみません。

回答No.2

noname#119957

右側（メインコンテンツ）に文字や画像を挿入すると左側のメニューが、メインコンテンツの文字や画像を挿入したことにより、余白が生まれ縦に伸びてしまいます。
>>文章を何回読んでも、この意味がよく理解できません。そのために、もしかしたら、と思う部分について書きます。（当たっていない場合もあるかと思います。）
**
これが、ＣＳＳの適用範囲の問題であれば、
左側メニューのＣＳＳの適用と右側のコンテンツのＣＳＳの適用が混同していると右側で指定したつもりが、左側に適用されてしまって左側のレイアウトが崩れることになりますので、ＣＳＳをお使いにある場合は、右側と左側で明らかに異なるように、ネストさせて記述した方がいいと思います。
<div id="left">
<ul id="nav">
*****</ul>
<img src="" />
</div>
<div id="right">
<img src="" />
</div>

これを
#left img{}
#right img{}
であればいいのですが、
img{}

では、右側にも左側にもおなじＣＳＳが適用されてしまいレイアウトが崩れる原因になります。

回答No.1

salonpath

右側のコンテンツに文字や画像の内容が入ると
左側のメニューに「余白が生まれ縦に伸びる」？？

右は伸びるけど左は伸びてないからボトム（フッターですかね）との間に余白が出来てるんですよね？

考え方としてはコンテンツとメニューで背景を分けないで
両方を包むブロックの背景にコンテンツとメニューの縦リピートの画像を指定するとかなんですけど
右のコンテンツ部分にheightつけてoverflowさせればスクロールバーがでて高さ固定できるだろうし。
構造によって作り方は変わるので、これ以上はなんともいえないです。