FIREFOXでのCSS表示

2023/08/08 03:48

このQ&Aのポイント

FIREFOXでのCSS表示に関する効果的なレイアウト方法とハックについて解説します
FIREFOXでのCSS表示についての課題を解決する方法について詳しく説明します
FIREFOXでのCSS表示におけるメニューとメインコンテンツのボリューム調整方法についてまとめました

ベストアンサー

FIREFOXでのCSS表示

2008/09/01 21:05

よろしくお願いします。 CSSのレイアウトで、よくある２カラムのオーソドックなもの左側にメニュー、右側にメインコンテンツ、上下にヘッダ・フッタ <div id="wall"> <div id="header"></div> <div id="menu"></div> <div id="main"></div> <div id="footer"></div> </div> のような構造の場合、メインコンテンツは各ページによってボリュームが違うので、wall部分もmainのボリュームにあわせて変化させたいです。 IEならば問題ないのですが、FIREFOXだとmenuやmainの部分が増えると、wallの上から重なるように表示されてしまうケースがありました。はみ出ています。このような場合、それぞれのheightの設定など、どのようにしたら良いのでしょうか？　mainの長さにあわせて最後にwallを1250pxのように具体的な長さ指定すると、見た目にはfirefoxでもうまく表示はされています（ただし、このやり方だと各ページのコンテンツの長さにあわせて、１つ１つ設定しないといけない） floatの設定なども含めて、どういった記述をすれば良いのか、どなたか教えてもらえませんでしょうか。

yipinhong
お礼率53% (43/80)

ホームページ作成ソフト
回答数1
ありがとう数0

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

monzenkozo
ベストアンサー率37% (29/78)

2008/09/01 22:12 回答No.1

こちらを参考に......。 http://www.geocities.jp/multi_column/

関連するQ&A

FirefoxだとCSSで作ったフッターが崩れてしまいます
お世話になります。現在、CSSにて2段組にてヘッダー・メニュー・コンテンツ・フッター部分にレイアウトを切り分けてサイトを作っておりますが IEだと私が意図した通りに表示されるのですが、FireFoxだとフッター部分のレイアウトが、コンテンツ部分にかぶってしまいレイアウトがぐちゃぐちゃになってしまいます。 #cover { width: 700px; height: 100% } #menu { width: 150px; height: 100%; float: left } #main { width: 550px; height: 100%; float: right } #footer { width: 700px; clear: both } こちらが、htmlです。 <div id="cover"> <div id="main">コンテンツ</div> <div id="menu">メニュー</div> <csobj csref="a.html" h="259" occur="27" t="Component" w="700"> <div id="footer">フッター</csobj></div> </div> ※このcsobjは、Goliveのコンポーネント機能を使って１つの外部ファイルからリンクさせることによって、ヘッダー部分に変更が生じたら、全ページを一括で更新できる機能を使っています。SSI(サーバーサイドインクルード)みたいなやつでしょうか。とても困っていますので、詳しい方ぜひご教授ください。よろしくお願いいたします。
- ベストアンサー
- HTML
CSSで「float: left;」の次にフッタをうまく表示させるには？
http://okwave.jp/qa5450892.html にて、CSSの段組に関する疑問が無事に解決されました。が、実はもう一つ、新たに表示に際して困ったことが起きています。現在のデザインは、<div id="menu">の右側に<div id="contents">を表示させるようになっておりまして、メニューブロック及びコンテンツブロックは、コンテンツブロックの表示法をもう少し改良するくらいで大丈夫な段階まできました。さて。このページに、新たにフッタを追加したいと考え、<div id="contents">の下に、幅100%のフッタを、<div id="head">のような感じでつけてみたいと考えているのですが、実際にそのようにしてみようとしたところ、 <div id="contents">のさらに右側にfooterが表示されるようになります。この状態を、コンテンツブロックそのものに<br>が入るような感じでフッタを表示させようとする場合、スタイルシートでは、どのように記せばいいのでしょうか。もちろん、フッタを排除してヘッダ部分にいろいろと書いておくのが簡単な方法ではあるのですが。ご指導、よろしくお願いします。
- 締切済み
- HTML
CSS : IEとFirefoxの表示差異を改善したい
grandswellと申します。よろしくお願いいたします。サンプルをIE、Firefoxそれぞれで見ていただけるとわかっていただけると思うのですが、Firefox側が意図した通りのレイアウトになっていません。サンプルをIEで表示したレイアウトを Firefoxでも同じCSSで実現するにはどのような工夫が必要でしょうか。ぜひご教示くださいますよう、お願いいたします。以下、サンプルのCSSとHTMLとなります。 *cssサンプル(style2.css) ---------- div.main { border-style : dashed; width : 100%; } div.main div.contents{ border-style : dashed; width : 75%; float : left; } div.contents div.contentsmain{ border-style : dashed; width : 100%; } div.contentsmain div.sidebar{ border-style : solid; float : left; width : 32%; } div.contentsmain div.entry{ border-style : solid; float : right; width : 66%; } div.main div.subspace { border-style : dashed; float : right; width : 23%; } div.footer { border-style : dashed; } ---------- *htmlサンプル ---------- <html> <head> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="./style2.css" type="text/css"> </head> <body> <div class="main"> <p>main</p> <div class="contents"> <p>contents</p> <div class="contentsmain"> <p>contentsmain</p> <div class="sidebar"> <p>sidebar</p> </div> <div class="entry"> <p>entry</p> </div> </div> </div> <div class="subspace"> <p>subspace</p> </div> </div> <div class="footer"> <p>footer</p> </div> <body> </html> ----------
- ベストアンサー
- CSS
perlで3カラムにしたい (css)
perlでcgiのアンケートのページを作っていますが、ページの最上部をヘッダー、ページの両端にメニューや広告、中央にコンテンツを配置する3カラム（三段組み）、最下部をフッターにしたいと考えています。ページ幅 755pxでセンタリング、両端のメニュー、コンテンツともに幅固定で、以下のようなcssファイルを作りましたが、cgiのページを見ると、cssファイルの設定がうまく反映されません。どうすれば良いのか、ぜひ御指導、アドバイス頂けると助かります。ｍ（＿　＿）ｍ当方初心者のため、もし以下のcssファイルの書き方に間違えがありましたら、ご指摘ください。よろしくお願い致します。 ----------------------------- <HTML> <BODY> <div id="wrapper"> <div id="header"> ヘッダー部分 </div> <div id="main"> <div id="menu"> メニュー部分 </div> <div id="contents"> コンテンツ部分 </div> <div id="affiriate"> アフィリエイト部分 </div> </div> <div id="footer"> フッター部分 </div> * { margin: 0; padding: 0; } #wrapper { width: 755px; margin: 0 auto; /* 幅固定（755px）でセンタリングします。*/ } #header { width: 755px; height: 50px; } #main { width: 755px; /* 両端ブロックとコンテンツを囲んでいるセレクタです。*/ } #menu { float: left; width: 150px; /* floatに、width 指定は必須です。*/ } #contents { float: left; width: 505px; #affiliate { float: left; width: 150px; } #footer { clear: both; /* float をクリアしています。*/ width: 755px; height: 50px; } #menu ul { list-style: none; } </div> </BODY> </HTML>
- ベストアンサー
- CSS
CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。しかし書いたCSSの設定が正確に反映されません。 headerとfooterもこの大きさで広げたいと思うのですが、広がりません。また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。背景を赤に設定しているのですが、それも反映されません。なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。どうかよろしくお願いします。以下、2つのファイルは同じフォルダに保存しました。 dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。 style.css ---------------------------------------------------------- @charset "utf-8"; /* CSS Document */  body { background-color: red; }  #wrapper, #main, #header, #menu, #footer { width:1120px; }  #header, #menu, #contents, #footer { background-color: #66FFFF; border:2px solid #999; padding: 8px; margin-bottom:5px; -webkit-border-radius: 5px; /* Safari,Google Chrome用 */ -moz-border-radius: 5px; /* Firefox用 */ }  #wrapper { margin: 0 auto; line-height: 1.5; } #main { } #header { height: 50px; } #menu { width: 160px; float: left; } #menu ul { list-style: none; margin-left: 1em; } #contents { float: right; width: 900px; } #footer { clear: both; height: 50px; text-align: center; } --> ------------------------------------------------------------------------------------ index.html ------------------------------------------------------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"><head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>勉強用</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="wrapper"> <div id="header"> <h1>Site Title</h1> </div> <div id="main"> <div id="menu"> <p><strong>float:left</strong></p> <ul> <li>Menu</li> <li>Menu</li> </ul> </div> <div id="contents"> <h2>Sub Title</h2> <p><strong>float:left</strong></p> <h2>Sub Title</h2> <p>text</p> </div> </div> <div id="footer"> <p>Footer</p> </div> </div> </body> </html>
- 締切済み
- CSS
CSSで微妙にずれる
CSSで微妙にずれるこんにちは、最近HPを作成するようになった初心者です。あるフリーサイトのCSSを雛形としてHPを作成したのですが、（TOPとMENUとMAIN（コンテンツ）とFOOTERの４構成 MENUは左でMAINが右）ブラウザの枠の中にFOOTER部分が表示されると（上下に短いコンテンツ）微妙に左（多分３PXぐらい）に、ずれて表示されてしまいます。この様な、場合原因の部位を特定するには、どの様なアプローチを行えばよろしいのでしょうか？教えていただけるとありがたいです。ちなみに、FOOTERのHTMLは <div id="footer"> <address>Copyright © 2010 XXXXX All Rights Reserved.</address> </div> で、 CSSは div#footer { clear:both; margin:0 20px 0 20px; } です
- 締切済み
- HTML
CSSに関して教えてください。
CSSで左列がサイドバーで右列がメインコンテンツの二段組レイアウトについて質問します。 ●要点サイドバーには背景色が指定してあり、サイド、メインとも高さが可変(指定なし)とします。メインコンテンツの高さの変動に応じてサイドバーの高さも変化してサイドバーの背景色とメインコンテンツの高さが同じになるように変化させたいのです。 ---------- CSSソース ---------- body { text-align: center } #wrapper { width: 720px; margin: 0 auto; text-align: left; } #content { width: 720px; background: url("../img/content.gif") repeat-y; } #main { float: right; width: 540px; } #sidebar{ float: left; width: 180px; background: blue; } ---------- HTML ---------- <body> <div id="wrapper"> <div id="content"> <div id="main"> ・・・・・・・・・ </div> <div id="sidebar"> ・・・・・・・・・ </div> </div> </div> </body> CSSでcontentに背景画像(サイドバーの幅が青色の画像)を指定してrepeat-yとするとIE6ではメインコンテンツの高さに合せてcontentに指定した画像が繰り返されサイドバーの色がメインコンテンツの高さと揃います。Firefoxでは、メインコンテンツがサイドバーより高くなると揃わなくなります。contentに指定された画像が表示されてないようです。どのようなことでもいいのでお教えください。手がかりがなく困っています。
- ベストアンサー
- HTML
ＣＳＳについて、ＯＳによる見え方の違いについて質問です。
すみません、一つどうしても分からず質問です。ＣＳＳを使いサイトのページを作っています。背景画像の関係上、横に３つ（header・main・footer）に割って設定してるのですが、これのmainの部分、各divとも確実な高さは決まっていないので、高さは設定していないのですが、この方法でやると、ファイアーフォックスで背景画像が表示できません。フィアーフォックスとIE7.0はほぼ同じように見えるので、恐らくIE7.0にも見えてないと思います。（IE6.0は見えます） ↓こんな感じです <div id="main_haikei">　←width 100% ここに背景画像を設定しています <div id="main">　　←width 920 px <div id="hidari">　　　←左側コンテンツ　<div id="hidari_1">…</div> 　<div id="hidari_2">…</div> 　</div> <div id="mannnaka">　　←真中コンテンツ　<div id="mannnaka_1">…</div> 　<div id="mannnaka_2">…</div> 　</div> <div id="migi>　　　　　←右側コンテンツ　<div id="migi_1">…</div> 　<div id="migi_2">…</div> 　</div> </div> </div> これはどうして表示できないのでしょうか？上手い設定の仕方など教えて頂ければ助かります…。ちなみにhidari.mannnaka.migiはboth設定がしてあります。
- 締切済み
- CSS
XHTML+CSSサイトで＜div＞の順序変更によるレイアウト崩壊
よろしくお願いいたします。コンテンツ部分をmain、右側に帯をつくりsubとして２カラム（他ヘッダとフッタもあります）のサイトです。 XHTMLでdiv id="sub"部分を先に記述してしまったので、div id="main"部分と上下を入れ替えたところ、表示が大きく崩れてしまいました。CSSのfloatで左右指定の確認もしましたが、解決しません。 CSSについては初心者ですので、なにか重大なことを見落としているのかもしれません。教えていただけると助かります。どうぞよろしくお願いいたします..
- ベストアンサー
- CSS
フルCSSでFirefoxでデザインが崩れてしまいます。
フルcssHPに挑戦しようと思っています。 cssでIEでは思ったような表示が可能ですが Firefox、Operaでは「contents」内のコンテンツが「container」>を突き抜けて表示されてしまいます。下記がhtml、cssソースになります。【HTML】 <body> <div id="container">  <div id="contents"> <div id="subnavi"> <ul> <li>サブナビ1</li> <li>サブナビ2</li> <li>サブナビ3</li> <li>サブナビ4</li> </ul> </div> <div id="main"> メインコンテンツが入ります </div> </div>  </div> </body> メインナビ、フッターアンカーリンクは文字数制限上削除しています。【CSS】 body{ text-align:center; background-color:#ffffff; font-size:10px; color:#333333; } body div { text-align:left; margin: 0 auto; } #container{ text-align:left; width:724px; background-color:#ffffff; padding:15px 18px; position: relative; border:1px solid #666; } #contents{ width:724px; background-color:#ffffff; text-align:left; border-bottom:8px solid #666666; margin-bottom:10px; position: relative; clear:both; } #subnavi{ float:left; width:200px; } #main{ float:left; width:495px; padding-left:29px; } この突き抜けを防止するにはどうしたらよろしいのでしょうか。「contents」を削除して表示するとどのブラウザでも表示が可能ですので <div id="contents">の記述が何かおかしいのでしょうか。それとも根本的にブラウザの問題なのでしょうか？ (ブラウザは最新版を使っています) 皆様、よろしくご回答お願いいたします。
- ベストアンサー
- CSS