ホームページ作成で画像にリンクを設定すると左右に隙間ができ、レイアウトが崩れるのですが。

質問

ホームページを作成しているのですが、トップのメニューボタン（画像）にリンクを設定すると左右に隙間ができ、横に並んでいる５つのメニューボタンのうち、１つが改行されてしまい、レイアウトが崩れてしまいます。５つのボタンは、divタグでくくってあり、スタイルシートで横幅を設定してあります。リンクを設定していない時は問題ないのですが。どのようにしたら解決出来るでしょうか。ソフトはドリームウィーバー８を使っております。よろしくお願いします。

回答No.3

noname#39970 · ベストアンサー

>１つでも画像にリンクを設定すると

>>marginとpaddingをどちらも0に設定していない
aタグでも同じ事

お礼

おかげさまで解決しました。本当にありがとうございました。

回答No.2

noname#39970

タグとタグの間に空白文字が有るのが原因
つまり

<div>
<img>
<img>
<img>
</div>

一見完璧に見えるが「改行」という名の空白文字が入る。
ブラウザは連続した空白文字を1つの空白に置き換える。という仕様による。

こうするしかない

<div><img><img><img></div>

あるいは

<div><
img
><
img
><
img
></div>

認識できない可能性を考えると「<img」を厳守してsrcやaltの間に改行とかの方が安全

<div><img
src=""><img
src=""><img
src=""></div>

img自体が全て1つずつdivでくくられている場合はmarginとpaddingをどちらも0に設定していない事が原因

お礼

大変参考になりました。解決いたしました。ありがとうございました。

補足

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

<div id="topmenu"><img src="image/c1.gif" alt=""/><img　src="image/c2.gif" alt="" /><img src="image/c5.gif" alt="" /><img src="image/c9.gif" alt="" /><img src="image/c14.gif" alt="" /></div>

のようにリンクを設定していない時は大丈夫なのですが

<div id="topmenu"><a href="dog.html"><img src="image/c1.gif" alt=""/></a><img src="image/c2.gif" alt="" /><img src="image/c5.gif" alt="" /><img src="image/c9.gif" alt="" /><img src="image/c14.gif" alt="" /></div>

のように１つでも画像にリンクを設定するとレイアウトが崩れてしまうのですが。よろしくお願いします。

回答No.1

akuhijrwq

ソースは？