プロが教える店舗&オフィスのセキュリティ対策術

カラムで段組と段組の間に隙間ができてしまい無くせません。
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>
このような感じになります
お願いします。

A 回答 (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指定してください
    • good
    • 0
この回答へのお礼

ご迷惑おかけしました
文書宣言をしていなかったのが原因のようです。
widthやheightなどのサイズ指定の知識もまだ感覚が
掴めておらず、勉強になりました。

お礼日時:2008/02/23 15:04

理由不明。



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.dt …
<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>
    • good
    • 0
この回答へのお礼

ご迷惑おかけしました。
文書宣言をしていないことが原因だったようです

お礼日時:2008/02/23 14:58

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!