1149081574 CSSについての質問です。


やりたいこと:
  画像にあるようなレイアウトにしたい。

-----
現状では⑥の位置(下限に配置)ができていません。

①は最背面。背景

②は固定幅。

③の次に来るものを右に回り込ませて④を表示している。float

んで、⑤は②の中で右寄せで一番上に表示したい。
⑥は②の中で右寄せで一番下に表示したい。
ただし、③の長さに合わせる。
③のほうが短い場合は想定しない。

--------

position:absolute;
bottom:1px;
とかで⑥を下から表示させることはできたんですが
absoluteのため回り込んでくれません。


わかりにくい説明で申し訳ございませんが
わかるかたいらっしゃいましたらお願いします。

回答の条件
  • 1人5回まで
  • 登録:2006/05/31 22:19:37
  • 終了:2006/06/01 13:58:05

ベストアンサー

id:tezcello No.3

tezcello回答回数460ベストアンサー獲得回数692006/06/01 09:55:16

ポイント35pt

このようにしたら上手くいっているみたいです。

1: 背景画像と全体幅

2: 左マージン、幅、position:relative

3: 幅、float:left

4: 上マージン、float:left

5: position: absolute; top: 0px; right: 0px;

6: position: absolute; bottom: 0px; right: 0px;

それと

dmy クラス clear: left;

を用意して、

<div class="dmy"></div>

中身の無いブロックを追加しました。float をクリアしておかないと、mozilla系では3が2からはみ出してしまうようです。

4の上マージンは5との重なりを防ぐ為です。

5の要素が何か分かりませんが、4のサイズが分っていない場合は、

4,5を収めるブロックを用意して、5->4の順に記述した方が良いと思います。

id:e23jp

あー できましたー

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

問題は2のrelativeの指定をしていなかったことと、right:0px;の指定を忘れていたことでした。

回り込みがあるのでright指定が不要と思い込んでいたみたいです。

2006/06/01 13:57:16

その他の回答(2件)

id:wizemperor No.1

wizemperor回答回数379ベストアンサー獲得回数522006/05/31 23:04:21

ポイント25pt

どこにどういったものが入るのかがわかりませんが、既に途中まで来ているとのことなので、それに沿う形で回答させていただきます。

③のほうが短い場合は想定しない。とありますので、

⑥に、



position:absolute;

bottom:1px;

right: 1px;



と右端からの位置を指定してやればよいかと思います。

既に指定されているかとは思いますが、②には「position: relative;」を指定します。


⑤も同様に、


position:absolute;

top: 1ox;

right: 1px;


で良いかと思います。

ただし、④にテキストが入る場合には、各ボックスの高さによって重なってしまうため、別の方法にしたほうがよいと思います。

id:doraemoon No.2

doraemoon回答回数22ベストアンサー獲得回数12006/06/01 08:09:44

ポイント20pt

z-index: 0;

というのを加えるのはどうでしょう。

それぞれの要素で『0』の部分を変えて1とか2とか3をいれると、

数字が大きい要素ほど前面にでます。

重ね合わせの優先度を指定してます。

マイナスの数字はいれない方がいいと想います。

この場合でしたら、それぞれの要素につける数字は

①<②<③=④<⑤=⑥

という大小関係にして、鉛直方向に要素の位置づけをします。

あとは回り込みとか右寄せとかで水平方向に位置づければいいと想います。

ご質問の意図を理解していない解答だったらごめんなさい。

実際のhtmlファイルがアップされていると幾分ましな解答ができるかもしれません。

id:tezcello No.3

tezcello回答回数460ベストアンサー獲得回数692006/06/01 09:55:16ここでベストアンサー

ポイント35pt

このようにしたら上手くいっているみたいです。

1: 背景画像と全体幅

2: 左マージン、幅、position:relative

3: 幅、float:left

4: 上マージン、float:left

5: position: absolute; top: 0px; right: 0px;

6: position: absolute; bottom: 0px; right: 0px;

それと

dmy クラス clear: left;

を用意して、

<div class="dmy"></div>

中身の無いブロックを追加しました。float をクリアしておかないと、mozilla系では3が2からはみ出してしまうようです。

4の上マージンは5との重なりを防ぐ為です。

5の要素が何か分かりませんが、4のサイズが分っていない場合は、

4,5を収めるブロックを用意して、5->4の順に記述した方が良いと思います。

id:e23jp

あー できましたー

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

問題は2のrelativeの指定をしていなかったことと、right:0px;の指定を忘れていたことでした。

回り込みがあるのでright指定が不要と思い込んでいたみたいです。

2006/06/01 13:57:16

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません