カラムで段組と段組の間に隙間が埋ができる

解決済

質問者：mumu7777
質問日時：2008/02/22 04:55
回答数：2件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

このQ&Aに関連する最新のQ&A

「バックグラウンドとは」に関するQ&A：バックグラウンド通信とは？

さらに表示

「ＨＧ正楷書体」に関するQ&A： excelでHG正楷書体-PROを使いたいんですが．．．

回答 (2件)

ベストアンサー優先
最新から表示
回答順に表示

No.2ベストアンサー

回答者： leap_day
回答日時：2008/02/22 15:44

こんにちは

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指定してください

- 0
- 件

通報する

この回答へのお礼

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

通報する

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

No.1

回答者： himajin100000
回答日時：2008/02/22 05:35

理由不明。

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>