人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

CSSについて質問です。
人様のページですが、説明に使わせていただくと
http://desperadoes.biz/style/dan/1-f.html
こちらのようなシンプルなフロートを使った組み合わせなのですが、この例の場合左のメニューの下にフッターまでの間空白が出来てしまいます。

私が作っているものもメニューの高さは不明ですし(ユーザーの指定するフォントサイズによります)、右の本文はもっと高さが不明です。

フッターまでの余白を左右両方とも無くす方法はないでしょうか?
何か解決方法orそれが書かれたURL、回答があれば教えて下さい。
よろしくお願いします。

●質問者: x2pop
●カテゴリ:ウェブ制作
✍キーワード:CSS URL サイズ シンプル フォント
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● okuryu
●20ポイント
<div id="wrapper">
 <div id="content">
 <p>左側</p>
 </div>
 <div id="navi">
 <p>右側</p>
 </div>
</div>

例えば HTML が次のようになってるとして、#wrapper の背景に任意の画像を指定すれば違和感のないような感じにはできると思います。

具体例でいうと以下のページのような感じです。

http://web-standards.jp/?cat=5

◎質問者からの返答

無理みたいです…。

左の背景色が赤、右が青だとすると、

#wrapperに赤を設定して左が長く伸びると右の下側が赤になってしまいます。

伸びるのは必ず右、とか分かっていればこの方法で解決できますね…。

URLは申し訳ありません。なぜかタイムアウトして開けませんでした


2 ● coliss
●20ポイント

こういうことでしょうか。

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つ用意するしかないのでしょうか…。


3 ● coliss
●20ポイント

背景色の指定ではなく、MENUとSUB TITLEと同じ幅・色を使用した背景画像を使用するのではダメでしょうか。

◎質問者からの返答

同じ幅といっても見る環境によって変わりますが…。

すいません、少し言われている意味を理解していないようです。

ああ、下のokuryuさんと同じ回答ですね。

理解できました。


4 ● okuryu
●30ポイント ベストアンサー

1の回答者です。

色ではなく #wrapper に例えば左側が赤色、右側が青色という画像(800px x 1px 等)を指定するというのはだめでしょうか。

CSS は次のような感じに。

#wrapper {
 background-image: url("background.gif");
 background-repeat: repeat-y;
}

デザインがリキッドレイアウト(可変)であっても大きめの画像を用意するなどすれば見るぶんには支障がないようにつくれると思います。

◎質問者からの返答

なるほど、これは素晴らしい方法かもしれません。

今、左右それぞれの高さを取得して、長い方に合わせるJavaScriptを書いて全然動いていないところでした(汗)

見事に解決できました!

ありがとうございました。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ