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

テーブルを用いずにCSSでのデザインを行っていますがheight指定がうまくできないで困っています。質問の詳細は以下に記載しました↓
http://www.geocities.jp/cog_inoue/q/question01.html

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

●質問者: hiyokoya
●カテゴリ:コンピュータ
✍キーワード:CSS デザイン
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● hatete88
●5ポイント

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

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

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

◎質問者からの返答

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

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

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

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


2 ● andi
●55ポイント

http://www.yahoo.co.jp/

Yahoo! JAPAN

強引でしょうか・・・


<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>

◎質問者からの返答

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

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

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

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

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


3 ● ipexxon
●20ポイント

http://degeneration.under.jp/

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

URLはダミー


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


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

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


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


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

◎質問者からの返答

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

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

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

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

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

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

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

関連質問


●質問をもっと探す●



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