- ベストアンサー
カラムで段組と段組の間に隙間が埋ができる
カラムで段組と段組の間に隙間ができてしまい無くせません。 menuとtop,accsentなどの間に隙間ができてしまいます。 助けてください。 style.css /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px;height:100%; width: 100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive;} .cur{font-family:cursive;} .ser{font-family:serif;} /*フレーム スタイル*/ div#menu{float:left; width:100px; height:100%; background-color:#666633;} div#top{height:10%; width:; background-color:#ff9933;} div#accent{height:3%; width:; background-color:#999933;} div#navi{height:6%; wsidth:; background-color:#ff9933;} div#main{margin-left:100px; height:; width:; background-color:#ffff99;} div#base{position:relative; width:100%; height:91%; background-color:#ffff99;} div#bottom{clera:both; height:9%; width:100%; background-color:#999933; } HTMLのほうは <HTML> <HEAD> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <TITLE></TITLE> </HEAD> <BODY> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div id="bottom"> bottom </div> </BODY> </HTML> このような感じになります お願いします。
- HTML
- 回答数2
- ありがとう数5
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは IEで起こるfloatしたものとしていないものが並んだときにできる隙間ですね <div id="base"> <div id="menu"> menu </div> <div style="float:left;"> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> <div style="clear:both;"></div> </div> <div id="bottom"> bottom </div> div#main{margin-left:100px; ｝ 除去 のようにしてみてください ※この場合画面サイズを小さくしていくとoverflowによるレイアウト崩れが起こるので body もしくは base には100%ではなくpxでwidthを指定する必要があります もしくはfloatをやめて全部をposition指定するか div#menu{ position:absolute;top:0px;left:0px;} div#base{ position:absolute;top:0px;left:0px;} div#bottom{ position:absolute;bottom:0px;left:0px;} <div id="base"> <div id="menu"> menu </div> <div style="position:absolute;top:0px;left:100px;width:100%;"> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> </div> <div id="bottom"> bottom </div> ※width:100%;としていますがこれはhtml { overflow:hidden; }しているので分かりにくいですが実際にはブラウザより少し(100px)はみ出しているのでコンテンツを作るときにはみ出た部分が見れなくなるので作るときに注意してください ※コンテンツ(top,accent,navi)のheightはpx指定してください
その他の回答 (1)
- himajin100000
- ベストアンサー率54% (1660/3060)
理由不明。 IE 7 , Opera 9.5 Build 9789 , Minefield ( Gecko/2008022104) Safari 3.1(525.9) で治った <!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"> <head> <title>Q3798381 TestCase 2(IEのみ)</title> <style type="text/css"> /*html ボディー*/ html{height:100%; overflow:hidden;} body{ margin:0px; height:100%; width:100%; font-family:"HG正楷書体-PRO","HG行書体","HGP行書体",cursive; } .cur{ font-family:cursive; } .ser{ font-family:serif; } /*フレーム スタイル*/ div#menu{ float:left; width:100px; height:100%; background-color:#666633; } div#top{ height:10%; background-color:#ff9933; } div#accent{ height:3%; background-color:#999933; } div#navi{ height:6%; background-color:#ff9933; } div#main{ margin-left:100px; background-color:#ffff99; height:81%; } div#base{ position:relative; width:100%; height:91%; background-color:#ffff99; } div#bottom{ clear:both; height:9%; width:100%; background-color:#999933; } </style> </head> <body> <div id="base"> <div id="menu"> menu </div> <div id="top"> top </div> <div id="accent"> accent </div> <div id="navi"> navi </div> <div id="main"> main </div> </div> </body> </html>
お礼
ご迷惑おかけしました。 文書宣言をしていないことが原因だったようです
お礼
ご迷惑おかけしました 文書宣言をしていなかったのが原因のようです。 widthやheightなどのサイズ指定の知識もまだ感覚が 掴めておらず、勉強になりました。