人様のページですが、説明に使わせていただくと
http://desperadoes.biz/style/dan/1-f.html
こちらのようなシンプルなフロートを使った組み合わせなのですが、この例の場合左のメニューの下にフッターまでの間空白が出来てしまいます。
私が作っているものもメニューの高さは不明ですし(ユーザーの指定するフォントサイズによります)、右の本文はもっと高さが不明です。
フッターまでの余白を左右両方とも無くす方法はないでしょうか?
何か解決方法orそれが書かれたURL、回答があれば教えて下さい。
よろしくお願いします。
1の回答者です。
色ではなく #wrapper に例えば左側が赤色、右側が青色という画像(800px x 1px 等)を指定するというのはだめでしょうか。
CSS は次のような感じに。
#wrapper { background-image: url("background.gif"); background-repeat: repeat-y; }
デザインがリキッドレイアウト(可変)であっても大きめの画像を用意するなどすれば見るぶんには支障がないようにつくれると思います。
<div id="wrapper"> <div id="content"> <p>左側</p> </div> <div id="navi"> <p>右側</p> </div> </div>
例えば HTML が次のようになってるとして、#wrapper の背景に任意の画像を指定すれば違和感のないような感じにはできると思います。
具体例でいうと以下のページのような感じです。
無理みたいです…。
左の背景色が赤、右が青だとすると、
#wrapperに赤を設定して左が長く伸びると右の下側が赤になってしまいます。
伸びるのは必ず右、とか分かっていればこの方法で解決できますね…。
URLは申し訳ありません。なぜかタイムアウトして開けませんでした
こういうことでしょうか。
http://allabout.co.jp/internet/hpcreate/closeup/CU20050328A/
簡単に説明すると、MENUとSUB TITLEの2つの領域を囲む1つの領域を作成し、そこに背景を指定するという方法です。
http://allabout.co.jp/internet/hpcreate/closeup/CU20050401A/inde...
> この方法なら、ダミーのHTMLは必要ですが、左右どちらの段が短くても、HTMLの記述順やfloatプロパティの適用段を気にする必要はなくなります。
とあるのですが、どうしてもどちらかの色しか問題を解決できません。
メニュー用の解決策だと本文が長いとダメ、
本文用だと、メニューがダメ、、
2つ用意するしかないのでしょうか…。
背景色の指定ではなく、MENUとSUB TITLEと同じ幅・色を使用した背景画像を使用するのではダメでしょうか。
同じ幅といっても見る環境によって変わりますが…。
すいません、少し言われている意味を理解していないようです。
ああ、下のokuryuさんと同じ回答ですね。
理解できました。
1の回答者です。
色ではなく #wrapper に例えば左側が赤色、右側が青色という画像(800px x 1px 等)を指定するというのはだめでしょうか。
CSS は次のような感じに。
#wrapper { background-image: url("background.gif"); background-repeat: repeat-y; }
デザインがリキッドレイアウト(可変)であっても大きめの画像を用意するなどすれば見るぶんには支障がないようにつくれると思います。
なるほど、これは素晴らしい方法かもしれません。
今、左右それぞれの高さを取得して、長い方に合わせるJavaScriptを書いて全然動いていないところでした(汗)
見事に解決できました!
ありがとうございました。
なるほど、これは素晴らしい方法かもしれません。
今、左右それぞれの高さを取得して、長い方に合わせるJavaScriptを書いて全然動いていないところでした(汗)
見事に解決できました!
ありがとうございました。