締切済み

【CSS】不具合の原因がわかりません。

2007/08/06 12:15

すいません、少しややこしいかもしれませんが・・・。下記のように、「ヘッダ」「コンテンツ」「フッタ」の3つにレイアウトが分かれていて、「コンテンツ」「フッタ」に　clear: both;　float: none;　をかけると不具合なく表示されます（縦に3つ並びます）。ですが、諸事情により「フッタ」部分にcssをかけることが出来なくなりました。（企業によるガイドラインなので詳しくは書けません。すいません・・・。）「フッタ」から　clear: both;　float: none;をはずすとFirefoxではレイアウトがずれてしまいます。float: left　をかけたように「コンテンツ」の右側に「フッタ」が来てしまいます。いちから構築しなおしてはいるのですが、「コンテンツ」部分にmarginやpaddingの値を加えたり（左右ではなく上下でも）、高さを指定したりするだけでずれてしまいます。原因は何が考えられるでしょうか？よろしくお願い致します。ちなみに宣言文は <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> としています。 ////////html//////// <body> <div id="header"> ヘッダ </div> <div id="contents"> コンテンツ </div> <div id="footer"> フッター </div> ////////css//////// #header{ } #contents{ clear: both; float: none; } #footer{ clear: both; float: none; }

kuroro0000
お礼率52% (11/21)

HTML
回答数3
ありがとう数3

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

みんなの回答

air_grow
ベストアンサー率0% (0/2)

2007/08/07 12:55 回答No.3

#No2のものです。 Dreamweaverで適用されないのは、痛いですよね。私は、Dreamweaver 8を使用していますが、CS3で改善されているのか気になるところです。 clear:bothを使う方法でしたら <style type="text/css"> .clear_fix { height:0px; width:0px; clear:both; } </style> <div id="contents"> <div id="main"> メイン </div> <div id="menu"> メニュー </div> <div class="clear_fix"></div> </div> <div id="footer"> </div> カラのdiv要素が増えてしまいますが、この方法が最適かもしれません。メインやメニューにfloatした要素が出てこない限り、レイアウトは崩れないので大丈夫だと思います。もし、使うとしても、そのfloatした要素の親要素の最後に上記のソースのように「<div class="clear_fix"></div>」を付け足すことでレイアウトは崩れないと思います。

質問者

お礼 2007/08/08 14:53

ありがとうございます。カラ要素の<div>を加えるということは、他の方の<br style="clear:both;">と似ていますね。結局最後にclear:both;を含む要素を記述すると解決しそうですね。自分は未だに2004なので、ズレているだけという可能性もあります。余談ですが。大手企業のサイトの一部なのでいろいろと制限がありまして。自分でFTPでアップしたいんですけど、それもできなくて・・・。面倒です。

air_grow
ベストアンサー率0% (0/2)

2007/08/07 09:12 回答No.2

contents部分にfloatをした要素があるのなら、ソースを改めて、 /*fire fox、opera用*/ #contents:after { content:"."; display:block; height:0; visibility:hidden; clear:both; } /*IE 5～6用*/ *html #contents { height:1%; } /*IE 7用*/ *:first-child+html #contents { height:1%; } このようにすると、footer部分のcssのプロパティは必要ありません。

質問者

お礼 2007/08/07 11:17

アドバイス有難うございます。こちらのやり方でも、回避できました。ただ、Dreamweaver上ではずれているのが気になるところですが。この場を借りて補足させて頂きます。「コンテンツ」の中にさらに「メイン」と「メニュー」を入れて、float: left;で横並びに表示させています。おそらく、そこのfloat: 要素がfooterにも影響を与えてるのだと思います。でもこれってclear: both;で回避できないものなんですかね。さらに「メイン」や「メニュー」の部分にもいろいろな要素が加わってはいるのですが。 <div id="contents"> <div id="main"> メイン </div> <div id="menu"> メニュー </div> </div>

rainbowsix
ベストアンサー率85% (6/7)

2007/08/06 13:41 回答No.1

直るかどうかはわかりませんが、以下の項目をCSSに追記してみてはいかがでしょうか。いわゆる、clearfixとよばれるやつです。 #contents:after { content: ""; display: block; clear: both; } もし、#contents内でfloatする要素があるなら、それが原因になっている可能性が高いのではないでしょうか。上記のがダメなら、#contents内の最後の行に、 <br style="clear:both;"> なんてしてみてはいかがでしょう。・・・素朴な疑問ですが、float:none;って、どんな効果があるのでしょう？使ったことが無いもので・・・。

質問者

お礼 2007/08/06 14:48

有難うございます。取り急ぎ<br style="clear:both;">で修正できました。こんな簡単なもので回避できるとは・・・。 clearfixも勉強になりました。いろいろと規制があって難しいです・・・。 float:none;はclear: both;をすればとくに意味がないと思うのですが、なんとなくセットで使った方が良いかなと思っているだけです。とくに深い意味はありません（笑）

関連するQ&A

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での背景色の出し方でつまりました。
独学で学んでいる初心者です。 HTML <link rel="stylesheet" href="hp.css" type="text/css"> <div id="container"> <div id="header">ヘッダー</div> <div id="main">メイン</div> 　　　　　　<div id="sidebar">サイドバー</div> <div id="footer">フッター</div> </div> CSS #container{ width:940px; overflow:hidden; } #main{ width:620px; float:left; color:black; } #sidebar{ width:320px; float:right; background:green; } #footer{ clear:both color:red; } 簡単なものにしてみても出なかったので、なぜ出ないのか教えていただければと思います。ブラウザはオペラです。サイドバーのグリーンしかつきません。過去の似たような質問をいくつかみて overflow:hidden; や .clearfix:after { content: ""; display: block; clear: both; } を入れてみてもダメでした。お願い致します。
- ベストアンサー
- CSS
CSSによる3カラムレイアウト
CSSによる3カラムレイアウト以下のHTML(A)をCSSで(B)の様に表示させたいのですが、どの様にすると良いでしょうか？ HTML(A) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr"> 省略 <body> <div id="container"> <div id="wrapper"> <div id="content">コンテンツ</div> </div> <div id="header">ヘッダー</div> <div id="navigation">ナビゲーション</div> <div id="widget">ウィジェット</div> <div id="footer">フッター</div> </div> </body> </html> 表示(B) |ヘッダー　　　　　　　　　　　　　　　　　　　　　| |ナビゲーション｜コンテンツ｜ウィジェット| |フッター　　　　　　　　　　　　　　　　　　　　　| 自分でも大分試行錯誤したのですが、思い通りの結果が得られません。今のところは、コンテンツとナビゲーションをfloatで横並びにし、ヘッダー分の高さをmarginで下げて、ヘッダーはposition: absolute;で上部に表示させています。ウィジェットが無い2カラムの状態ならそれで解決しているのですが、ウィジェットを追加して表示(B)の様に3カラムにしようとすると上手くいきません。 HTMLを変えれば他にやり様は思いつくのですが、containerとwrapperを除く要素の並びは(A)の通りで実現させたいです。また、上記のソース自体あまりスマートではないのですが、もっとスマートなやり方があればそちらも指南頂けると幸いです。
- ベストアンサー
- HTML
HTMLのCSS(float)の設定がよくわかりません
HTMLのCSS(float)の設定がよくわかりません画像のように各配置はうまく表示されているのですが footerのCSSを #footer { width: 100%; float: left; clear: both; } と表記するとwrapperのCSSで表記した外枠のボーダーが footerの前で切、footerの左横に1px～2pxの隙間ができてしまうのですが、その理由をわかる方いらっしゃいますか。宜しくお願い致します。 footerの表記を #footer { width: 100%; clear: both; } とすると、ボーダーも1pxの隙間もなく正常に表示されます。宜しくお願い致します。 ■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 #wrapper { width: 700px; border-right-width: 1px; border-left-width: 1px; border-right-style: solid; border-left-style: solid; border-right-color: #000; border-left-color: #000; } #container { overflow: hidden; } #left { float: left; } #right { float: left; } #footer { width: 100%; float: left; clear: both; } わかる方いらっしゃいましたら宜しくお願い致します。
- ベストアンサー
- HTML
ＣＳＳレイアウトの２カラム左メニューでコンテンツを先にＨＴＭＬに記述できる方法をおしえてください。
趣味でＨＰを作成しております。一般的なＣＳＳレイアウト２カラム左メニューにしたいのですが、ＨＴＭＬ部分で左メニューよりコンテンツを先に記述し、ＣＳＳで左メニューで右にコンテンツがくるようにしたいです。現在のＣＳＳは * { margin:0; padding:0; } .wrapper { width: 750px; margin: 0 auto; } .header { width: 750px; height: 100%; } .main { width: 750px; } .menu { float: left; width: 200px; } .contents { float: left; width: 550px; } .footer { clear: both; width: 750px; height: 100%; } .menu ul { list-style: none; } このような記述です。つづきましてＨＴＭＬ部分は <body> <div class="wrapper"> <div class="header"> ヘッダー部分 </div> <div class="main"> <div class="contents"> コンテンツ部分 </div> <div class="menu"> 　メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> このような感じです。しかしこれだとＨＴＭＬ部分はコンテンツが先にきておりますが、メニューが右になってしまいます。これをＨＴＭＬ部分を変えずにＣＳＳでメニューを左に配置する方法はありますでしょうか？１週間くらい試行錯誤したのですが、できませんでした。お詳しい方教えてください。
- ベストアンサー
- HTML
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が正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います丁度以下の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
divをつかった2段組について教えてください。
すみませんが、思うように段組ができないので、教えてください。 divを使って、次のようなレイアウトを実現させようとしています。「メインとサブからなる2段組で、メインは幅400px以上、サブは幅200px固定、スクリーンにあわせてメインは大きくなる」(このサイトのようなレイアウトです。) メインを固定でならできるのですが、スクリーンの大きさに合わせる方法が分かりません。たたき台のコードを添付します。どこを直せばよいのか、教えていただけると幸いです。 -------------------------------------------html------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="stylesheet" href="/style.css" type="text/css"> </head> <body> <div id="header"> ヘッダ </div> <div id="box"> <div id="boxMain"> いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい </div> <div id="boxSub"> ううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううううう </div> </div> <div id="footer"> フッタ </div> </body> </html> ------------------------------css-------------------- div#header { width: 600px; } div#box { } div#boxMain { float: left; margin: 0px; } div#boxSub { width: 200px; float: right; } div#footer { clear: both; width: 100%; }
- ベストアンサー
- HTML
IE8でサイドバーのレイアウトが崩れる場合の対処法
CSSについての質問です。 IE8よりも古いバージョンでのみレイアウトが崩れて困っています。簡単な抜粋ですが、以下のような感じでfloatを使ってレイアウトを作成しています。 [HTML] ---------------- <div id="main"> </div> <div id="sidebar"> </div> <div id="footer"> </div> ---------------- [CSS] ---------------- #main{ float:left; width:620px; } #sidebar{ float:right; width:300px; } #footer{ clear:both; } ---------------- IE8よりも古いバージョンでは、サイドバーが下に落ちてレイアウトが崩れてしまいます。しかもIEの開発ツールでHTMLを確認したところ、なぜかサイドバーがメインコンテンツの中に入っていました。 ---------------- <div id="main"> <div id="sidebar"> </div> </div> ---------------- なので、全体の幅を広げても、下に落ちてしまったサイドバーは全く上がってきてくれません。どうにか解決する方法はありませんでしょうか？文章だと伝わりくいかもしれませんが、よろしくお願いいたします。
- ベストアンサー
- CSS
css 標準モードでheight:100%にしたとき、フッターを画面の一番下にもってくるには？
お世話になります。タイトル通り、標準モードでheight:100%のものをつくり、一番下にフッターがくるようにしたいのですが、どうにも出来ません。なにかいい方法がないか、ご教授いただけると幸いです。尚、テーブルは使わない方法でお願いします。以下が途中までのソースです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <style type="text/css">  </style> </head> <body> <div id="h100"> <div id="header">ヘッダー</div> <div id="container">コンテンツ</div> <div id="footer">フッター</div> </div> </body> </html>
- ベストアンサー
- HTML

【CSS】不具合の原因がわかりません。