- ベストアンサー
同じ画像なのに同一ページで表示されるところと表示されないところがありま
同じ画像なのに同一ページで表示されるところと表示されないところがあります。環境はIE7とXPです。 表示されないところは、floatを使って横並びにしたところです。レイアウトくずれというのではなく、ホームページ作成ソフトのプレビューでは、ちゃんと表示できているのに、ブラウザだと表示できません。どのような原因が考えられますか。 よろしくお願いします
- gerberared
- お礼率32% (20/62)
- ホームページ作成ソフト
- 回答数6
- ありがとう数11
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
.colmask { width:100%; } .leftmenu { background:#d8cab6; } .leftmenu .colright { background:#d8cab6; } .leftmenu .col1wrap { width:50%; padding-bottom:1em; } .leftmenu .col1 { margin:0 15px 0 215px; } div.imagebox { background-color: #d8cab6; width: 130px; float: left; margin: 0px; } p.image, p.caption { text-align: center; margin: 0px; } p.caption { color: #400; } <html> <head> <title>xxx</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <div class="colmask leftmenu"> <div class="colright"> <div class="col1wrap"> <div class="col1"> <div class="imagebox"> <p class="image"><img src="av.gif" width="120"height="100"alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p></div> <div class="imagebox"> <p class="image"><img src="av.gif" width="120" height="100" alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p></div> <div style="clear:both"> </div> </div></div></div></div> </body> </html> 上のように変更すると、どうなるでしょうか。 複雑な構成になっていますが、画像を表示させるだけなら、もっと簡潔にできるように思います。 ホームページ作成ソフトを使う限り、避けて通れないかも知れませんが。 どのような表示を望まれているのか不明なので、上記方法だけで解決かどうかは疑問です。
その他の回答 (5)
- outbrave
- ベストアンサー率60% (231/380)
実際の画面が見れればわかるかも知れませんが、今の状況ではわかりにくいですね。 そのページが公開できるなら、不要な部分を削除して見せてください。 自動で広告が表示されたりするサーバーだと、レイアウトが崩れる可能性はあります。 また、実際のページからソースを保存して、ローカル上で表示させるとどうなりますか。
補足
お返事ありがとうございます。 まだアップロードする前のローカル上でしか動作させていません。ローカル上だとIE７とかは関係ないのでしょうか。初心者なのでよくわかっていません。 css部分 .colmask { position:relative; clear:both; float:left; width:100%; overflow:hidden; } .leftmenu { background:#d8cab6; } .leftmenu .colright { float:left; width:200%; position:relative; left:200px; background:#d8cab6; } .leftmenu .col1wrap { float:right; width:50%; position:relative; right:200px; padding-bottom:1em; } .leftmenu .col1 { margin:0 15px 0 215px; position:relative; right:100%; overflow:hidden; } div.imagebox { background-color: #d8cab6; width: 130px; float: left; margin: 0px; } p.image, p.caption { text-align: center; margin: 0px; } p.caption { color: #400; } <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>xxx</title> <link href="style.css" rel="stylesheet" type="text/css" media="all"> <!--[if lt IE 7]> <style media="screen" type="text/css"> .col1 { width:100%; もしかしてこのあたりが問題？ } </style> <![endif]--> </head> <body> <div class="colmask leftmenu"> <div class="colright"> <div class="col1wrap"> <div class="col1"> <div class="imagebox"> <p class="image"><img src="xxx.jpg" width="120"height="100"alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p></div> <div class="imagebox"> <p class="image"><img src="xxx.jpg" width="120" height="100" alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p></div> </div></div></div></div> </body> </html> ちなみにキャプション文字も表示されていませんでした。<!--[if lt IE 7]>以降の部分だけhtmlに記入するのがおかしいのでしょうか。だとするとどのように修正してよいのかもわからず・・・です。 よろしくお願い致します。
- outbrave
- ベストアンサー率60% (231/380)
画像ファイルに問題がないということで 画像が表示されるはずの部分ですが、background-color: #d8cab6; と width: 130px; が設定してあるので 色付きのボックスが表示されるはずですが、そこはどう表示されていますか？
補足
お返事ありがとうございます。 もともとのbackgroundも、色つきのボックスと同じ色だったので、キャプションの文字以外は何も表示されていません。ためしに、ボックスの色をもとのbackgroundと別の黒色に変えてみましたが、やはりもとのbackgroundの色だけで、黒は表示されませんでした。 あと、floatをはずしてみると、たてに画像が表示されました。なぜなのでしょう・・・。floatに原因があるとしても、alphaeditでは横に問題なく表示されているのだからよくわかりません。
- outbrave
- ベストアンサー率60% (231/380)
1) 表示される xxx.jpg と、表示されない xxx.jpg は、同じ画像ファイルなのですか？ 2) ファイル名に問題はありませんか？（日本語であるとか） xxx.jpg これの実際のファイル名は何ですか？ 3) 画面上で表示されない画像の部分は、×印がありますか？ ×印がある場合、その部分を右クリックして、プロパティから URL を確認してください。
補足
ご回答ありがとうございます。 1) 同じ画像なので、画像ファイルに問題があるようではないようです。 2) いろんな画像で試したのですが、どれも横ならびの部分だけが表示できません。ファイル名は、英語もあるし、日本語でもアルファベット表記にしてあります。 3) ×印はありません。 よろしくお願い致します。
- szk9998
- ベストアンサー率45% (1027/2242)
＞同じ画像なのに同一ページに表示されない・・・ 意味がよくわかりませんね。 画像を２つ置いたのに、１つだけしか表示されないといったこと ですかね・・・ ホームページ作成ソフトが何かもわかりませんし、 その表示されないHTMLソースコードもわかりませんので、 一般論ですが、 ホームページ作成ソフトとブラウザの表示が違うことはよくあります。 作成ソフトのせいなのか、ブラウザのせいなのか、釈然としない ですが、まあ、そんなものだとあきらめてください。 ＩＥ7以外の違うブラウザソフト、 たとえば、ＩＥ８やFireFox、OPERA、Crome、Safariなどで、見られるか 試してみてはいかがですか？ まあ、たとえみられたとしても、ＩＥ７を使用している人は非常に多いので、 なんら問題解決にはなりませんが。 せめて、ＨＴＭＬソースがわかると、判断もできますが・・・
補足
ご回答ありがとうございます。 css部分 div.imagebox{ background-color: #d8cab6; width: 130px; float: left; margin: 0px; } p.image, p.caption { text-align: center; margin: 0px; } p.caption { color: #400; } html部分 <img src="xxx.jpg" width="300" height="324" alt="xxx" /> こちらの画像だけ表示されます。 <div class="imagebox"> <p class="image"><img src="xxx.jpg" width="120" height="100" alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p> </div> <div class="imagebox"> <p class="image"><img src="xxx.jpg" width="120" height="100" alt="xxx" /></p> <p class="caption"><a href="http://">xxx</a></p> </div> <div style="clear: left;"> 同じ画像を試しに５つほどこのように横並べにしてみたのですが、この部分の画像がまったく表示されません。作成ソフトalphaeditでは表示されます。 よろしくお願い致します。
- web2525
- ベストアンサー率42% (1219/2850)
ホームページ作成ソフトのプレビューではPC内部のデーター ブラウザではネット上のデーター それぞれを読み込んでいるのであれば、画像のUPロードが正常に出来ていないのでは？ 両方でPC内部のデーターを読み込んでいるのであれば違う原因があるのでしょうが、ちと思い当たることがない
補足
ご回答ありがとうございます。 ブラウザと言ったらいいのかどうかわからなかったのですが、UPロードする前のHTMLファイルからPCで開いたとき表示ができません。
補足
いろいろと考えていただき本当にありがとうございます。 回答いただいたcssで試してみたのですが、レイアウトがくずれてしまいました。 下記のレイアウトを参考にしていて、cssは外部ファイルにしています。 http://matthewjamestaylor.com/blog/ultimate-2-column-left-menu-pixels.htm 試しに、こちらに同じやり方のcssとhtmlを追加してみたら問題なく表示されたので、 何が違うのかさっぱりです。何か考えられることはありますでしょうか。