ロールオーバーで横に並べる方法がどうしてもわかりません。どなた様かご指

質問

ロールオーバーで横に並べる方法がどうしてもわかりません。どなた様かご指導のほどよろしくお願いします。まず私は以下の記述をしました。

［css］
#image a{
display:block;
width:200px;
background:url(img/1.gif) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
}

#image a:hover{
color:orange;
background:url(img/11.gif) no-repeat;
}

［html］

<div id ="image"><a href="http://index.html"></a></div><!-- image end -->

上記のように実行すると確かにロールオーバー効果は出るのですが、次の画像を実行するために上記と同じ操作をすると、横に並ばずに、縦に並んでしまいます。
横に並べるには、どのようにすればよいものなのでしょうか？

また、以下の記述なのですが一部質問させて頂きたく書かせてください。

#image a{
display:block;
width:200px;　　　←これは画像の幅でしょうか？
background:url(img/1.gif) no-repeat;
height:50px;　　　←この記述は必要でしょうか？
line-height:50px;　←この記述は必要でしょうか？
text-decoration:none;
text-align:center;　　←横に並べるのであれば必要は無いでしょうか？
}

いつも、皆様お手数では御座いますがどなた様かご指導のほどよろしくお願いいたします。

回答No.11

naokita · ベストアンサー

NO.3.4.6.8.10 です。　NO.10の補足も拝見済み。
過去に1000件ほど回答していますが、これほど追記したのは初めてですｗ
今回、pcckitさんの過去歴も調べましたが、基本を勉強していないようで、応用ができないのか？　私の説明が悪いのか？・・・

http://oshiete1.goo.ne.jp/qa5616902.html　も見ました・・・
これもNO.3,NO.6でも指摘しています。この方法は賛否両論
あの回答の全回答者が正解でもあり、間違いでもあるので、
テキストが無いのだから最良の方法はあっても正解は無いのです。
text-indent: -9999pxやコメントアウトなどの回答も出てくるでしょうが、
visibility:hidden;にしろ、隠しテキストの問題もありますし。
http://googlewebmastercentral-ja.blogspot.com/2009/12/google.html
------------------------------------------------------------

失礼ながら、
CSSも含め基本が出来ていないのに応用しようとするから出来ないのです・・・
基本を覚える気がないなら他者のソースをまんまコピーして使うしかありません。
または、無理に横並びにせずテーブル設計すると初心者には簡単です。

＞画像サイズを107から118に変更したところ画像が大きくなった分が白くなってしまいました。
そんな事はありえません。保存方法か表示確認方法が間違っています。
画像を大きくすると言う事は、画像外のスペース枠を作る事ではないので。
どんなソフトで拡大しているのかわかりませんが、
アップロードしている元画像の大きさを確認する事。
適当な新規サンプル画像でテストする事。

次に、、
1.gif、2.gif、3.gif・・・
そんな数値から始まる名前で保存するなんて何処の解説にもないはずです。

＞２、のno-repeatを削除したところ画像が全て表示されなくなりました。
＞これはno-repeatを削除したのですから、当然のこととは思いますが、
そんな事はないし、当然でもない。
no-repeatって事はリピートしないって事だから１枚は表示される。
その逆のno-repeatを削除って事は、繰り返し表示されるって事。
画像が表示されないって事はない。
他との絡みでバグがあれば、background-image のみにするだけ。

削除時の記述に誤記などがあるか、または、何かのソフトでの簡易ビューアでの確認か知りませんが、通常のブラウザで確認する事。

そして、
画像がピッタリはまる幅にするために各widthを変更したのだと思いますが
そもそも、画像が落ちているので計算間違い・・・
落ちない程度の各画像幅に変更する事。
この辺は、画像を加工・訂正する前に一旦枠幅を設計してから、
画像の大きさを考えて加工する。順序が逆。
もしくは、画像の大きさに合わせるなら外枠の大きさを変えるて調整する事。

NO.6でも回答しましたが、
画像の大きさやその外枠（width）を同じ幅に統一すると
CSSが無駄なく簡単簡潔で画像も使いまわし可能です。

http://oshiete1.goo.ne.jp/qa5616902.html
の質問も踏まえて回答すると、
例えば、HOMEなどメニューの文字だけの（背景透過）画像をつくり、
<a><img ここに入れる /></a>

説明が面倒なので、
必要なら以下の試作サイトを要参考。（近日中に削除します）
http://testservers.web.fc2.com/test/test08.html
本来は、divではなく ul li を推薦している事をお忘れなく。
これ以上の解説はしませんので、頑張って下さい。

お礼

naokita様。この度は本当にありがとう御座いました。もっとcssの基本から勉強をしようと思いました。
本当にお手数をおかけしまして、私のために貴重なお時間を費やしてくださいまして、心より感謝申し上げます。ここまで詳しくそして、とても参考となる以下のページまで作成頂きましてとても貴重なご指導を頂いたと、そして私自身とても勉強になりました。ここまでお手数をおかけしてしまい、本当にすいませんでした
http://testservers.web.fc2.com/test/test08.html

naokita様のおっしゃる通り、ロールオーバーを作成する際には今回、作成いただいた3種類の画像が必要となるんでしょうね。
menu-line.gif
menu-back.gif
menu.gif

どうやら私のほうは以下の2種類しかないようでした。

http://desktop10.web.fc2.com/img/1.gif
http://desktop10.web.fc2.com/img/11.gif

よって背景となる、menu-back.gifとmenu.gifの部分が、一緒になっている画像しかなかったようです

ですが、この度は本当にご指導を頂きまして真にありがとう御座います。深く感謝申し上げます。
あとは、自分で色々と勉強をしてみたいと思います。

本当にありがとう御座いました。

回答No.10

naokita

NO.3.4.6.8 です。　NO.9の補足も拝見済み。
-----------------------------------
最初に戻ります。
質問内容に対する全回答者の回答をもう一度読みましょう。
質問内容：
＞width:200px;　　　←これは画像の幅でしょうか？
回答内容：
NO.1さん
＞背景だとwidthとheightは画像と同じでないとおかしな表示になることがあるので、必要でしょう。
NO.2さん
＞違います。ご提示の場合画像は背景として利用されています。
NO.3
＞width:200px; /* 枠の幅 */
-----------------------------------
つまり、pcckitさんは、width:を勝手に画像の幅と思いこんで
width:を変更する事によって画像幅を変更しているつもりでしょうが、
全く違います。
<img width=""　と違い、backgroundは画像の大きさを指定する事は出来ないから。
枠幅よりも画像が小さいから当然隙間が出来ているように見える。
枠同士の隙間は最終画像の右側以外ありません。

画像の本当のサイズや知人の画像サイズや
フォルダってパソコンのフォルダ？　それともサーバのフォルダ？
画像の間違いは無いの？
補足の？の番号から完全に把握出来ないところですが、

解決方法：
１、元の画像幅を加工しなおして全体幅を調整。
２、全てのno-repeatを削除して全体幅を調整。

上記の１or２のどちらか。当然、全体幅を縮小する方法もあるし。

私もM-SOFTさんも何度もご指摘しているのですが・・・

補足

naokita様。いつもご指導ありがとう御座います。確かにご指摘頂きましたとおり、widthは画像の幅とばっかり思っておりました。そこで私は、一番右側に余白が出来るために画像のトータルの横幅が780を達していないために、余白が出来てしまうのだと考え、widthに実際パソコンのフォルダの中に入っている
imgフォルダの中に入っている画像サイズとは異なる、いわゆる知人のホームページに表示されている画像の画像サイズをwidthに入力したわけで御座います。本当に何度もお手数をおかけしております。
ここまで、ご指導を頂いているのに正直申し上げてまだ良く理解できないのが正直なところで御座います

１、元の画像幅を加工しなおして全体幅を調整。
２、全てのno-repeatを削除して全体幅を調整。

上記のようにご指導を頂きましたが、１、は現在パソコンの中に入っている画像のサイズを変更するということですよね？実はこれはやりました。画像サイズを107から118に変更したところ画像が大きくなった分が白くなってしまいました。

２、のno-repeatを削除したところ画像が全て表示されなくなりました。
これはno-repeatを削除したのですから、当然のこととは思いますが、

本当にすいません。でも未だどうしてよいのかわからない状態で御座います。一度bodyに設定している780pxをもう少し、狭くするしか無いのでしょうか？

何度も恐縮で御座います。
今一度ご教示をいただけませんでしょうか？

私には、どうしてよいものかどうしてもわかりません。
本当に何度もすいません。

回答No.9

noname#187541

No.1・５・７です。

No.6での補足に関してですが、背景に画像をno-repeatで設定する場合、背景の領域サイズと画像のサイズが同じでなければいけません。
同じでないと周りに空白が出来ます。
私が思うに、このところがうまく出来ていない気がします。
画像を並べるということですが、その割には提示されているCSSは一つの画像の設定しかないですね。
画像一つ一つ別々に設定されているようですので、長くなるでしょうが、すべて提示されるとどこが悪いか明確に分かると思います。

補足

M-SOFT様。本当にいつもいつも、そして何度もご指導賜りましてありがとう御座います。本当に私は物分りが悪く皆様には、大変お手数をおかけいたします。また、Ｍ－ＳＯＦＴ様のおっしゃる通り、cssについてもひとつの画像の設定しか、掲示していなかったですね。
大変失礼をいたしました。どうかお許しください。早速では御座いますが今回は以下のようにしてみました
お手数では御座いますがご一読いただけませんでしょうか・・・
また、以前のお話に戻ってしまうのですが当時fc2は直リンク禁止と他の方にご指導を頂きましたが、これはfc2で無ければ良いということなのでしょうか？よって今回別のサーバーにアップさせていただき、そのＵＲＬを掲載してみました。

http://hpcabin.lomo.jp/

今回表示している画像のサイズは、現在imgフォルダに保存されている画像のサイズを設定してありますが画像サイズは、以下の通りで御座います。

?
HOME→108×48
ホームページ→107×48
ネッショップ→107×48
ＳＮＳ→107×48
ＳＥＯ→107×48
出版→108×48
お問合せ→107×48

これですとページの一番右側に5mm程度の空白が出来てしまいます。この空白を何とかしたいと考えているのですが、なかなかうまくいきません。上記の画像サイズの合計を計算すると、751となりました。

横幅を780で取っているために、その分空白が出来てしまうのだと思うのですが、前回少し記載させて頂きましたが、私の知人のホームページを見ると今回サーバーにアップしたものと同じ画像がありますが
その画像をクリックして画像サイズを確認すると以下のようになっております。

?
HOME→115×48
ホームページ→118×48
ネッショップ→111×48
ＳＮＳ→107×48
ＳＥＯ→110×48
出版→114×48
お問合せ→107×48

ですが実際にフォルダに保存されている画像サイズは、以下の通りであり、

?
HOME→108×48
ホームページ→107×48
ネッショップ→107×48
ＳＮＳ→107×48
ＳＥＯ→107×48
出版→108×48
お問合せ→107×48

これを、空白が出来てしまうという事から、画像サイズの記述を上記の?にしてみるとページは以下のような状態になってしまいます

http://hpcabin.lomo.jp/test/index.html

どうしたらうまくいくのか私には、どうしてもわかりません。M-SOFT様。本当に何度も何度もお手数では御座いますが、どうか再度のご指導をどうかお願いいたします。
本当に大変恐縮で御座います。

いつもいつも、本当にありがとう御座います。

回答No.8

naokita

NO.3.4.6 です。　補足拝見済み。

当初の質問内容が一旦解決した場合で、追加質問がある場合には
別の質問として新たに質問をたてた方が沢山の回答がつき早く解決出来るでしょう。
--------------------------------

NO.4への補足でURLがあったので、NO.6で回答出来ました。
NO.4への補足がなければ、想像しか出来ません。それがNO.4回答です。

画像間に隙間問題があるのなら、
NO.4の回答を試し検証するしかありません・・・
こちらでは、今回のソースも、新しい画像がどうなっているのか
さっぱりわからないのですから。
＞「さまざまな箇所に空白」
も上下左右何処の隙間なのかわからないのでNO.4以外の回答も出来ないのです。
---------------------------------
HTML,CSSで div を li に変更しても表示は同じです。
NO.4で答えた通り画像の隙間問題を解決しないと同じ結果です。
更に難解になるでしょう。

わからないときには、
初心に戻って、単画像を新規で表示し背景色やborderを付けたり、
該当する全枠に色違いのborderを付けてみたり。
（何処に隙間が原因の追及が容易なるので）
幅や大きさを変更してみる事。
画像に関しては、出来るだけ同じ大きさに統一すると簡単です。
画像を作りかえる事も必要かも。
line-height:50px;　も48pxにしたほうが良いでしょう。不要か。

補足

naokita様。いつもご指導を頂きましてありがとう御座います。日々のご指導深く感謝申し上げます。
本当に助かります。私だけではどうにもならないことで御座います。しかしながら未だに苦戦している状況でござ慰安す。今回M-SOFT様からご指導いただきましたご回答９に、補足をつけさせて頂き再度説明をしています。何度もお手数では御座いますが、よろしければご一読いただけませんでしょうか・・・

本当に、いつもありがとうございます。
そして何度もお手数をおかけして大変申し訳御座いません。

本当にありがとう御座いました。

回答No.7

noname#187541

No.1・５です。

URL拝見しました。No.6で指摘されている通りでしょうね。

no-repeatの件ですが、私の勘違いです。
backgroundプロパティを使っていたのですね。てっきりbackground-imageプロパティだと勝手に思っていました。backgroundであれば問題ないです。

CSSの書き方についてですが、No.5で指摘したように(No.6でも指摘されています)記述に同じ箇所が有り無駄です。
いろいろな書き方があるでしょうが、No.5にサンプルを載せてあるので参考にしてください。

もう一息のようですので、がんばってください。

お礼

M-SOFT様。この度は本当にありがとう御座いました。
css初心者の私には、本当に良い勉強になりました。
ありがとう御座いました。深く感謝申し上げます。

また、ご縁がありましたときはよろしくお願いいたします。

回答No.6

naokita

NO.3.4 です。　補足拝見済み。
--------------------------------
表示検証はしていませんが、ソースをざっと見た感じでは、
この画像は
108px × 48px ですので、高さを 50px を 48px に変更する。

補足への私見では、各画像毎に隙間があると想像しましたが、
一カ所だけだったのですね・・・
最後の画像のCSSを良く見て下さい。若干他と違います。
　float:right;　→　float:left; に変更。
単なる指定ミスですね。
もしくは、float:right;は意図的な設定かな？
外枠の幅を計算してピッタリとハマるような計算なら隙間は無くなる為。

＞また no-repeatを追加したところ
追加ではなく削除って事ですが、そのままでOKです。
NO.5さんご指摘のbackground-repeatプロパティではなくbackgroundプロパティでもまとめて記述・表示可能なので問題ありません。

border:1px solid blue;　などの設定は、
よく、枠組みなど隙間を判断する時に試作時に設定して確認しますので、
試作を確認後の段階で削除して下さい。
--------------------------------

メニューは各制作者によって色々な記述方法があります。
自分の場合は、UL li リストを利用しその中にアンカーを設定します。
リンクメニューはリストですので、
マークアップとしては、UL li を利用するのが妥当だと判断しているからです。
pcckitさんのHTMLは、divで全部囲っていますけどね。

アンカーにはテキストも入れるのですが、テキストを表示する・表示させないに関しては賛否両論あるので、この辺で記述も変わってきます。
画像の表示方法に関しても、今回は２枚の別画像を利用していますが、
２枚の画像をくっつけて１枚の画像にして a:hover時（オンマウス）に background-position でその画像を移動させて表示する方法もあります。
この方が画像読み込み時間の関係で瞬時に表示されます。

また、
このCSSに関してはかなりの無駄があります。
同じ記述が連続していますので、
同じ内容の場合には統一（省略）出来るところは統一すると、
現在のCSSが、かなり簡潔になります。

もし、この画像を利用してオンマスス時に赤ラインだけを付けるのであれば、
li の背景にデフォルト画像を表示させておいて、オンマウス時に赤ライン画像だけをアンカーに設定表示させれば良いのではと単純に考えます。
（実際は制作者のデザインや意図があるとは思いますが）

この辺は、より良くしようと勉強・検索すると各制作者の解説サイトなどで色々な記述方法が見つかりますので、
自分の好みで、それらを参考にして試して下さい。

補足

naokita様。いつもご指導ありがとう御座います。もしよろしければ再度ご質問をさせていただけませんでしょうか？いつも大変お手数をおかけしております。いつもご丁寧にありがとう御座います。

私の勤めている会社の知人がホームページの作成業務などを個人事業、半分は趣味のようですが・・・やっているものがおります。そこで私も将来的にhtmlやcssを覚えれば何かと自身の身になるのではと考え、その知人からホームページファイルをコピーしてもらい、そのファイルを使っては色々と勉強しているところで御座います。しかしそこまでの事で何かがわからないから教えてほしいとか・・・とうわけには行かなく
困っているところで御座います。

そこで、現在行っているロールオーバーの件なのですが、画像サイズがうまく行っていないのか、またさまざまな箇所に空白が開いてしまいました。そこでご質問をさせて頂きたいのですが、ホームページファイルに入っている画像のサイズは以下の通りで御座います。

1.gif 108×48
11.gif 108×48

3.gif 107×48
33.gif 107×48

4.gif 107×48
44.gif 107×48

6.gif 107×48
66.gif 107×48

7.gif 107×48
77.gif 107×48

8.gif 108×48
88.gif 108×48

5.gif 107×48
55.gif 107×48

そこで、実際知人のホームページを見てみて該当する画像を右クリックで画像サイズを確認すると以下のようになっております。

1.gif 115×48
11.gif 115×48

3.gif 118×48
33.gif 118×48

4.gif 111×48
44.gif 111×48

6.gif 107×48
66.gif 107×48

7.gif 110×48
77.gif 110×48

8.gif 114×48
88.gif 114×48

5.gif 107×48
55.gif 107×48

そこで上記を全て足してみるとちょうど782になりました。これで、ちょうど良くなるようなので私が練習で行っている、記述を全て上記の画像サイズに変更したところ、なぜかさまざまな箇所に空白が出来てしまいました。

#image0 a{
display:block;
width:115px;
background:url(img/1.gif) no-repeat;
height:48px;
line-height:50px;
text-decoration:none;
text-align:center;
float:left;
}

#image0 a:hover{
background:url(img/11.gif) no-repeat;
}

<div id ="image0">
<a href="http:///index.html">
</div><!-- image end -->

何かの記述方法が間違っているのでしょうか？それともliやulを持ちいて記述したほうが良いのでしょうか？あいにく私にはulやliの記述の知識は無く、何度もお手数をおかけしておりますが、よろしければご指導いただけませんでしょうか？本当に何度も何度も大変に恐縮で御座います。

どうかよろしくお願いいたします。

回答No.5

noname#187541

No.1です。

CSSを使ったロールオーバーは私も使っていますが、ulとliを使っていました。
そこで、pcckitさんの様に#image aの方法でやってみました。
ただし背景の設定もこの中に書くのは記述に無駄があるので

#menu a{
display:block;
width:133px;
height:42px;
text-decoration:none;
float:left;
}
a.home { background-image:url(/hf/home1.gif); }
a.link { background-image:url(/hf/link1.gif); }
a:hover.home { background-image:url(/hf/home2.gif); }
a:hover.link { background-image:url(/hf/link2.gif); }

この様な感じで試してみました。
pcckitさんは背景の設定にno-repeatを付けていますが、こちらでは画像が表示されませんでした。
そちらでは表示されているようですが、文法的におかしいような気がします。
no-rrepeatは、背景の並び方を指定する値ですが、この値はbackground-repeatプロパティで使用する値のはずです。

空白についてですが、こちらで色々と試した結果、background-repeatにno-repeatを設定し、背景の幅を画像より広くすると空白があいたような並びになります。
no-repeatを設定しないと、画像を繰り返して背景が埋まります。
まずはno-repeatを外して見てみましょう。それでどうなるかです。
これで離れなければ(画像が繰り返されれば)背景の幅が画像より広いと言うことだと思います。幅を画像と同じにしましょう。

回答No.4

naokita

NO.3 です。　補足拝見済み。

現在の環境が未完成なら、それ以上は更に混乱すると思いますので、
OL,ULのli aの横並びは更に複雑になるので一旦忘れましょう。
-----------------------------------
検証：
border:1px solid blue;
を入れると枠線の枠内に隙間が出来ませんか？
それとも枠線外に隙間が出来ますか？
おそらく前者でしょう。
そうすると、
今回の場合、画像の幅サイズが不明なので、あくまで推測ですが
画像の幅と枠幅（107px）のどちらかが間違っているので
width:107px;　の数値を100px程度に小さくするとピッタリ合うでしょう。
後者の場合は、aに対する別のCSSが指定してあるかも。

または、
画像の左右どちらかに白もしくは透明の余白がある可能性があります。
その場合には、background で表示画像の座標をちょっと移動させるか
画像の余白を削除して加工し直すか。
width:？？px;と画像の大きさを基本的には合わせる事。
連続表示可能な左右一致する画像なら no-repeat を削除しても可。

これで、わからなければ、
border:1px solid blue;を追加した時のメニュー部分のスクリーンショットを質問欄下部からアップロード（公開）して下さい。

補足

naokita様。いつも的確なご指導を頂きまして本当にありがとう御座います。css初心者の私には本当に良い勉強になり、深く感謝申し上げます。早速では御座いますがご指導いただいたとおり、今回border:1px solid blue;を追加させて頂きました、ところ画像の周りがボーダーで囲まれ、それ以外は特別変化は見受けられませんでした。
今回、サーバーにアップしてみました。よろしければ見てみてください。

ちなみに、このような場所にURLを張ってよいものかはわからないのですが、・・・

http://desktop10.web.fc2.com/

画像は、全てイメージ画像ですが、widthには、imgフォルダに保存してある画像と同じサイズを入力しています。それでもやはり空白が出来てしまいます。空白が出来る箇所は、HOME画像を左側から数えて６個目と7個目の間になります。ここで少し気になったのですが、前々回は3個目と4個目の間に空白が出来たりもしたのですが、今回は他の箇所は大丈夫のようです。？また no-repeatを追加したところ、当該の画像がほとんど表示されないような状態になりました。何が問題なのか私には全くわかりません。私はまだまだ勉強不足ですね。

また、border:1px solid blue;についてはHOME画像の一番左の画像に対応しているcssにのみ記述をしてみました。

#image0 a{
display:block;
border:1px solid blue;
width:108px;
background:url(img/1.gif) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
float:left;
}

#image0 a:hover{
color:orange;
background:url(img/11.gif) no-repeat;
}

何度も、お手数では御座いますが再度ご指導のほどよろしくお願いいたします。
本当に、何度もお手数をおかけいたしまして申し訳御座いません。
どか、よろしくお願いいたします。

回答No.3

naokita

#image a{
display:block; /* インラインをブロックに変更 */
float:left; /* 追加（縦並びを横並びにフロートさせるCSS） */
width:200px; /* 枠の幅 */
background:url(img/1.gif) no-repeat; /* デフォルトの背景画像 */
height:50px; /* 枠の高さ（画像の高さ次第） */
line-height:50px; /* 行間（テキスト次第） */
text-decoration:none; /* 下線無し */
text-align:center; /* センター配置（） */
}
---------------------
リストを横行に並べるには、
当然ですが、li の親である UL か OL の幅を確保しないと横に並べたくても並ぶスペースが無いので縦に並んでしまう。。
綺麗にするには、枠線や間隔のCSS設定も必要かも。
基本は<a href="index.html"></a>の中に適当なテキストアンカーを入れるのが好ましい。
新旧の各ブラウザで要確認。
必要か不要かは、一旦削除して表示確認すれば判断出来るでしょ？

補足

naokita様。ご指導ありがとう御座います。やはりリストを横に並べるにはULかOLを使うしかないのですね。実は私はULやOLは使ったことが無く操作方法が良くわからず、何か良い方法は無いものかと想い以下のように実行してみたのですが、横には並ぶのですがどうしても画像と画像との間に5mm程度の空白が出来てしまいます。もしよろしければULやOLの記述方法のご指導をいただけませんでしょうか？
よろしくお願いいたします。この度はご指導ありがとう御座いました。

［css］
#image1 a{
display:block;
width:107px;
color:#F0027F;
background:url(img/3.gif) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
float:left;
}

#image1 a:hover{
color:orange;
background:url(img/33.gif) no-repeat;
}

<div id ="image1">
<a href="http://indexhtm">画像ボタン</a>
</div><!-- image1 end -->

回答No.2

fujillin

HTMLやCSSについての解説サイトは沢山ありますので、そのあたりでひとつひとつの意味を調べてみることをお勧めします。
（解説本でもよいですが…）

<div>を横に並べたいというご質問でしょうか？
#image aに　float:left;　を追加すれば可能かと。

以下、どのように表示したいのかで変わってきますが、きちんと意味を把握しておくことが重要ですし、ご自分で設定を変えてみて確認してみればよいのでは？

＞width:200px;　　←これは画像の幅でしょうか？
違います。ご提示の場合画像は背景として利用されています。

＞height:50px;　　←この記述は必要でしょうか？
リンク要素内に要素があれば、無くても良いですが、それぞれの高さを揃えたいのでは？
（要素がないと、高さがなくなる場合もある）

＞line-height:50px;　←この記述は必要でしょうか？
リンク要素内にテキスト等があるのかないのか？1行の高さを指定しています。無ければブラウザのデフォルトになります。
（ご提示のHTMLの場合、何もない）

＞text-align:center; ←横に並べるのであれば必要は無いで
＞しょうか？
リンク要素内の配置を指定しています。並べ方とは直接関係ありません。

回答No.1

noname#187541

こんにちは。

aタグの背景を入れ替えることでロールオーバーを実現しているのですね。
背景だとwidthとheightは画像と同じでないとおかしな表示になることがあるので、必要でしょう。
line-heightは行の高さを指定するプロパティです。
見たところ、複数行に渡る文書(入力)は無いようなのでタグの閉じられているので必要ないように思います。
text-alignはline-height同様に文書が無いので意味がないように思います。
で、横に並べる方法ですが、floatを使うといいでしょう。
CSSの#image aにfloat:left;を追加すればいいでしょう。

補足

M-SOFT様。
この度は、とても貴重なご指導ありがとう御座いました。早速では御座いますが実践させて頂いたところ確かに横に並びました。しかし何故でしょう？
画像と画像との間に隙間が出来てしまうのです。

text-align:left;ではと思い実行してみたところ全く動きはありませんでした。
画像サイズを小さくしたり、大きくしたり、やってみたのですがどうしても動きません。
結果的に現在の画像サイズは、フォルダに保存してある、そのままの画像サイズを設定しております。

よろしければ、ご指導をいただけませんでしょうか？
何度も大変お手数では御座いますが、何卒よろしくお願いいたします。
記述については、以下の通りで御座いますが、よろしければ見てみてください。

#image a:hover{
color:orange;
background:url(img/11.gif) no-repeat;
}

#image1 a{
display:block;
width:118px;
color:#F0027F;
background:url(img/3.gif) no-repeat;
height:50px;
line-height:50px;
text-decoration:none;
text-align:center;
float:left;
}

<div id ="image">
<a href="http:///index.html"></a>
</div><!-- image end -->

上記のようなものが合計で7個記載してあります。

本当に何度も恐縮では御座いますが、ご指導のほどよろしくお願いいたします。