インラインフレーム、cssの質問です。
下記の3カラムのページを練習で作っているのですが、
右端のサイドバーをインラインフレームで表示させようとしたところ
レイアウトが崩れてしまいます。
そもそもインラインフレーム以前のCSSの問題なのかもしれないのですが
色々調べてはみたのですが
直せなくて困っています。
どなたかお分かりになる方ご回答お願いします。
HTML,CSS,インラインフレームのHTMLの順で貼っています。
HTMLソース------------------------------
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="C:/Documents and Settings/abc/デスクトップ/gear crafter/test2.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<a href=><img src="http://gearcrafter.web.fc2.com/image/testtop2.jpg" alt="" id="top" /></a></div>
<div id="headermenue">
<ul class="topmenue"><a href=><li>cart</li></a><li><a href=>about us</a></li><li><a href=>Q & A</a></li>
</ul>
</div>
<div id="side"> カテゴリ
<ul type="square" compact="compact" class="sidecate">
<li><a href=>財布</a></li><li></li><li></li><li></li><li></li><li></li><li></li> <li></li><li></li><li></li>
</ul>
</div>
<div id="main"><a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a>
<a href=><img src="http://gearcrafter.web.fc2.com/image/test1.gif" alt="" /></a></div>
<div id="side2">sgad<iframe src="side2.html" width="80" scrolling="no" frameborder="0"></iframe>
</div>
<div id="footer"></div>
</div>
</body>
</html>
---------------------------------------------------------------
--CSS---------------------------------------------------------
@charset "shift-jis";
/*画像*/
img { border-style:none;
}
a img { border-style:none; }
a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter: "alpha( opacity=80 )";}
/*リンク*/
a:link{
text-decoration:none;
color:#34494e;}
a:visited{
color:#34494e;}
a:hover{color:#245ba6;}
a:active{color:#245ba6;}
a { text-decoration: none; }
/*レイアウト*/
ul.topmenue {
margin-right:0px;
margin-left:auto;
width:29em;
}
ul.topmenue li {
float: right;
width: 8em;
margin-left: 5px;
padding: 2px;
border: 1px #b3bc6f solid;
background-color: #b3bc6f;
text-align: center;
}
ul.sidecate {
width: 2em;
margin-left: 1px;
margin-top: 0px;
padding: 1px;
border: 1px #b3bc6f solid;
background-color: #d8ddb6;
text-align: center;
width:194px;}
ul.sidecate li
{text-align: left;
width:194px;
}
#container {
width : 980px;
margin-left: auto;
margin-right: auto;
background-color :#222222;}
}
#header {width :960px; }
#headermenue {width : 960px;}
#side {
float: left;
margin-left: 5px;
padding-top: 5px;
width: 200px;
background-color: #b3bc6f;
text-align:center;}
#main {margin: 0px 110px 0px 220px;
width: 630px;}
#side2 {background-color: #b3bc6f;
float: right;
width: 80px;
margin-right: 5px;}
#footer {clear: both;
width: 960px;
}
---------------------------------------------------------------
--インラインフレーム----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<?xml version="1.0" encoding="shift_jis"?>
<style type="text/css">
<!--
body {
background-color: #000000;
width:80px;
color:#ffffff;
margin-top:0px;
}
-->
</style>
<html>
<head>
</head>
<body>
test text
</body></html>
お礼
す、すみませんでした。 クラス名に数字を入れていたのでCSSがきいていなかった模様です。 数字をなくしたらうまくいきました。 お騒がせして申し訳ございませんでした。
補足
ご回答ありがとうございます。 それも試しましたがダメでした。