同じ画像なのに同一ページで表示されるところと表示されないところがありま

解決済

質問者：gerberared
質問日時：2010/07/27 09:22
回答数：6件

同じ画像なのに同一ページで表示されるところと表示されないところがあります。環境はIE7とXPです。

表示されないところは、floatを使って横並びにしたところです。レイアウトくずれというのではなく、ホームページ作成ソフトのプレビューでは、ちゃんと表示できているのに、ブラウザだと表示できません。どのような原因が考えられますか。
よろしくお願いします

通報する

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

質問の本文を隠す

回答 (6件)

No.1

回答者： web2525
回答日時：2010/07/27 09:39

ホームページ作成ソフトのプレビューではPC内部のデーター

ブラウザではネット上のデーター
それぞれを読み込んでいるのであれば、画像のUPロードが正常に出来ていないのでは？

両方でPC内部のデーターを読み込んでいるのであれば違う原因があるのでしょうが、ちと思い当たることがない

この回答への補足

ご回答ありがとうございます。
ブラウザと言ったらいいのかどうかわからなかったのですが、UPロードする前のHTMLファイルからPCで開いたとき表示ができません。

補足日時：2010/07/27 11:17

通報する

- 0
- 件

通報する

No.2

回答者： szk9998
回答日時：2010/07/27 13:42

＞同じ画像なのに同一ページに表示されない・・・

意味がよくわかりませんね。
画像を２つ置いたのに、１つだけしか表示されないといったこと
ですかね・・・

ホームページ作成ソフトが何かもわかりませんし、
その表示されない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では表示されます。
よろしくお願い致します。

補足日時：2010/07/27 19:45

通報する

- 0
- 件

通報する

No.3

回答者： outbrave
回答日時：2010/07/28 13:07

1) 表示される xxx.jpg と、表示されない xxx.jpg は、同じ画像ファイルなのですか？

2) ファイル名に問題はありませんか？（日本語であるとか）
xxx.jpg これの実際のファイル名は何ですか？

3) 画面上で表示されない画像の部分は、×印がありますか？
×印がある場合、その部分を右クリックして、プロパティから URL を確認してください。

この回答への補足

ご回答ありがとうございます。

1) 同じ画像なので、画像ファイルに問題があるようではないようです。

2) いろんな画像で試したのですが、どれも横ならびの部分だけが表示できません。ファイル名は、英語もあるし、日本語でもアルファベット表記にしてあります。
3) ×印はありません。

よろしくお願い致します。

補足日時：2010/07/28 13:22

通報する

- 0
- 件

通報する

No.4

回答者： outbrave
回答日時：2010/07/28 15:29

画像ファイルに問題がないということで

画像が表示されるはずの部分ですが、background-color: #d8cab6; と width: 130px; が設定してあるので
色付きのボックスが表示されるはずですが、そこはどう表示されていますか？

この回答への補足

お返事ありがとうございます。

もともとのbackgroundも、色つきのボックスと同じ色だったので、キャプションの文字以外は何も表示されていません。ためしに、ボックスの色をもとのbackgroundと別の黒色に変えてみましたが、やはりもとのbackgroundの色だけで、黒は表示されませんでした。

あと、floatをはずしてみると、たてに画像が表示されました。なぜなのでしょう・・・。floatに原因があるとしても、alphaeditでは横に問題なく表示されているのだからよくわかりません。

補足日時：2010/07/28 16:48

通報する

- 0
- 件

通報する

No.5

回答者： outbrave
回答日時：2010/07/28 18:49

実際の画面が見れればわかるかも知れませんが、今の状況ではわかりにくいですね。

そのページが公開できるなら、不要な部分を削除して見せてください。

自動で広告が表示されたりするサーバーだと、レイアウトが崩れる可能性はあります。

また、実際のページからソースを保存して、ローカル上で表示させるとどうなりますか。

この回答への補足

お返事ありがとうございます。
まだアップロードする前のローカル上でしか動作させていません。ローカル上だと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">

</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に記入するのがおかしいのでしょうか。だとするとどのように修正してよいのかもわからず・・・です。
よろしくお願い致します。

補足日時：2010/07/28 21:22

通報する

- 0
- 件

通報する

No.6ベストアンサー

回答者： outbrave
回答日時：2010/07/29 02:57

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

上のように変更すると、どうなるでしょうか。

複雑な構成になっていますが、画像を表示させるだけなら、もっと簡潔にできるように思います。
ホームページ作成ソフトを使う限り、避けて通れないかも知れませんが。

どのような表示を望まれているのか不明なので、上記方法だけで解決かどうかは疑問です。

この回答への補足

いろいろと考えていただき本当にありがとうございます。
回答いただいたcssで試してみたのですが、レイアウトがくずれてしまいました。

下記のレイアウトを参考にしていて、cssは外部ファイルにしています。
http://matthewjamestaylor.com/blog/ultimate-2-co …
試しに、こちらに同じやり方のcssとhtmlを追加してみたら問題なく表示されたので、
何が違うのかさっぱりです。何か考えられることはありますでしょうか。

補足日時：2010/07/29 11:13

通報する