再度質問します。IEのための、ホームページ作りに、ついて、ただいま初心

質問

再度質問します。IEのための、ホームページ作りに、ついて、ただいま初心者ながら、ノートパソコンで、苦心してます。今のＰＣは、横長モニターなので、スクエアぽいモニターで、見ると、段組が崩れて、floa-leftが、うまく作動せず、次のboxが、右じゃなくて下に、くっついてしまいます。参考書（すこししか書いてない）には、margin-right auto（height=autoにするもの）, margin-left autoやpositionで、やるように書いてあって、やってみました、なんとか、marginの方は、うまく回りましたが（原理はわかりませんが）、段組が何個もつながる、３列２行のものなどは、できなかったので、positionでやろうと、試みたんですが、まったくうまくできません。よいやり方があれば、おおしえください。うまく説明が載ってるＵＲＬがあれば、教えてください。前回の質問は、以下です。
http://okwave.jp/qa/q6005238.html

回答No.1

noname#119957 · ベストアンサー

段組の基本はＦＬＯＡＴでできます。
単純にやりましょう。
wpapper内のＨＴＭＬ要素のＣＳＳの値 float とclearを組み合わせます。

■３列なら

wrapper
flo-left flo-lett flo-right
clear-both
/wrapper

■２列なら
wrapper
flo-left flo-right
clear-both
/wrapper

でwrapper内でうまくいきます。

clear-bothのＨＴＭＬを何か入れてみてください。

この場合、margin-autoは意味がありません。
全部、幅を指定してください。

ＣＳＳの基本は、先頭に
* {
margin:0;
padding:0;
}
をいれて、ブラウザごとにことなる値をリセットすることから始めましょう。
そうでないと、ブラウザによって表示が同じになりません。

お礼

回答ありがとうございました。wrapperで、なんとか、できました。

回答No.2

ORUKA1951

＞IEのための、ホームページ作りに
　現在使用されているブラウザは、パソコンだけでなく携帯端末まで含めると実にさまざまで、特定のバージョンのIEや決められたウィンドウ幅だけへの対処の方法は私にはわかりません。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
1　IE6　　　　　 20.99%　↓
2　IE8　　　　 　20.86%　↑
3　Firefox　3.5　16.32%　↑
4　IE7　　　　　 15.53%　↓
5　Firefox　3.0　 6.91%　↓
6　Chrome　3.0　　3.75%　↑
7　Safari　4.0　　3.45%　↑
8　IE8互換モード　2.80%　↑
9　Opera　10.x　　1.58%　↑
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで
［12月のブラウザシェア(　http://journal.mycom.co.jp/news/2010/01/05/004/index.html　)］より

　ウェブ開発をされていれば、当然ご存じだと思いますが、ブラウザ、ウィンドウ幅、ユーザー側のフォントサイズの指定に依存せずに情報が伝わるようにするのが基本というか、そのための書式がHTMLです。
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
HTMLは、どんな環境からもWebの情報を利用できるようにすべきだという方針の下に開発されている。例えば、様々な解像度や色深度のグラフィックディスプレイを持つPCや、携帯電話、モバイル機器、音声入出力機器、帯域が広いコンピュータや狭いコンピュータ、等の環境である。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［2.2.1 HTMLの略歴(ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.2.1 )］より

＞IEのための、ホームページ作りに
　ではありませんが、
^^^^^^^^^^^^^^^^
　スクリーン端末(パソコンのディスプレイなど@media screen{})を考えれば、
・２行の横並びリスト
・ウィンド幅変更/フォントサイズ変更
・古いIEのブロックの内寸解釈のバグへの対策
　だと、border:0pxのブロック内に%幅で指定してfloatさせるか、フォント追随幅の固定ブロック内でfloatさせるかの２方法になります。
　HTMLのマークアップが
<ul class="nav">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ul>
<ul class="siteMap">
　<li><a href=""></a></li>
　<li><a href=""></a></li>
　<li><a href=""></a></li>
</ul>
　だとしたら、それぞれのulをブロックに変更して、その内部でfloatさせることになるでしょう。

テストは、ウィンドウ幅やフォントサイズを変更しても可能な限りデザインが崩れることなく、情報が伝わるかをチェックします。
★やむを得ず一行に収まらなければ２行になるのは、決して悪いことではない!!!HTMLの優れたところ
　↑これを理解してないとHTMLを扱う資格はないぐらい重要なことです。

お礼

回答ありがとうございました。なかなか難しいですね。