カラムで段組と段組の間に隙間ができてしまい無くせません。
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>
このような感じになります
お願いします。
No.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指定してください
ご迷惑おかけしました
文書宣言をしていなかったのが原因のようです。
widthやheightなどのサイズ指定の知識もまだ感覚が
掴めておらず、勉強になりました。
No.1
- 回答日時:
理由不明。
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>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS html/cssで要素が出てこなくて困ってます 1 2022/12/31 16:59
- HTML・CSS cssが効かなくて困ってます 1 2023/01/01 23:57
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript 画像の表示位置 3 2022/12/23 08:25
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
HTMLですCSSです この画像のよ...
-
HTMLですCSSです 画像のように...
-
フッターの下に隙間ができてしまう
-
htmlのstyleのposition:relativ...
-
スタイルシート(CSS)で、高さ...
-
ウィンドウサイズを無視して、D...
-
Webサイト作成 プログレスバー ...
-
チェックボックスの背景色って...
-
フッター上部に謎の隙間
-
かなり困っています。知恵を貸...
-
【コーディング】途中から位置...
-
CSSでdivのheightを動的に
-
CSS <div>の入れ子が反映さ...
-
リキッドデザイン3カラム左端幅...
-
【CSS】floatで左右に並べた...
-
MAX関数を使ってからLEFT JOIN...
-
Javascript で共通の処理をどこ...
-
画像ランダム表示、しかしダブ...
-
iframe内のリンクが飛ばないの...
-
HTMLタグに複数のクラスを設定...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
CSS <div>の入れ子が反映さ...
-
フッター上部に謎の隙間
-
スクロール可能なチェックボックス
-
【CSS】floatで左右に並べた...
-
floatさせたdivタグを折り返さ...
-
Ctrl+F(検索)の窓を出したいの...
-
css固定したフッターが本文と重...
-
チェックボックスの背景色って...
-
1行で左寄せと右寄せと中央揃え...
-
左○○px、右は残りの幅(100%-左...
-
メニューやヘッダー背景だけを...
-
CSSでdivのheightを動的に
-
html スクロール要素を下から表...
-
文字をクリックしたら別の文字...
-
textareaで入力した文字を改行...
-
https://でのレイアウト崩れを...
-
文字を固定したいのですが…
-
オンマウス時に別画像を上に重...
-
レイアウトが崩れないようにす...
-
画像の特定の座標にカーソルが...
おすすめ情報