こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

CSSが正確に反映されません。

4つの枠を丸で囲み、かつそれぞれの枠を等間隔で空けたいと思います
丁度以下の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>

投稿日時 - 2011-12-27 16:57:31

QNo.7211990

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

なんでCSSの中にHTMLのコメントが入ってるの?

投稿日時 - 2011-12-27 17:02:15

補足

一度投稿しなおします。
お騒がせしました。

投稿日時 - 2011-12-27 18:49:23

お礼

ファイルがhtmlとcssと2つあったので、それぞれコードをコピーしました。

投稿日時 - 2011-12-27 17:46:16

あなたにオススメの質問