CSSが正確に反映されません。
４つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います
丁度以下の2つを表示した場合の、contentsとmainの間の間隔が理想的です。
しかし書いたCSSの設定が正確に反映されません。
headerとfooterもこの大きさで広げたいと思うのですが、広がりません。
また、なぜheaderは丸くならず、footerはサイズからはみ出すのでしょうか。
背景を赤に設定しているのですが、それも反映されません。
なぜこうなるのかどなたかご存知の方、ご指摘いただけると助かります。
どうかよろしくお願いします。
以下、2つのファイルは同じフォルダに保存しました。
dreamweaverのアカデミック版で作り、firefox3.6.13で表示しています。
style.css
----------------------------------------------------------
@charset "utf-8";
/* CSS Document */
<!--
* {
margin:0;
padding:0;
}
h1, h2, p {
margin: 0 1em;
}
<!--背景の設定-->
body {
background-color: red;
}
<!--コンテンツの幅を指定-->
#wrapper,
#main,
#header,
#menu,
#footer {
width:1120px;
}
<!--角を丸くする-->
#header,
#menu,
#contents,
#footer {
background-color: #66FFFF;
border:2px solid #999;
padding: 8px;
margin-bottom:5px;
-webkit-border-radius: 5px; /* Safari,Google Chrome用 */
-moz-border-radius: 5px; /* Firefox用 */
}
<!---->
#wrapper {
margin: 0 auto;
line-height: 1.5;
}
#main {
}
#header {
height: 50px;
}
#menu {
width: 160px;
float: left;
}
#menu ul {
list-style: none;
margin-left: 1em;
}
#contents {
float: right;
width: 900px;
}
#footer {
clear: both;
height: 50px;
text-align: center;
}
-->
------------------------------------------------------------------------------------
index.html
------------------------------------------------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja"><head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>勉強用</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Site Title</h1>
</div>
<div id="main">
<div id="menu">
<p><strong>float:left</strong></p>
<ul>
<li>Menu</li>
<li>Menu</li>
</ul>
</div>
<div id="contents">
<h2>Sub Title</h2>
<p><strong>float:left</strong></p>
<h2>Sub Title</h2>
<p>text</p>
</div>
</div>
<div id="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>
