アプリ版：「スタンプのみでお礼する」機能のリリースについて

インラインフレーム、ｃｓｓの質問です。

解決済

  • 質問者：gogo0319
  • 質問日時：
  • 回答数：2件

下記の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. …

<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. …
<?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>

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (2件)

No.2ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

DOCTYPEはframesetではなく、transitinal(Loose DTD)です。


　iframeを使うので、frameと思われたのでしょうが、仕様書の要素索引を見ればわかるはずです。
　ただ、XHTML1.0の仕様書には要素索引が無いのでHTML4.01のものを見るほうが早いです。(XHTML1.0はHTML4.01と基本的に同じものですから)
要素索引 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )
　のiframeの右の欄に[L}と書かれているのは、DTDはtransitinalであるということです。

さて、HTMLやCSSはvalidatorを使えば、たちどころにエラーがわかるので詳細は書きません。
★The W3C Markup Validation Service ( http://validator.w3.org/#validate_by_input )
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
など。

　たくさんエラーが見つかると思いますので、詳細は割愛します。
　【こんな複雑なCSSやHTMLの前にHTML,CSSの基本を、しっかりと押さえることが肝要かと思います。そのほうが早い!!】

　私は、現在HTML4.01strictがメインで、XHTMLからは手を引いています。(XHTMLの将来に暗雲が立ち込めている・・・)。ウェブ標準は、HTML5(およびサブセットのXHTML5)に移行しそうですから。そしてHTML5はHTML4.01strictの改良型ですから。

　さて、この問題はインラインフレームの問題ではなく、単に３カラムの設定によるものです。
　一言で言うと、floatを使ってレイアウトをするために、必然的に起こり得る問題です。すなわち、「はみ出せば回り込みが解除される。」という点です。
　floatを使う限り、『文書の順番が本来の姿(順番)から逸脱してしまう。レイアウトに文書構造が引っ張られる』『様々な解像度、ウィンドウサイズに対応しきれない』『障害者のためのアクセスビリティが失われる』という問題は必ず発生します。それを承知の上で利用してください。
　floatを使う場合は、必ずサイズの合計がコンテナブロックの内寸より小さくなるようにしなければなりません。

[参考]
floatによる段組について - Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/qa/7079628.html )
    • good
    • 0
    • 件
通報する
この回答へのお礼

＞DOCTYPEはframesetではなく、transitinal(Loose DTD)です。

恥ずかしながら、大は小を兼ねる的なノリで使ってました。
そして沢山エラーが出ました！
基礎から一個ずつ勉強していきます。
ご教授ありがとうございました。　

通報する
お礼日時：2011/11/05 19:58

No.1

  • 回答者： outbrave
  • 回答日時：

#side #main #side2 の3つを縦に並べたいのですかね。



まず、横幅の計算間違い
#container が 960px この中に

#side 200px + 5px
#main 630px + 110px + 220px
#side2 80px + 5px

合計 1250px なので入る訳がありませんので考え直してください。


次に文法間違い
まず、DOCTYPE 宣言ですが Frameset は使用しません。
css のカッコの対応にも間違いがあります。
インラインフレームの方は、１からやり直してください。

これらは検証サイトで確認してください。


レイアウトですが下記のような感じになると思いますので参考にしてください。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitio …
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
#container {
width: 960px;
margin: 0 auto;
background-color: #222222;
color: #cccccc;
}

#headermenue {
background-color: #999999;
}

#side {
float: left;
margin-left: 5px;
width: 200px;
background-color: #993333;
height:200px;
}

#main {
float: left;
width: 670px;
background-color: #666666;
height:200px;
}

#side2 {
float: left;
width: 80px;
margin-right: 5px;
background-color: #b3bc6f;
height:200px;
}

#footer {
clear: both;
background-color: #339933;
}
</style>
</head>
<body>
<div id="container">
<div id="headermenue">
headermenue
</div>
<div id="side">
sidecate
</div>
<div id="main">
main
</div>
<div id="side2">
sgad
</div>
<div id="footer">
footer
</div>
</div>
</body>
</html>

この回答への補足

>css のカッコの対応にも間違いがあります

どのように違うのでしょうか？
初歩的な質問ですみませんが、見当もつかないので
教えていただけたら助かります。

補足日時：2011/10/25 18:12
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報