

はじめまして。
現在、Dreamweaverでホームページを作成しています。
横幅ジャストサイズ(正確には10pxのスペース画像含む)でメニューを並べています。
一通り画像のレイアウトが済んで、いざそれぞれのメニューボタンにリンクを張ると、なぜかボタンの枠が紫色に囲まれ、あげくには少しずつボタンが横に移動してしまいます。
そして、最後のメニューボタンが収まりきらず下に回ってしまいます。ちなみにCSSで作成しています。
ブラウザでプレビューしてみたところ、画像の周りの紫色の枠は残ったままで、最後のボタンは見えません(これはCSSで縦の枠幅を指定しているからとは思うんですが・・・)
リンクを張ってもhtmlをいじるだけで、デザイン上はかわらないと思うのですが、そうではないのでしょうか?
以前も、コードを通常の改行(<br>じゃない)するとレイアウトが崩れた記憶があります・・・
この現象の解決方法などはあるのでしょうか?
No.1ベストアンサー
- 回答日時:
スタイルシートで
a img{border:none;}
を加えましょう。
(a要素の中のimg要素の枠線を消去する指定)
ありがとうございます。
先ほど自分でも調べて画像に関する解決方法はわかったのですが、これってものすごく初歩中の初歩みたいですね・・・
いままでもいくつか作ったりしているのにこのような現象は起きなかったのに・・・
あ、a要素の中野imgを指定する方法は知りませんでした!
本当にありがとうございました。
ちなみに改行によってレイアウトが崩れるのはなんでなんでしょうか?
もし、ご存知でしたらどうかよろしくお願いいたします。
No.2
- 回答日時:
ソース中で改行を行った場合には、ブラウザが当該個所を改行コードと見なして半角スペースに自動変換することがあるようです。
変換された「スペース分の幅」(今回質問ではimg要素のborderの幅)が発生するために、本来の幅(横幅ジャストサイズ)よりも広くなり、結果として器(横幅)に入りきらないために溢れ出てレイアウトが崩れる、ということのように思えます。
ソースの書き方によりli要素間で隙間が空くことがあるのは比較的有名ですが、「改行によってレイアウトが崩れるのはなんでなんでしょうか?」という質問(現象)の原因も同じことではないかと思われます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Hタグを改行禁止にしてspanのよ...
-
高校1年生情報の問題について。
-
C#でタグを削除する方法
-
Windowsのformでtextareaに入力...
-
テーブルの幅を固定するとnowra...
-
Labelでは1行しか書けない
-
<br style="clear:both;">って...
-
<h>と<p>の違い
-
GoogleChromeでレイアウトが左...
-
XMLを作成してもタグしか表示さ...
-
掲示板からIPアドレスってど...
-
キーフレーム
-
表示中のURLなどをバッチファイ...
-
ハイパーリンクからメニュー無...
-
Cartoon Animator 4の、出力時...
-
aviutlで最後まで動画が読み込...
-
tripodの無料HPに詳しい方
-
ZARAの商品のタグの外しかた
-
AfterEffectsでイージーイーズ...
-
pixivの消えないブックマークタ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Hタグを改行禁止にしてspanのよ...
-
H1タグに改行の<br>を使う
-
Windowsのformでtextareaに入力...
-
高校1年生情報の問題について。
-
改行できる・できない入力ボッ...
-
\\n \\r \\t について
-
「:」について
-
Dream Weaverの改行時にTabキー...
-
テーブルのセルデータを自動改...
-
ブラウザでのタイ語の改行について
-
<br />タグの、brの後の半角ス...
-
preタグがプロの現場であまり使...
-
Dreamweaverの改行コードをLFに...
-
mailtoで本文に改行を入れたい
-
長いURLを途中で改行(折り返す...
-
HTML を自動で改行してくれるツ...
-
<table>の幅の設定のことでの疑問
-
画像にリンクを張るとレイアウ...
-
なぜか<p> </p>が挿入され...
-
テキストエディタで文字列を揃える
おすすめ情報