- ベストアンサー
マージンの基点について
以下のような記述にてFirefox、Chromeですと"footer_contents"にマージンを指定しても うまく反映されません。 "footer"を基点としてマージンが適応されるものと考えておるのですが実際はその上の"maincontents_end"もしくは"header"の下部からマージンが適応されてしまっています。IE7ではこのようなことは起こりません。 どなたかご教授いただければ幸いです。 もし足りない情報がある場合、言っていただければ可能な限りお出しします。 ※sidebarとmaincontentsは特殊な枠を使いたいためこのような記述の仕方しています。ややセオリーに反した記述かとも思います。 <body> <div id="header"> <div id="topcontainer"></div> <div id="menu" ></div> <div id="container"> <div id="sidebar_top"> <div id="sidebar_contents"> </div> <div id="sidebar_end"></div> </div> <div id="maincontents_top"></div> <div id="maincontents"></div> <div id="maincontents_end"></div> <!-- end #container --></div> <!-- end #header --></div> <div id="footerbg"> <div id="footer"> <div id="footer_contents"> </div></div></div> <div id="endfooter"></div> </body>
- Rialai
- お礼率78% (11/14)
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
マージンの相殺が生じているのだと思います。詳細は下記などを参考にしてみて下さい。 【参考】http://adp.daa.jp/archives/000574.html 今回の場合だと、#footer_contentsのmargin-top: 85px;が、親（#footer）の親である#footerbgに遡って適用されている事になります。 どういう条件でその現象が起きるかという事も回避方法も上記で細かく検証されているので、そちらをご覧になればおわかりになると思いますが、子要素のボックスにmargin-topを指定するのではなく、親要素のボックスにpadding-topを指定できれば一番手っ取り早いです。ただ、デザイン上それが出来ない場合もあるかもしれません。 （CSSとHTMLのソースを見た感じだと、おそらく質問者様は主なコンテナブロックの上下に、背景にGIF画像を横方向にレンダリングして区切りラインの様なレイアウトを目指しておられるのですよね。フッター部分の画像の内、footerbg_2.pngとendfooterbg_1.pngはその様なライン的使い方だと思いますが、footerbg_2.pngとfooterbg_1.pngに関しては実際の画像がどういったもの（縦横サイズ）なのか想像できかねるので、それによって回避方法が異なってくる可能性もあるかも…） デザイン上、支障がないのであれば、#footer_contentsのmargin-top: 85px;を削除し、親の#footerにpadding-top: 85px;を与えれば良いことになります。 ただし、#footer_contentsにはheightが指定されているので、標準準拠モードの場合は、hegihtの値はpadding-top分を引いておかなかればなりません。 416px－85px＝331px、で、height: 331px;となります。 以下、その変更を加えたフッター部分のCSSです。backgroundやmarginプロパティは一括指定でまとめました。あと、不要（ディフォルト値など）と思われる指定も削除してあります。 --------------------------------------------------------------------- #footerbg { clear: both; margin: 0;←※左右マージンをautoにする必要なし background: url(footerbg_2.png) repeat-x #D5FCB5; } #footer { width: 760px; height: 331px; margin: 0 auto; background: url(footerbg_1.png) no-repeat; padding-top: 85px;←※追加 } #footer_contents { width: 754px; height: 174px; background: url(footercontents_1.png) no-repeat; margin: 0 auto;←※margin-topの値を0に } #footer_contents p { text-align: center; margin: 0; padding: 10px 30px; font-size: 75%; } #endfooter { height: 53px; margin: 0; background: url(endfooterbg_1.png) repeat-x #D5FCB5; } --------------------------------------------------------------------- ちなみに、上記の検証は、IE・Firefox等問わず標準準拠モードになるHTML4.01 Strictにて検証したものです。 IE6/7、Firefox2/3、Safari3、Opera9.61、Google Chrome1、にて同様の表示結果を得ております。 不具合や検証条件の違い等ありましたら補足して下さい。 ※ちなみに、背景画像をレンダリングするためだけの空のボックスを置くのはお奨めできません（何も内容がないマークアップになってしまうからです）。できればマークアップやCSSを工夫するなどして、内容のあるコンテナに背景画像を振り分ける様にした方が良いと思います。
その他の回答 (1)
- hirai2008
- ベストアンサー率56% (22/39)
IE7では意図したものが表示されるのに、 Firefox,Chromeでは意図したものと違う、ということですが、 正確には、CSSにおいてバグが多いのがIE側です。 多分、IE6で見たらもっとヒドイことになってるかもです…。 Firefoxに合わせて作って、IE各バージョンでのズレをCSSハックなどで修正する、という方法のが良いと思います。 前置きはさておき、本題の件ですが レイアウトボックスに、width、border、paddingを同時に指定していませんか？ IEはwidthの定義にバグがあるので、同時に指定しない方がいいです。 こちらのサイトが参考になると思います。 http://www.web-mame.net/css_layout/beginner3.html 結論だけを抜粋すると下記３つがポイント ・width と border, padding を同時指定しない ・width と margin は同時に指定しても大丈夫 ・width を指定しないのならば、 margin, padding, border を同時に指定しても大丈夫 他にもDOCTYPE スイッチでバグを抑えたり…って方法もありますが、 ややこしいので上記の方法で試してみてください。
お礼
わざわざご回答ありがとうございました。 IE6、IE7にFirefox（Chrome）とそれぞれCSSの動作が微妙に違っていてCSSって何なんだろ？って思うときがあります。 便利にするために使うものが私の質問もそうですが、逆に手間が掛かってしまったりしています。少なくともIE6はWindowsの強制アップデートとかでなくなってほしいです（^^；） ご紹介いただきましたWEB作成の豆知識参考にさせていただきます。 また質問させていただくときはよろしくお願いします。この度はどうもありがとうございました（^^）
補足
早速ご回答いただきましてありがとうございました。 ご紹介いただきましたHPにて勉強させていただきましてCSS調整してみようかと思います。 その前に後出しでスミマセンがCSSの方をお出しします。 もしこれで原因わかりましたらお教えいただけたらとありがたいです。 何卒、よろしくお願い致します。 #header { width: 760px; / text-align: center; background-image: url(background_top.png); background-repeat: repeat-x; margin: auto; padding: 0px; } #menu{ width: 760px; background-color: #D5FCB5; margin: 0 auto; } #container { width: 760px; text-align: center; } #sidebar_top { width: 120px; height: 10px; float: left; margin-top: 10px; background-image: url(sidebarbg_5.gif); background-repeat: no-repeat; background-color: #FFFFFF; } #sidebar_contents { width: 120px; float: left; margin-top: 10px; background-image: url(sidebarbg_6.gif); background-repeat: repeat-y; } #sidebar_end { width: 120px; height: 10px; float: left; background-image: url(sidebarbg_7.gif); background-repeat: no-repeat; } #maincontents_top { width: 620px; height: 10px; float: right; background-image: url(maincontentsbg_6.gif); background-repeat: no-repeat; margin-top: 10px; margin-right: 5px; margin-left: 5px; } #maincontents { width: 620px; float: right; background-image: url(maincontentsbg_5.gif); background-repeat: repeat-y; margin-right: 5px; margin-left: 5px; } #maincontents_end{ width: 620px; height: 10px; float: right; background-image: url(maincontentsbg_4.gif); margin-right: 5px; margin-left: 5px; } #footerbg { height: 416px; clear: both; margin: 0 auto; background-image: url(footerbg_2.png); background-color: #D5FCB5; background-repeat: repeat-x; } #footer { width: 760px; height: 416px; margin: 0 auto; background-image: url(footerbg_1.png); background-repeat: no-repeat; } #footer_contents { width: 754px; height: 174px; background-image: url(footercontents_1.png); background-repeat: no-repeat; margin-top: 85px; margin-right: auto; margin-left: auto; } #footer_contents p { margin: auto; text-align: center; padding: 10px 30px; font-size: 75%; } #endfooter { height: 53px; margin: 0 auto; background-image: url(endfooterbg_1.png); background-repeat: repeat-x; background-color: #D5FCB5; }
関連するQ&A
- フロートをした場合の縦方向のマージンの指定方法
下記のソースをIEとFFで表示した場合に違いが出てしまいます。 希望はheader、container、footerの間を１０ｐｘずつにしたいです。 http://www.geocities.jp/multi_column/float/06.html こちらのページに「clear したボックスには margin-top は指定しないこと」とあるので、content、sidebarの下マージンを１０ｐｘにしてみました。 IEではsidebarの下マージンが表示されません。 なぜかsidebarよりcontentが長くなるとcontentの下にマージン１０ｐｘが表示されます。 contentとsidebarのどちらが長くなっても同じように表示させるにはどのような方法がありますか？ また、この現象の原因を教えてください。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http equiv="Content-Style-Type" content="text/css" /> <title>サンプル</title> </head> <body> <div id="header"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="container"> <div id="content"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> <div id="sidebar"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </div> <div id="footer"> <p>サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル</p> </div> </body> </html> <style> *{ margin: 0; padding: 0; } body{ text-align: center; } div#header{ width: 900px; margin-left: auto; margin-right: auto; margin-bottom: 10px; background-color: #FFCCCC; } div#container{ width: 900px; margin-left: auto; margin-right: auto; } div#content{ float: right; width: 660px; background-color: #FFCCCC; margin-bottom: 10px; } div#sidebar{ float: left; width: 230px; background-color: #FFCCCC; margin-bottom: 10px; } div#footer{ clear: both; width: 900px; margin-left: auto; margin-right: auto; background-color: #FFCCCC; } </style> 長くなって申し訳ありません。よろしくお願い致します。
- ベストアンサー
- HTML
- 2カラムのレイアウト
2カラムのレイアウトにおいて、HTMLの記述部分において。 【例1】コンテナーの「★外」に、フッターがある場合と。 ・「コンテナー(コンテンツ+サイドバー)」 ・「フッター」 【例2】コンテナーの「★中」に、フッターがある場合。 ・「コンテナー(コンテンツ+サイドバー+フッター)」 があるように思いますが? ★どっちでもいいんでしょうか? (どっちも、同じレイアウトになるんでしょうか? そんな感じがします。) ^^ HTML/CSS 初心者なもので。。。よろしくです。 ^^ ---------------------------------------------------------------- 【例1】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> </div> <!--container部分終わり--> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> 【例2】 <div id="container"> <div id="contents"> 本文 </div> <div id="sidebar"> サイド部分 </div> <div id="footer"> <p>著作権</p> </div> <!--footer部分終わり--> </div> <!--container部分終わり-->
- ベストアンサー
- HTML
- Dreamweaverのh1についておしえてください
Dreamweaverのh1についておしえてください。 Dreamweaverの付属のテンプレートを見たら、ヘッダーにh1を使い、コンテンツにもh1が使用されているのですが、h1は1ページ1回と認識していたのですが、ヘッダーとコンテンツなら大丈夫なのでしょうか？ CSSは、下記のようになっています。 <body class="thrColHybHdr"> <div id="container"> <div id="header"> <h1>見出し</h1> <!-- end #header --></div> <div id="sidebar1"> <h3>sidebar1 コンテンツ</h3> <p>省略。 </p> <p>省略 </p> <!-- end #sidebar1 --></div> <div id="sidebar2"> <h3>sidebar2 コンテンツ</h3> <p>省略 </p> <p>省略 </p> <!-- end #sidebar2 --></div> <div id="mainContent"> <h1> メインコンテンツ </h1> <p>省略 </p> <p>省略 </p> <h2>H2 レベルの見出し </h2> よろしくご指導お願いします。
- 締切済み
- ホームページ作成ソフト
- ヘッダーとフッターを画面いっぱいにする方法について
添付画像のようにヘッダー部とフッター部だけを画面いっぱいにしたいと思っています。 HTMLはおおよそ以下のような構成になっています。 CSSでは <div id="container">に対して以下のように記述しています。 --------------------------------------- #container{ width:1000px; margin: 0,auto; } --------------------------------------- HTML内のheaderやfooterを<div>で囲むwrapを作り、それらにwidth: 100%;とCSSに記述してやればうまくいくような事を聞きましたがうまくいきませんでした。 それほど複雑な構成ではないシンプルなタグ構造だと思います。 ヘッダーとフッターの幅を添付画像のように画面いっぱいに広げるにはHTML, CSSにどのような記述をすればいいのでしょうか？ ご存知の方いらっしゃいましたら宜しくお願いします。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>サンプル<title> </head> <body> <div id=container> <header> ヘッダー </header> <nav> </nav> <main> </main> <footer> フッター <footer> </div> </body> </html>
- 締切済み
- HTML
- CSS #containerについて
えっと、CSSについての質問です。 最近勉強をはじめたのですが、 #container を下まで伸ばすのに height: 100%; min-width: 100%; をいれても下まで伸びない現象がおきています。 最初は伸びていたのですが、 ヘッダーとフッターを横に１００％にしてから 様子がおかしくなりました。 減ったーフッターは横に全部伸ばしたくて、 コンテイナーは横は余白つけて下にのばしたいのです＞＜ どなたか原因がわかる方、対処法わかる方 いましたらお願いします＞＜ ------------------------------HTML--- <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" type="text/css" href="index3.css"> </head> <body> <div id="container"> <div id="headerbg"> <div id="header"> <h1>header</h1> </div><!-- header --> </div><!-- headerbg --> <div id="menu"> <ul> <li><a href="">めにゅー１</a></li> <li><a href="">めにゅー２</a></li> <li><a href="">めにゅー３</a></li> <li><a href="">めにゅー４</a></li> <li><a href="">めにゅー５</a></li> <li><a href="">めにゅー６</a></li> </ul> </div> <div id="main"> <div id="contents"> </div><!-- contens --> <div id="sidebar"> </div><!-- sidebar --> </div><!-- main --> <div id="footerbg"> <div id="footer">Footer</div><!-- footer --> </div><!-- footerbg --> </div><!-- container --> </body> </html> -------------------------CSS--- html { background-image: url('hana3.jpg'); background-attachment: fixed; } body { font-family: Verdana, Arial; font-size: 20px; margin: 0px; padding: 0px; } html,body,#main,#container{ height:100%; } #container { height: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #headerbg{ width: 100%; min-width: 100%; background-color: rgba(255,100,0,0.5); } #header { padding: 40px; width: 100%; } #menu { } #menu>ul>li { float: left; } #main { overflow: hidden; } #sidebar { } #footerbg{ background-color: rgba(255,100,0,0.5); width: 100%; min-width: 100%; } #footer { padding: 50px; width: 100%; }
- 締切済み
- CSS
- フッターの上へのマージンがあけれない
この度フルＣＳＳでサイトを作ってFirefoxでブラウザチェックしたのですが、フッターの余白がfirefoxであいていませんでした。 ＩＥ上では上へ２０ｐｘあいているのですが。。。 ページの簡単な内容は下記の通りになります。 Firefoxで「c」のフッターの上部にマージンを調整するにはどうしたらいいのでしょうか？ どなたか教えて頂けたら助かります。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- #a { float: left; width: 200px; background: #0066FF; } #b { float: left; width: 200px; margin-left: 20px; background: #FF0066; } #c { clear: both; width: 500px; margin-top: 20px; background: #CCCCCC; } --> </style> </head> <body> <div id="a">左コンテンツ </div> <div id="b">右コンテンツ</div> <div id="c">フッター</div> </body> </html>
- 締切済み
- CSS
- CSSでの2段組レイアウトでdiv#containerを導入する理由
CSSでの2段組レイアウトでdiv#containerを導入する理由 CSSを使って2段組みレイアウトを構成する場合、次のようにdiv#containerを導入したマークアップをよく目にします。 <body> <div id="container"> <div id="header"> </div> <div id="main"> </div> <div id="menu"> </div> <div id="footer"> </div> </div> </body> また、div#containerを導入せずにbody要素の直下に#header, #mainなどの領域を設けている場合も目にします。 body要素直下ではなく、div#containerを導入するのはどのような理由からなのでしょうか？
- ベストアンサー
- ホームページ作成ソフト
- Firefoxでネガティブマージンが効かない
はじめまして。CSS＋XHTMLでサイトを制作していて行き詰ってしまいました。 IE6,7,Safari3では有効となるネガティブマージンがFirefox3で有効になりません。 テストであげました。 http://www.raki-suta.net/beauty/ フッターの部分にマイナスマージンを指定したのですが、Firefoxだけ効いていないようです。 [html] <div id="footer"> <div id="footer_inner"> <address> Copyright(C) <a href="/">キレカワナビ☆</a> All Rights Reserved. </address> </div> </div> [css] #footer_inner { background: url(../img/top_28.jpg) no-repeat; height: 51px; padding-top: 250px; } #footer { background: url(../img/top_30.jpg) repeat-x 0 178px; height: 301px; text-align: center; clear: both; margin-top: -200px; } 何が悪いのでしょうか。 アドバイスお願いします。
- 締切済み
- HTML
- cssでの高さの調整がうまくいきません
はじめまして。当方css初心者です。 現在DreamWeaver8でCSS+XHTMLでホームページを作成しているのですが、どうもうまくいかないことがあります。よければご意見下さいませ。 以下のソースでmaincontentsに情報を盛り込み、bodyで背景に色をつけてるため、wrapperの背景を白にしてコンテンツ部を白にしたいのですが、maincontentsの情報が少し増えるとwrapperの枠を飛び出してしまいます。wrapperの高さを指定しておけばその範囲では大丈夫なのですが、ページによってmaincontentsの情報量が異なるので「高さ：自動」にすると、contentsの高さまでしか広がってくれません。 各ページの情報量が異なるためwrapperの高さも自動で広がって欲しいのですが、どのようにすればよろしいでしょうか。ソースの間違えあると思います。お手数ですが、よろしくお願い致します。 html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>無題ドキュメント</title> <link href="file:///E|/testweb/css.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wrapper"> <div id="header"> id "header" の内容がここに入ります</div> <div id="contents"> <div id="maincontents"> <p>id "maincontents" の内容がここに入ります</p> </div> <div id="sidenavi"> id "sidenavi" の内容がここに入ります</div> id "contents" の内容がここに入ります</div> id "wrapper" の内容がここに入ります</div> </body> </html> css #wrapper { height: auto; width: 850px; } #header { height: 50px; width: 850px; } #contents { width: 850px; } #contents #maincontents { width: 680px; float: left; } #contents #sidenavi { float: right; width: 90px; }
- ベストアンサー
- HTML
- HTMLのfooterの設定がうまくいきません
HTMLのfooterの設定がうまくいきません 画像のようにleftがrightよりも高さが大きく、 以下のように記述しましたがfooterがうまく ページの最下位に表示されません。 現在は画像の左のような状態で、 右の画像のようにしたいです。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> <div id="container"> <div id="left"></div> <div id="right"></div> </div> <div id="footer"></div> </div> </body> </html> ■CSS #left{float:left;} #right{float:right;} わかる方いらっしゃいましたら 宜しくお願い致します。
- ベストアンサー
- HTML
お礼
ありがとうございます！ 無事"footer_contents"が希望の位置に表示されるようになりました（^^） マージンの相殺については本でよく書かれてあるの記憶にありますがまさか自分のHPがそれに当たっていたとは露程もわかりませんでした（^^；） "footer"の背景画像の空ボックスはセオリーに反しているのは気付いているのですが自作の画像を使いたい場合良い方法がわからず強引にこういう方法取ってしまっています。ここは他の方のスタイルシートなど参考にして良い方法勉強したいと思います。 実はまたこことはまた別の場所で困ったところがありまして、もし解決出来ないときはOKwebで質問させていただこうかと考えております。 その時もよろしければアドバイスいただければと思います。 この度は動作確認などご丁寧にありがとうございました！