左にナビゲーション、右にコンテンツ(幅はウインドに合わせる)をレイアウトしたいので、以下のようにCSSを定義しました。
ナビゲーション{float:left;位置:相対的;幅:180px位;高さ:自動}
コンテンツ{float:right;位置:相対的;マージン左少々;幅:定義せず;高さ:自動}
それと、HTMLの順序はナビゲーションが先(上)でコンテンツがその下です。
そうすると、IEでは意図したとおりに表示されるのですが、NNやOperaだとコンテンツがナビゲーションの下に来てしまいます。(正確にはコンテンツの幅が、その中の一番長い段落(又は画像)以下になったときにそうなる)
コンテンツの位置を「絶対的」に定義すれば問題ないのですが、出来ればそうせずにNNやOperaで意図どおりに表示する方法はありますか?
No.6ベストアンサー
- 回答日時:
ネガティブマージンという手法があります。
実際私で成功していないので、うまく説明できないのですが、floatを使うときの常套手段みたいです。
http://adp.daa.jp/archives/000399.html
皆さん、色々とアドバイスありがとうございます。
質問を締め切ってポイント発行すると言うシステムらしいですが、光明が見えるまでもう少しお待ち下さい。
さて、紹介いただいたHPを読むと、下記のような方法を推奨していますね。
「たとえば、メニューが左(200px)、本文が右(残り)で、メニューを先にfloat:leftさせる場合(HTMLのソースでメニュー部が先にある場合)は、メニューのwidthに200px、margin-rightに-200pxを指定する。そして、本文をfloat:leftし、widthを100%にする。」
この通りにやると、メニューと本文の間に文字通り200PXのスペースが出来てしまうので(書き間違いかな?)20PX位にしました。
そうすると、本文がメニューの下に回りこんでしまいそうですが、不思議な事にIEでは上手くいきますね。
しかし、他のブラウザだと「ちゃんと」下に回りこんでしまいます。
どうも、人の言うとおりにならないのは、私の設定が何処か別のところでおかしいのかな?
No.7
- 回答日時:
正直自分で出来ていないものを人に勧めるのってどうなんだろう?と思いはしたのですが、投げてしまいました。
もう一つ解説ページをのっけときます。
参考URL:http://web.archive.org/web/20041010170530/http:/ …
この回答への補足
ネガティブマージン、成功しました!
コンテンツに左マージン(ポジティブ)を付ける方法との違いを示すサンプルページを作ってみました。ここから入ってください。
http://home.att.ne.jp/aqua/ada-t1626/WEB/2column …
しかし私見としては、まともなレイアウトのために、余計な<div>で入れ子状態にしなきゃいけないと言うのは納得いきませんね。
何故IEだけ普通に左マージンじゃダメなんでしょう?ブラウザのバグなんでしょうか。
このHPも前回のモノと内容は同じだと思いますが、やっと私は自分の見落としに気付きました。
コンテンツ要素に「マイナス」の左マージン(この場合:-200px)を設定するんですね。ようやくネガティブマージンの意味が判りました。
そうすると当然メニューとコンテンツが重なってしまうので、コンテンツの中に子要素を作って、それの左マージンを200pxとする訳ですね。
何だか奇怪な感じですが、原理としては判りますので、今から試してみます。
No.5
- 回答日時:
No.4
- 回答日時:
このサイトをざっと見ただけですが、「2column...」の事例を見ると、本文やメニューの幅を%で指定する方法ですね。
これだと基本的にはOKなんですが、下の投降にある「メニュー幅の分だけ本文の左にマージンを開ける」方法と同じ症状が出ます。
であれば、この「メニュー幅の分だけ本文の左にマージンを開ける」が一番シンプルで的確な気がしますが、この方法でやっていて一つ気付いた事があります。
IEの場合、本文の中で横にメニューがある高さまでの段落と、それより下の段落では、下の段落の方がわずかに左に寄っています。
文章だと判りにくいかもしれませんが、ようはメニューのブロックが本文を少し右に押している感じです。
本文の左マージンはメニューの幅より広く取っているのにです。
そこで思ったのですが、私が問題にしている症状:「ウインドの幅を縮めて、本文の中の画像(又は指定した本文の幅)が入りきらなくなると、メニューの下に落ちる」の原因は、「メニューの下のエリアがわずかに広い」と言うIEの解釈(?)によって、収まりきらなくなった画像が「より広い」スペースに逃げるからでは無いでしょうか?
No.3
- 回答日時:
こんばんわ!
ナビゲーション{float:left;位置:相対的;幅:180px位;高さ:自動}
コンテンツ{マージン左180px位;}
ナビゲーションの幅の分だけ左マージンあけてみてください
私はこの方法でfirefox,opera,ieでちゃんと段組できています
コンテンツはfloatを指定せず、マージンだけ空ければ私はうまくいってますけど
こんばんは。
下に書いたのですが、仰る方法だと万事OKと思いきや、IEで問題が発生するんですよ。
画像が入ってる場合だけじゃなく、コンテンツの幅を指定して、ウインドを縮めてその幅が入りきらなくなると下に落ちてしまうのです。
「それじゃ、左マージン180pxになってないだろ!」と突っ込みを入れたくなります。
極ありふれたレイアウトなのに、何故上手くいく方法が見つからないのでしょうね。
No.2
- 回答日時:
floatは文字の回りこみが起きますので、
コンテンツが文字だけならばはfloatを使わない方がイイと思います。
この回答への補足
コンテンツは文字だけではなく、ページによっては大き目の画像もあります。
コンテンツにfloat:右を使うと、逆に文字の場合はOKなんですが、画像が右によってしまうのが難点ですね。
(ちなみに、左のナビにfloat:左を使わないと、コンテンツが最初からナビの下に入ってしまいませんか?)
そこで、コンテンツのfloatを止めて、その代わりに位置を絶対とも相対とも書かずに、”左マージン:ナビの幅”と指定すると上手くいきました。
しかし!そうすると今度はIEで新たな問題が発生しました。
コンテンツが画像の幅以下になると、ナビの下に行ってしまうのでした。(NNとオペラでは、ちゃんと横のスクロールバーが出てきます)”clear:right”と定義してもです。
何だか、問題がどんどん展開してしまってすみません。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Excel(エクセル) 【エクセルマクロ】既に開いているIEの、サイズや表示位置を変更するには 4 2022/12/01 22:57
- ホームページ作成・プログラミング ホームページ作成について。「ワードプレスではありません」。 3 2023/08/13 14:44
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- インターネット広告・アフィリエイト Googleアドセンスの審査がなかなか通りません。 テーマは「美容と健康」について。 不合格の理由は 5 2022/09/26 18:24
- Visual Basic(VBA) エクセルマクロでアニメを作る方法を教えてください。 1 2023/02/07 14:27
- 運転免許・教習所 バック駐車を一発で真ん中に停めることができません 5 2022/05/10 13:05
- 政治 私の発明した「二階建て漢字」は使えるでしょうか? 3 2023/02/08 16:40
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
<th>タグを使っても太字にしな...
-
テーブルとテーブルの間隔について
-
CSSで特定のテーブルだけに...
-
HTMLのテーブルをExcelにCopy&P...
-
textareaの外側の文字が下付き...
-
HTML5で、テーブル内tdタグの高...
-
table 幅固定で、端までいった...
-
同じ幅指定のつもりなのに、ブ...
-
▲▲HTML・CSS TABLEから文字が...
-
html5のテーブル内でdivのタブ...
-
スタイルシートで左側だけ色を...
-
正規表現で「より前」と「より後」
-
テーブル内の文字をイタリック...
-
テーブル内のセル間にスペース...
-
<fieldset>タグについて
-
ラインを端から端まで画面いっ...
-
テーブルタグの中にdivを含めて...
-
TRタグの余白をcssで設定するには
-
tableタグとformタグの組み合わせ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
TABLEのセルの中の文字を行単位...
-
テーブルとテーブルの間隔について
-
<th>タグを使っても太字にしな...
-
CSSで特定のテーブルだけに...
-
HTML5で、テーブル内tdタグの高...
-
HTML tableのセルにtextareaを...
-
テーブル内のセル間にスペース...
-
画面幅に合わせてテーブルのカ...
-
同じ幅指定のつもりなのに、ブ...
-
table表を横に並べる際の間隔指定
-
(HTML)Tableを任意の位置に置...
-
正規表現で「より前」と「より後」
-
CSS スタイルを子要素の子要素...
-
tableの位置がIEとその他ブラウ...
-
<fieldset>タグについて
-
<table>のclass指定が継承されない
-
html5のテーブル内でdivのタブ...
-
HTMLのテーブルをExcelにCopy&P...
-
テーブルデータを折り返して表...
-
tableのcellpadding="0" cellsp...
おすすめ情報