/* CSS･スタイルシート質問スレッド【29】 */
width="1280" height="1024" こんな画像は表示させなくてよろしい。
|
|
|
819 ：Name_Not_Found：04/04/21 12:05 ID:???
820 ：Name_Not_Found：04/04/21 13:41 ID:???
>817
div にborderを設定してみると、IEでも <div class="main"> の上端自体は
menu にそろってますね（Operaではずれてますが）
で、>818にもありますが、1280×1024の画像をスクロール無しに表示できる環境って
どれくらいあるんでしょう
一度アクセス解析つけて調べてみては？
ちなみに、画像サイズを640×480にしたら、お望みどおり高さ揃いました
ただし、ウィンドウサイズを小さくして、縦スクロールバーを出すと、画像の高さがずれます
position 使ったら？
div にborderを設定してみると、IEでも <div class="main"> の上端自体は
menu にそろってますね（Operaではずれてますが）
で、>818にもありますが、1280×1024の画像をスクロール無しに表示できる環境って
どれくらいあるんでしょう
一度アクセス解析つけて調べてみては？
ちなみに、画像サイズを640×480にしたら、お望みどおり高さ揃いました
ただし、ウィンドウサイズを小さくして、縦スクロールバーを出すと、画像の高さがずれます
position 使ったら？
821 ：Name_Not_Found：04/04/21 13:56 ID:???
>>817は、画像だけなら<div class="main">で囲む必要無し。
img要素に直にfloatなりmargin-leftなりを指定すれば済む話。
img要素に直にfloatなりmargin-leftなりを指定すれば済む話。
822 ：Name_Not_Found：04/04/21 20:14 ID:???
>>820
position を使うと、後続要素の位置調整が面倒だと思う。
結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
html をいじらないという前提なら、body の幅を広げるしかないのでは？
>>817
ということで、書いてみました。
スタイルシート以外の部分は、全て >>817 と共通ね。
--------------------------------------------------------
* { border:solid 1px black; } /* border の視覚化 */
body {width:1500px;} /* 1280px + 200px が 収まるように */
.menu {/* メニュー */
float: left;
width: 200px; /* body が px 固定になっちゃったから、子を相対値にするのは、あまり意味がない */
}
.main {/* メイン */
margin-left:210px;/* .menu と同じ理由 */
}
position を使うと、後続要素の位置調整が面倒だと思う。
結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
html をいじらないという前提なら、body の幅を広げるしかないのでは？
>>817
ということで、書いてみました。
スタイルシート以外の部分は、全て >>817 と共通ね。
--------------------------------------------------------
* { border:solid 1px black; } /* border の視覚化 */
body {width:1500px;} /* 1280px + 200px が 収まるように */
.menu {/* メニュー */
float: left;
width: 200px; /* body が px 固定になっちゃったから、子を相対値にするのは、あまり意味がない */
}
.main {/* メイン */
margin-left:210px;/* .menu と同じ理由 */
}
823 ：Name_Not_Found：04/04/21 20:14 ID:???
>>817
しかし、このレイアウトはあまりにも閲覧者にとって不便だと思う。
こういう↓感じに変更することを、個人的にはおすすめしたい。
「"いろは"の先の CSS 第3回」の「課題 No.06」
http://deztec.jp/lecture/folio/03/index.html
（ページ下方にあります）
しかし、このレイアウトはあまりにも閲覧者にとって不便だと思う。
こういう↓感じに変更することを、個人的にはおすすめしたい。
「"いろは"の先の CSS 第3回」の「課題 No.06」
http://deztec.jp/lecture/folio/03/index.html
（ページ下方にあります）
824 ：Name_Not_Found：04/04/21 22:50 ID:???
みなさんありがとうございます。
>>817ですが1280〜とかはただの例です。
実際はもっと小さい画像(といっても600〜とかですが)を表示させて、
窓最大だと大丈夫なのに窓サイズを小さくしたとき、IEだけ高さがずれたので不思議に思って質問しました。
質問内容をわかりやすくしようとしたんですが逆効果のようでした。すみません。
>結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
>>822さん
これはIEのバグなんでしょうか？
>>817にあるとおりMozillaやOperaは高さがずれませんでした。
>>817ですが1280〜とかはただの例です。
実際はもっと小さい画像(といっても600〜とかですが)を表示させて、
窓最大だと大丈夫なのに窓サイズを小さくしたとき、IEだけ高さがずれたので不思議に思って質問しました。
質問内容をわかりやすくしようとしたんですが逆効果のようでした。すみません。
>結局、包含ブロック(body)の幅が、画像に比べて狭いのが原因だということで、
>>822さん
これはIEのバグなんでしょうか？
>>817にあるとおりMozillaやOperaは高さがずれませんでした。
>>824
悪いけど私にはわからない。仕様書とか詳しくないから。
これは、float の指定されたブロックのあとに、置換インライン要素が続くとき、
その置換インライン要素の幅が、全体の包含ブロックより大きい場合、どう振舞うべきか、
ということなんだけど、
仕様書やバグ辞典を見ても、私には該当する項目が見つからないんです。
>>818 のソースで、
.main{} （宣言が空）のときの表示は、IE も Mozilla も同じなんだけど、
.main { marign-left:21% }
.main { padding-left:21% }
とすると、ご承知のとおり、描画が異なる。どちらが正しいのだか、私にはわからない。
ちなみに、
.main { width:1600px }
としても描画が異なるんだけど、これは IE が間違っていると思う。
悪いけど私にはわからない。仕様書とか詳しくないから。
これは、float の指定されたブロックのあとに、置換インライン要素が続くとき、
その置換インライン要素の幅が、全体の包含ブロックより大きい場合、どう振舞うべきか、
ということなんだけど、
仕様書やバグ辞典を見ても、私には該当する項目が見つからないんです。
>>818 のソースで、
.main{} （宣言が空）のときの表示は、IE も Mozilla も同じなんだけど、
.main { marign-left:21% }
.main { padding-left:21% }
とすると、ご承知のとおり、描画が異なる。どちらが正しいのだか、私にはわからない。
ちなみに、
.main { width:1600px }
としても描画が異なるんだけど、これは IE が間違っていると思う。
827 ：Name_Not_Found：04/04/22 04:45 ID:???
828 ：Name_Not_Found：04/04/22 06:05 ID:???