- 締切済み
【CSS】不具合の原因がわかりません。
すいません、少しややこしいかもしれませんが・・・。 下記のように、「ヘッダ」「コンテンツ」「フッタ」の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)
#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>」を付け足す ことでレイアウトは崩れないと思います。
- air_grow
- ベストアンサー率0% (0/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のプロパティは 必要ありません。
お礼
アドバイス有難うございます。 こちらのやり方でも、回避できました。 ただ、Dreamweaver上ではずれているのが気になるところですが。 この場を借りて補足させて頂きます。 「コンテンツ」の中にさらに「メイン」と「メニュー」を入れて、float: left;で横並びに表示させています。 おそらく、そこのfloat: 要素がfooterにも影響を与えてるのだと思います。 でもこれってclear: both;で回避できないものなんですかね。 さらに「メイン」や「メニュー」の部分にもいろいろな要素が加わってはいるのですが。 <div id="contents"> <div id="main"> メイン </div> <div id="menu"> メニュー </div> </div>
- rainbowsix
- ベストアンサー率85% (6/7)
直るかどうかはわかりませんが、以下の項目をCSSに追記してみてはいかがでしょうか。いわゆる、clearfixとよばれるやつです。 #contents:after { content: ""; display: block; clear: both; } もし、#contents内でfloatする要素があるなら、それが原因になっている可能性が高いのではないでしょうか。 上記のがダメなら、#contents内の最後の行に、 <br style="clear:both;"> なんてしてみてはいかがでしょう。 ・・・素朴な疑問ですが、float:none;って、どんな効果があるのでしょう？使ったことが無いもので・・・。
お礼
有難うございます。 取り急ぎ<br style="clear:both;">で修正できました。 こんな簡単なもので回避できるとは・・・。 clearfixも勉強になりました。 いろいろと規制があって難しいです・・・。 float:none;はclear: both;をすればとくに意味がないと思うのですが、なんとなくセットで使った方が良いかなと思っているだけです。とくに深い意味はありません（笑）
お礼
ありがとうございます。 カラ要素の<div>を加えるということは、他の方の<br style="clear:both;">と似ていますね。 結局最後にclear:both;を含む要素を記述すると解決しそうですね。 自分は未だに2004なので、ズレているだけという可能性もあります。 余談ですが。 大手企業のサイトの一部なのでいろいろと制限がありまして。 自分でFTPでアップしたいんですけど、それもできなくて・・・。 面倒です。