段組みレイアウトがfloatleft上手くいきませ
先程の投稿は、一度削除させて頂きました。
再度、投稿しなおします。
なんとか、以下の画像のところまで持ってくることが出来ました。
おかしなところ。
Q１ hedderの上に隙間１０ｐｘが出来てしまっている（本来は、黄色の色が一番上0pxの所まで持って行きたいです）
Q2 全体が、centerに行かない、、、。左によってしまっております。
以上２点です。
宜しくお願いします。
失礼致します。
こんにちは。ycqと申します。
html+CSSでサイトを作っています。
簡単に段組みレイアウトを作って、CSSで色を付けてみるのですが、レイアウトが崩れてしまっています。ソースを修正したりしたのですが、原因を見つけることが出来ませんでした。
heightは基本的に autoでも構いません。
#wrapper 950px
#head 950px
#main 950px
(mainの中に)
#main_left
と#main_right があります。
#main_left 250px で左側メニューfloat:left;
#main_right 700px で右側に回り込ませるために、きっちりと float:left;
#main_right の中には
#right_box_flash
#contents
#fotter
が入ります。
|----------------------|
|----|-----------------|
| | |
| |-----------------|
| | |
| |-----------------|
|___|____________|
画像も添付させて頂きます。それぞれのボックスにたいして、CSSで色を付けております。
おかしい所がございますでしょうか？
Q レイアウトがCenterを指定しているのに、真ん中にいかない。
Q #hedder の上部に１０ｐｘぐらいの空白ができている。margin:0px; padding:10px指定
お時間がございましたら、どうぞ、宜しくお願いいたします。
失礼致します。
index.html***************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hogehoge</title>
<link href="css/default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<div class="header">
<h2>header</h2>
</div>
<div class="main">
<div class="main_left">
</div>
<div class="left_box_menu">
<h2>left_box_menu</h2>
</div>
</div>
<div class="main_right">
<div class="right_box_flash">
<h2>right_box_flash</h2>
</div>
<div class="contents">
<h2>contents</h2>
</div>
<div class="footer">
<h2>footer</h2>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
****************************************
default.css***********************************
@charset "utf-8";
/* CSS Document */
/*------------------------------*/
共通設定
/*------------------------------*/
* {
margin: 0;
padding: 0;
line-height: 1.6;
font-family: "メイリオ","ＭＳ Ｐゴシック", "ヒラギノ角ゴ Pro W3";
list-style-type: none;
}
img{
border:none;
}
body{
margin: 0;
padding: 0;
text-align:center;
background-color:red;
}
/*------------------------------*/
大枠ボックス構成
/*------------------------------*/
.wrapper{
width:950px;
height:1015;
margin:0px auto;
padding:0px;background-color:orange;
}
.header{
width:950px;
height:100px;
background-color:yellow;
}
.main{
width:950px;
background-color:purple;
}
.main_left {
width:250px;
height:915px;
margin:0px auto;
padding:0px;
float:left;
background-color:DarkgGldenRod;
}
.left_box_menu{
width:250px;
height:auto;
float:left;
background-color:khaki;
margin:0px auto;
padding:0px;
}
.main_right{
width:700px;
height:auto;
float:left;
}
.right_box_flash{
width:700px;
height:300px;
float:left;
background-color:pink;
}
.contents{
width:700px;
height:280px;
float:left;
background-color:blue;
}
.footer{
width:700px;
height:115px;
float:left;
background-color:yellow;
お礼
回答ありがとうございます。 修正して再質問します。