ホームページを作るときに画像が先にある場合に、画像合わせて文字を入力したい！

ホームページを作るときに画像が先にある場合に、画像合わせて文字を入力したい！

先に例の画像のようにホームページの壁紙ができてしまっている状態で、その枠にあわせて文字を入力して行きたいと思っています。

ホームページピルダーのどこでも配置モードだとIEではうまく配置できますが、Firefoxやグーグルチャームではうまく表示できません。そのほかの方法でうまく枠にあわせるいい方法があったら教えてください。PHPやCSSでも可能でしょうか？

No.2 ベストアンサー 回答者： salonpath 回答日時： 2009/08/10 03:07

どこでも配置モードは、cssのpositionですよね？

position以外の方法といってもhtml+cssでコーディングできるなら特に難しい事は何もないです、cssは使わないと出来ないと思いますが、phpでも可能でしょう（どの部分でphpを使いたいのかわかりませんけど）。

具体的には要素毎のhtmlを書いて、cssのmarginとpaddingとfloatで位置を整えて、必要とあらばテキストブロックにoverflowを設定するだけです。
コーディング中の確認ブラウザはIE以外のモダンブラウザを使って、希望の位置に配置できたらIE用の値を設定していくのが慣れないうちは早いと思います。

背景画像はスライスをしてもいいし、高さ固定ならスライスをしなくてもbodyの背景に貼るだけです。

No.5 回答者： noname#140925 回答日時： 2009/08/11 09:01

＞もしIE8で作った場合、IE7.6では逆にレイアウトが崩れるということになりますよね？？

これまでのIEは標準規格無視の独自解釈でしたが、IE8でようやく標準規格通りにCSSを解釈するようになり、標準規格に合わせて作ればIE8でもFirefoxでもクロームでも同じように表示できるようになりました。

独自仕様のIE6やIE7に合せるのではなく、標準規格に合わせて作成した上で、古い非標準な独自規格のブラウザへの対応は見切りましょう。

普通に使っていればWindowsUpdateによる自動更新でIE8への乗り換えが推奨されますからIE8に乗り換える人が殆どです。

全世界的にも「さっさと新しいブラウザに乗り換えろ！いつまでもIE6とか使ってんじゃねーよ！」という旨のキャンペーンが大々的に行われています。

貴方も標準規格に沿ってページを作成した上で、以下のバナーコードを張り付けて、非標準なブラウザへの対応は行わない、正常なブラウザへの乗り換えを推奨している事を明示しておきましょう。

[参考]Code Samples - IE6 No More
http://www.ie6nomore.com/code-samples.html

No.4 回答者： kiyomac#1 回答日時： 2009/08/10 14:22

レイヤー構成とし、位置のプロパティを変更すれば可能です。

尚：IE6は『独自解釈』をしてますので、IE7以上に変更して下さい。
<DIV class=Cont id=disp
style="Z-INDEX: 7; LEFT: 372px; WIDTH: 281px; POSITION: absolute; TOP: 123px; HEIGHT: 162px; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000; font-size: 24px; color: #0;">私のウエブサイト私のウエブサイト私のウエブサイト</div>
このコードを複数作成してから『LEFT』、『TOP』を変更し、画像の上に置きます。（Z-INDEXはレイヤーの重なり順序です。）
尚：テーブルタグでのレイアウトはお薦めしません。

No.3 回答者： noname#140925 回答日時： 2009/08/10 10:45

使用しているIEは6や7ですか？

もしそうなら、先ずはIE8にしてみましょう。
そうすれば、IEでも崩れている事が確認出来ると思いますが。

ホームページビルダーが入っているIEのエンジン次第でレイアウトを行ってくれるのなら、IE8に合せてレイアウトすれば、Firefoxやクロームでも正常に表示出来るようになると思いますよ。

古いIEに合わせてしかレイアウト出来ないのなら、ホームページビルダーを捨てる所から始めましょう。
頑張って手組でCSS書けばレイアウト出来ると思いますし。

この回答への補足

もしIE8で作った場合、IE7.6では逆にレイアウトが崩れるということになりますよね？？

補足日時：2009/08/10 10:56

No.1 回答者： nakayan57 回答日時： 2009/08/10 00:33

テーブルを使ってみましたか？

画像の位置に合うサイズのテーブルを作成（必ずボーダー（枠線）サイズ０にして表示しないように）して
そのテーブルに文字を入れていけばうまくいくと思います。

この回答への補足

それもやってみましたがうまくいきませんでした。

補足日時：2009/08/10 00:59