テーブルを用いずにCSSでのデザインを行っていますがheight指定がうまくできないで困っています。質問の詳細は以下に記載しました↓

http://www.geocities.jp/cog_inoue/q/question01.html

なるべく具体的に教えていただければと思います。

回答の条件
  • URL必須
  • 1人2回まで
  • 登録:
  • 終了:--
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

回答3件)

id:hatete88 No.1

回答回数266ベストアンサー獲得回数0

ポイント5pt

http://www.tagindex.com/stylesheet/box/index.html

スタイルシート[CSS]/ボックス - TAG index

豊富な例とともに、各指定方法が詳細に解説されています。

id:hiyokoya

情報ありがとうございます。

ただ、そちらで掲載されている情報ではちょっと解決しそうにないですね…(少なくとも私は解決する方法がわかりません…泣)

それにmax-height、min-heightといった指定はIE6.0、IE5.0に対応していないという問題もあるようですし…できればこういったリファレンス的なものではなく、もっと直に「こうやれば解決できる」という手段を提示していただければ思います。

なにはともあれ、ありがとうございました。

2005/07/15 01:47:20
id:andi No.2

回答回数448ベストアンサー獲得回数0

ポイント55pt

強引でしょうか・・・


<style>

.left{

float:left;

width:200px;

background-color:#DDD;

border-right:1px solid #000;

}

.right1{

margin-left:199px;

border-left:1px solid #000;

}

.right2{

margin-left:1em;

background-color:#DDD;

}

</style>

<div class=”left”>

a<br>

b<br>

c

</div>

<div class=”right1”>

<div class=”right2”>

a<br>

b<br>

c<br>

d<br>

e

</div>

</div>

id:hiyokoya

すばらしいです!ありがとうございます。

まだWinIE6.0とFireFox1.04でしか確認してませんが、ちゃんと動作してますね。なるほどーこうやればよかったんですね。

なぜ、この場合に、.right1{margin-left:199px;}が、.leftの横ではなく、一番左端からカウントしているのか…とかのメカニズムが理解できてませんが、たしかにこれでうまくいってるみたいですね。

10pxにしたい場合は、.right1{margin-left:190px;border-left:10px;}にすればうまくいきますね。

…あ、でも、やっぱりright1{width:500px;}とか指定すると崩れてしまうのですね…むむう…メカニズムを理解できていない自分がふがいないですが、これで問題が無事解決しそうだ、ということで、ありがとうございました。重ねて感謝いたします。

2005/07/15 02:27:40
id:ipexxon No.3

回答回数11ベストアンサー獲得回数1

ポイント20pt

http://degeneration.under.jp/

樋卦猛者命(ひげもじゃのみこと)

URLはダミー


<div id=”bottoms”>の背景画像で縦線を入れるのが良さそうに感じますが。背景であっても画像は使用できませんか?


左側全体を囲むブロック:<div id=”bottom_left”>

右側全体を囲むブロック:見当たらない


右側全体を囲むブロックが存在するならば左側ブロックの右側と右側ブロックの左側にボーダー指定、重なるようにマージン指定というのも考えられますが、IEとFireFoxのボーダーの仕様が微妙に違うため、hiyokoyaさんの要求を満たせません。


僕も同様の問題で悩んだことがありますが、height指定ではうまくいきません。

id:hiyokoya

ソースが汚くてすみません…右側全体を囲むブロックは、bottom_newsですね…質問の仕方のマナーとしてもう少しソースをキレイにしておくべきでした。

>右側全体を囲むブロックが存在するならば左側ブロックの右側と右側ブロックの左側にボーダー指定、重なるようにマージン指定

andiさんに答えていただいたやり方ですね。

確かにボーダーの解釈違うはずですよね。でも、なぜか僕の手元の環境では、FirefoxでもIEでもうまく見えているようなのですが…うーん、こりゃなんか私の検証が十分じゃないですかね。もう少し検証の余地あり、ということで。

の背景画像で縦線を入れるのが良さそうに感じますが

そうですね。実を言うと、僕もこの質問でスマートな解決策がないなら結局はその手段が一番かな、と思っていました。ですが、フルCSSデザインをしようというのときにこの問題はおそらく今後もまた何度でも立ちふさがる問題だろうと思えたので、そんな苦々しい解決策よりも、もっと手軽な解決策はないものか、と質問させていただいた次第です。

丁寧に見ていただきありがとうございました。感謝いたします。

2005/07/15 02:38:07

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

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

トラックバック

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

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

回答リクエストを送信したユーザーはいません