外枠をtableで作った中に、<div>で囲んだ部分をいくつか作り、その中にそれぞれ文字を書き込んでいます。
形は大まかに説明すると、左側に大きな<div>、その右側に縦3段で<div>がある状態です。
左側の<div>内にインラインフレームを入れたところ、右側の縦3段のうち、下2段の書き込み文字が見えなくなってしまいます。
文字がある場所をマウスでなぞると、文字が現れます。
更新すると、また文字は見えなくなります。
なぜ、文字が消えてしまうのでしょうか。
インラインフレームがどうやら問題を引き起こしているようですが、対処方法がわかりません。
直し方を教えてください。
よろしくおねがいします。
No.4ベストアンサー
- 回答日時:
こんにちは
ソースを試してみましたが今のところ分かったのは
<div style="float:right;>
の右側の『"』が無いので画像が表示されていないということだけですね(--;)
文字は表示されていました
すみませんが
class="waku"
class="moji"
のCSSもお願いできますか?
画像は出てて文字だけ出ていないのであればclass="moji"の記述がどこかおかしいのかな?
あとポップアップがあるということなのですがjavascriptを使用しています?
それかhtmlファイルをクリックして表示させています?
返事が遅くなってすみません。
アドバイスありがとうございます。
自分なりにどうにかならないか試行錯誤した結果、どうにか表示されるようになりました。
ポップアップの件ですが、iframeで入れているスライドショーがjavascriptで動かしているものです。
ポップアップOKで突然文字が消えていたので、javascriptがなんらかの原因のようです。
それと、3段目のところで、<div style="clear:both;"></div>を一個とり、最後の<div style="clear:both;"></div>のところで、spacerのようなものをheight="1px"で入れたら、なんとなく安定しました。
【最初】
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
【修正後】
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
</div>
<div style="clear:both;"><img src="base/spacer.gif" width="190" height="1"></div>
試行錯誤なので、どうしてなのかよく分かりませんが、とりあえず、これはどうにかなりました。
しかし、今度はその隣に設定していたiframeの枠が消えるようになり、ひとつ解決してはひとつ問題が発生するという感じです。
No.5
- 回答日時:
使用しているブラウザは、何でしょうか?
もしそれがIE6なら、文字が消えているdiv要素に
<style type="text/css">
*html #hoge {
height:1%;
}
</style>
<div id="hoge">・・・・・</div>
のように、idを指定して、上記のようにしてみてください。
IE6では、div要素内の文字が消えるバグがたまにあります。
No.3
- 回答日時:
また失礼します。
m(__)mスタイルシートの「float」の使い方がちょっと変な感じがします。
<div>に入れないで、img タグの中に入れるべきじゃないかと思いますが。
こんな感じでしょうか。
<img src="xxx.jpg" style="float:right;">
それで、img タグについてる <div>、</div>は取った方がいいかもしれません。
でないと、img タグについてる div のスタイルシートの適用範囲がおかしくなっちゃう気がします。
返事が遅くなってすみません。
分りにくくなるかなと思って、細かい情報は省いちゃったんですが、<img>の前の<div>はfloatとpaddingのために入れていました。取ってしまうと、配置が良くないので入れてます。
すこし、細かすぎるのかもしれませんね。
アドバイスありがとうございます。
No.2
- 回答日時:
こんにちは
こういう感じ?
<table>
<tr>
<td rowspan="3">
iframe表示<p>
<iframe src="test1.html"></iframe>
</td>
<td>コンテンツ1</td>
</tr><tr>
<td>コンテンツ2</td>
</tr><tr>
<td>コンテンツ3</td>
</tr>
</table>
もしくは
<div style="width:510px">
<div style="float:left;width:300px;"><iframe src="test1.html"></iframe></div>
<div style="float:right;width:200px;height:200px;">コンテンツ1</div>
<div style="clear:right;"></div>
<div style="float:right;width:200px;">コンテンツ2</div>
<div style="clear:right;"></div>
<div style="float:right;width:200px;">コンテンツ3</div>
<div style="clear:right;"></div>
</div>
どちらも症状は出ないようですがソースを一部抜粋で提示されると何か情報が得られるかも?
この回答への補足
分りにくい説明ですみません。
前にdivで作ったらブラウザによって形がめちゃくちゃになったので、tableで外枠を作ったのです。
下記のような感じです。
文字が消える事態は、エクスプローラーのみに発生し、セキュリティのポップアップをOKすると消えるようです。
よろしくおねがいします。
<table>
<tr >
<td colspan="2">
<iframe src="slide.html">スライドを表示</iframe>
</td>
</tr>
<tr>
<td>
<iframe src="a.html" scrolling="no" frameborder="0">左側</iframe></td>
<td>
<!--右側1段目-->
<div class="waku">
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!--右側2段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
<!--右側3段目-->
<div class="waku">
<div style="float:right;><img src="photo.jpg"></div>
<div class="moji">○○○○</div>
<div style="clear:both;"></div>
</div>
<div style="clear:both;"></div>
</td>
</tr>
</table>
すみません。上の補足に付けたしです。
右側2,3段目の<div class="moji">○○○○</div> の○○○のところが消えます。
この文字を太字にすると現れます。
<div style="float:right;><img src="photo.jpg"></div>の写真を取っても現れます。
文法的にめちゃくちゃだったらすみません。
No.1
- 回答日時:
こんにちは。
table の使い方間違えてませんか?
<table border=1>
<tr>
<td rowspan=3>
<iframe></iframe>
</td>
<td>
あいうえお
</td>
</tr>
<tr>
<td>
かきくけこ
</td>
</tr>
<tr>
<td>
さしすせそ
</td>
</tr>
</table>
だとうまくいくみたいですけど。
何で div が出てくるのか意味が判りませんが・・・?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- PHP アップロード画像数でCSSを分けることに成功したのですが、画像の横に文字を並べることが出来ません。 3 2023/07/28 17:16
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript Javascriptが機能せず原因が分からないので教えて頂きたいです 3 2023/06/04 14:50
- HTML・CSS 要素の幅をいろんな写真の幅に合わせたい。 1 2022/07/25 20:11
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- Excel(エクセル) PHPプログラムをエクセルに張り付けると検索ボックスがでてくる! 3 2022/05/08 07:10
- JavaScript javascriptで文字分割は、 split() などメソッド不要??? 4 2023/02/06 22:50
- その他(プログラミング・Web制作) プログラミング pythonの問題について 2 2022/04/19 00:41
- HTML・CSS HTML、cssのatomつぅーやつで 課題Ex1ってやつを表示させたいのですが、 私は課題Ex1が 2 2022/12/15 16:56
- PHP ここでの ②if($su_d<>"")の比較演算子 を使う理由は 1 2022/03/26 02:33
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
tableタグとformタグの組み合わせ
-
html でのテキスト結合について
-
同じクラス名はつけないほうが...
-
Firefoxを使ってるのですがズー...
-
formのinputなどの幅100%指定
-
テーブルの線を点線にする
-
Visual Studio で CLR 開発でデ...
-
Tableタグで作成した表の縮小
-
縦方向の位置決め
-
ブラウザの文字サイズを変える...
-
cssで、テーブルのtdの中の文字...
-
Tableタグ内のspan styleが適応...
-
HPに載せる写真にかっこいい...
-
前の質問のソースです
-
TABLEのセルの中の文字を行単位...
-
テーブルの位置を細かく指定し...
-
テーブルとテーブルの間隔について
-
テーブルタグの中にdivを含めて...
-
テーブルの任意の列を非表示に...
-
テーブルの行を折りたたみたい...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
html でのテキスト結合について
-
tableタグとformタグの組み合わせ
-
テーブルの一部分のセルだけに...
-
同じクラス名はつけないほうが...
-
テーブル内のテーブルの高さを...
-
XHTMLに関する質問 順序が逆に...
-
Tableタグ内のspan styleが適応...
-
Tableタグで作成した表の縮小
-
ブラウザによってテーブルのセ...
-
cssで、テーブルのtdの中の文字...
-
td要素内のdiv要素をセンタリン...
-
vbscriptで時計を作りたい
-
formのinputなどの幅100%指定
-
Firefoxを使ってるのですがズー...
-
テーブルの枠線に色が付かない
-
divで囲んだ文字が消える
-
TDタグ内での均等割付の仕方
-
表とリスト(ulとtable)の違い...
-
firefoxで「height: 100%;」と...
-
<img>タグにCSSのclass設定可能?
おすすめ情報