• ベストアンサー

レイアウトがおかしくなる現象について

GoLive6を使ってHPを作成しています。 どうしてもレイアウトがうまくいかないです。。。 ブラウザで試しにみると上下が離れてしまいます。 サイドバーがある事を考えたとしても 間が開きすぎています。 初心者なのでソースを見ても何が悪いのか全くわかりません。。。 macOS9.2を使用しています。 どなたかアドバイスお願いいたします。。。。

質問者が選んだベストアンサー

  • ベストアンサー
  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.5

添付された画像を見る限り分かる事は、 もしかして「テキストボックス」とその下のテキスト(*キリバン千~の部分)が予想以上に「離れてる」って事でしょうか? だとしたら、それはkuunosuke616さんの閲覧環境によるものだと思います。 私の環境では、一行の改行程度しか離れていませんから。 添付された画像ほどは「離れて」いませんよ。 *当方、Win XP sp2 ; IE6 sp2で見ています。 違ってたらごめんなさいね。 それからこれは余談ですが、#3さんも指摘してますが、 ダグが汚いです ^^; ↓これで十分だと思いますが… <html> <body> <table width="223" border="0"> <tr> <td height="356"></td> </tr> <tr> <td><div align="center"> <pre><textarea name="textareaName" rows="13" cols="20" readonly> ◆更新情報◆ 2006.05/14 サイトリニューアル</textarea></pre> <font size="1">*キリバン千・万単位で受付中*<br> 2003.9since<br> MacOS9.2製・IE推奨<br> モニタ1152×870推奨<br> </font> </div> </td></tr> </table> </body> </html>

kuunosuke616
質問者

補足

皆様、ありがとうございます。 見ての通り、私はMac使用で、winで見るとtorayoshiさんが言う通り ちゃんと表示される様です。 ですが出来るならMacでも正常に見える様にしたいと思い 質問させていただきました。 GoLive6だけでなく5でもこの様な現象が起こり 頭を抱えていました。 ソースが分かればどうってことないのかもしれませんが 素人ですので、作成ソフトを使って作っています。 GoLive自体、簡単ですがあまり良いソフトではないのかな~と 最近になってそう考えております。 簡単に配置できても、ソースを見るとメチャクチャだったり。 でも私みたいな素人には、ブラウザでちゃんと表示されてればいいかっていう考えになっちゃうんですよね。。。 もっと詳しくなりたいもんです。 皆様のご丁寧な回答、とても嬉しく思います。 参考にさせていただきます。ありがとうございました。

その他の回答 (4)

  • chinensis
  • ベストアンサー率40% (54/132)
回答No.4

もしかして「更新情報」のtextareaが下に配置されてしまうことが質問内容なのでしょうか? だとすると、 <body bgcolor="#ffffff"> <table width="223" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="652" showgridx showgridy> <tr height="356"> <td width="222" height="356" colspan="5"></td> <td width="1" height="356"><spacer type="block" width="1" height="356"></td> </tr> このソースの中のheightが原因です。 とくにこの一行の高さが356pxあるので(しかも中身はスペース)、大きくスペースが取られてしまっています。 正確な(ご希望の)レイアウトが判りませんので、とりあえず「上下が離れている」個所をピックアップしてみました。

kuunosuke616
質問者

補足

  • nyam_nyam
  • ベストアンサー率33% (19/56)
回答No.3

#2さんの補足要求にちゃんと答えてらっしゃいませんよ。 「何」と「何」が離れているんですか? とりあえず、おそらくはグリッドの悪影響なのだと思いますが、テーブルに、必要の無さそうなセルとか、意味の無さそうなセル結合とかがあるのは気になるんですが・・・まあ、それは置いといても、<spacer>というタグはネスケオンリーのタグですね。 ブラウザ依存しないスペースを入れるためには、1×1pixの透過gifを作って(spacer.gifというファイル名をつけることが多いですが、もちろんファイル名はなんでもいい)、それを<img>タグで指定して、width・heightを開きたいサイズにするという方法が一般的でしょうか。 ちなみに、レイアウトグリッドからテーブルへの変換には、やはりいろいろ問題もあるようで、特に6では何やら機能一新されているようですので(どう変わっているのか知りませんが・・・)、そこらへんの問題かもしれません。 下の参考URLでは、なんかちょこっと設定いじったらうまくいったようですが、IEで<spacer>タグが使えない以上、IEではやっぱり崩れてるんじゃないでしょうかね。

参考URL:
http://hotwired.goo.ne.jp/webmonkey/2002/28/index4a_page9.html
kuunosuke616
質問者

補足

あのすみません、、、 私の添付の仕方が悪いのでしょうか。。。 見本の画像をアップしてあるURLを貼ったのですが 削除されてしまいました。。。。。 質問の段階でも貼ってあったはずなのですが 気付いたらその部分だけ綺麗に削除されています。。。 参考URLの箇所に貼らないとダメなんでしょうか。 教えてgooにまだ慣れていなくて…無知ですみません。 夜にでも再度、添付させていただきます。

  • torayoshi
  • ベストアンサー率62% (910/1449)
回答No.2

何が上下に離れているんでしょうか。 このソースで見れるのはテーブルとその中のテキストボックスだけです。 それからブラウザにIEを推奨してますが、IEでは無視されるタグが多く見られます。 補足をお願いします。

kuunosuke616
質問者

補足

どうしてもブラウザでみると離ればなれになります。 ところでIEで無視されるタグとは一体なんでしょう? ゴーライブのみでHPを作成しておりますので 何が意味のないタグか全くわかりません。。。 (もちろんソースでもいじれますが、ほぼ初心者の為手をつけておりません) 大分前ですが、ゴーライブについて質問したときも 「ソースがめちゃくちゃだ」 と言われたことがありますが、 アップロードをしてIEでも(win.mac共) 他のブラウザでも問題なく見れているっぽいので 特に気にしていませんでした。。。

noname#19206
noname#19206
回答No.1

全体或いは一部のソースを提示していただけると分かるかもしれません。 貴方にソースが分からなかったとしても、ソースを見せることでどこが悪いか指摘してくださる人がいます。 表示状態を見ただけで、つまり視覚的にソースを解析できる人はほとんどいません。 もっと情報が欲しいのでソースを宜しくお願い致します。

kuunosuke616
質問者

補足

ありがとうございます。 これで大丈夫でしょうか? 文章はちょっといじったので多少画像とは ちがうと思いますが、よろしくおねがいします。 <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=x-sjis"> <meta name="generator" content="Adobe GoLive 6"> <title>タイトル</title> <style type="text/css" media="screen"><!-- body { background: url(image/top/tophidari.gif) no-repeat fixed left top } --></style> </head> <body bgcolor="#ffffff"> <table width="223" border="0" cellspacing="0" cellpadding="0" cool gridx="16" gridy="16" height="652" showgridx showgridy> <tr height="356"> <td width="222" height="356" colspan="5"></td> <td width="1" height="356"><spacer type="block" width="1" height="356"></td> </tr> <tr height="210"> <td width="18" height="210"></td> <td content csheight="207" width="185" height="210" colspan="3" valign="top" xpos="18"> <div align="center"> <textarea name="textareaName" rows="13" cols="20" readonly>◆更新情報◆ 2006.05/14 サイトリニューアル</textarea><br> </div> </td> <td width="19" height="210"></td> <td width="1" height="210"><spacer type="block" width="1" height="210"></td> </tr> <tr height="85"> <td width="27" height="85" colspan="2"></td> <td content csheight="80" width="165" height="85" valign="top" xpos="27"> <div align="center"> <font size="1">*キリバン千・万単位で受付中*<br> 2003.9since<br> MacOS9.2製・IE推奨<br> モニタ1152×870推奨<br> </font></div> </td> <td width="30" height="85" colspan="2"></td> <td width="1" height="85"><spacer type="block" width="1" height="85"></td> </tr> <tr height="1" cntrlrow> <td width="18" height="1"><spacer type="block" width="18" height="1"></td> <td width="9" height="1"><spacer type="block" width="9" height="1"></td> <td width="165" height="1"><spacer type="block" width="165" height="1"></td> <td width="11" height="1"><spacer type="block" width="11" height="1"></td> <td width="19" height="1"><spacer type="block" width="19" height="1"></td> <td width="1" height="1"></td> </tr> </table> <p></p> </body> </html>

関連するQ&A