• ベストアンサー

ロールオーバーを立てに並べると隙間があいてします

ホームページのロールオーバーイメージを 立てに並べたところ　どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか？ ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img　src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。

  • tyep
  • お礼率80% (4/5)

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

  • ベストアンサー
  • Yohjira
  • ベストアンサー率66% (14/21)
回答No.3

brタグを使わない理由が気になるところですが、それはおいといて。 3組のaタグとimgタグを改行なしでつなげれば、 隙間が開かなくなると思います。

tyep
質問者

お礼

ありがとうございます 改行をすべて削除したら 隙間が消えました。

その他の回答 (3)

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.4

headタグに <style type="text/css"> a{ display:block; float:left; } </style> を記述してみては？ 一部のアンカーだけに適応したいならclassを設定するように

tyep
質問者

お礼

ありがとうございました。 参考にさせていただきます。

  • Yohjira
  • ベストアンサー率66% (14/21)
回答No.2

元のソースには改行の記述がないですけど、何らかの方法で改行してますよね。 改行はbrタグを使うなら、 <html> <body> <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <br /> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img 　src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <br /> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"><img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> <br /> </body> と書くと、IEでは隙間が開きますね。 <html> <body> <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a><br /> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img 　src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a><br /> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"><img src="navi1" name="mn2" width="203" height="48" border="0" /> </a><br /> </body> と書いたら隙間は無くなるような気がします。

tyep
質問者

お礼

ご丁寧にありがとうございました。

tyep
質問者

補足

お返事ありがとうございます。 質問を書いたものです。 <br> タグをなくすためにボックスをロゴいっぱいいっぱいの横幅をにして立てに並べました。 なので　<br>は使用してないです。 <br>タグを使用してないのにもかかわらず IEのみ隙間が開いてしまうので　悩んでいます。 ファイヤーフォックスやオペラ　などは　まったく問題ないのですが・・・・ 質問がわかりすらくてすいません。

  • SAYKA
  • ベストアンサー率34% (944/2776)
回答No.1

ホワイトスペース　　でしらべてごらん。 http://www.google.com/search?lr=lang_ja&q=html%20%E3%83%9B%E3%83%AF%E3%82%A4%E3%83%88%E3%82%B9%E3%83%9A%E3%83%BC%E3%82%B9

tyep
質問者

補足

ホワイトスペースを削除したら 隙間がなくなりました ありがとうございます。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • "戻る"　と　"ロールオーバー"

    前のページへ戻るボタンをつくりました。 ロールオーバーはできますが、前のページへ戻れません。 どこが悪いのかわかる方、回答お願いします。 <a href="javascript:history.back()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navi11','','images/form/1101.gif',1)"><img src="images/form/11.gif" alt="前のページへ戻ります。" name="navi11" width="190" height="26" border="0"></a>

  • htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？

    お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>

    • ベストアンサー
    • HTML
  • changeImgによる画像の入れ替え時のIEにおける不安定さ

    changeImgで画像を入れ替えたいのですが、 FireFoxでは問題ないのですが、 IEだと、画像が表示されない、半分だけ表示される、等の現象が発生してしまいます。 表示されないときに右クリックの画像を表示するにすると表示されます。 http://inoue.sub.jp/test/ ソースは ************************** function changeImg(iName,img){ document.images[iName].src=img; } ************************** <img height="344" border="0" width="230" name="tar01" id="tar01" alt="" src="img/01.jpg"/> <a onclick="changeImg('tar01','img/01.jpg');" onmouseout="changeImg('tar02','img/07.jpg')" onmouseover="changeImg('tar02','img/08.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar02" id="tar02" alt="" src="img/07.jpg"/></a> <a onclick="changeImg('tar01','img/02.jpg');" onmouseout="changeImg('tar03','img/09.jpg')" onmouseover="changeImg('tar03','img/10.jpg');" href="javascript:void(0);"> <img height="83" border="0" width="50" name="tar03" id="tar03" alt="" src="img/09.jpg" class="pl5"/></a> になります。 何処がおかしいのでしょうか？どうぞよろしくお願いいたします。

  • メニュー作成方法を教えて下さい。

    JavaScriptとHTMLを使ってＨＰを作成しています。onmouseoverとonmouseoutを利用して（トップメニューにマウスを置くとサブメニューが出るという）メニューを作りたいんですが、上手くいきません。 トップメニューにマウスを置くとサブメニューーは出ますが、トップメニューにマウスを置いてもいない時に、サブメニューの画像が×となって出ています。この×が表示されないようにするにはどうすればいいのかわかりません。 どうすればいいのでしょうか。 教えて下さいm(__)m function showMenu(selfObj){ document.menu1.src="bana/albumb.jpg"; document.menu2.src="bana/mib.jpg"; document.menu3.src="bana/picb.jpg"; if(selfObj==0){ document.menu0.src="bana/prr.jpg"; } if(selfObj==1){ document.menu1.src="bana/albumr.jpg"; } if(selfObj==2){ document.menu2.src="bana/mir.jpg"; } if(selfObj==3){ document.menu3.src="bana/picr.jpg"; } } function hideMenu(){ document.menu0.src="bana/prb.jpg"; document.menu1.src=""; document.menu2.src=""; document.menu3.src=""; } <a href="4.html" onMouseout="hideMenu();" onMouseover="showMenu(0);" class="navi0"> <img src="bana/prb.jpg" alt="自己紹介" name="menu0" id="menu0" border color=""> </a><br /> <a href="5.html" onMouseout="hideMenu();" onMouseover="showMenu(1);" class="navi1"> <img src="" alt="アルバム" name="menu1" id="menu1" border color=""></a><br /> <a href="6.html" onMouseout="hideMenu();" onmouseover="showMenu(2);" class="navi2"> <img src="" alt="ミッキー" name="menu2" id="menu2" border color=""> </a><br /> <a href="7.html" onmouseout="hideMenu();" onmouseover="showMenu(3);" class="navi3"> <img src="" alt="写真" name="menu3" id="menu3" border color=""> </a>

    • ベストアンサー
    • HTML
  • 画像の切り替え

    教えてください。 画像がはじめに1つ表示されていて、 横にサムネイルが2つあり、 サムネイルのマウスオーバーで、その画像が大きく表示され、 マウスオーバーで、元の画像へと表示が戻り、 サムネイルのクリックで、その画像が大きく表示されたまま固定となる ということがしたいのですが、 マウスオーバー、マウスアウトはとりあえず実装できたのですが、 マウスクリックを実装しても、 やはり、マウスアウトで画像が切り替わってしまいます。 どうしたらいいのでしょうか？ <IMG src="images/a.jpg" id="display" name="display" width="100" height="100" border="0"> <a href="javascript:;" onClick="document.display.src='images/a.jpg'" onMouseOver="MM_swapImage('display','','images/item/a.jpg',1)" onMouseOut="MM_swapImgRestore()"> <IMG src="images/item/a.jpg" width="20" height="20" border="0" name="thumb1" id="thumb1"> </a> <a href="javascript:;" onMouseOver="MM_swapImage('display','','images/b.jpg',1)" onMouseOut="MM_swapImgRestore()" onClick="document.display.src='images/b.jpg'"> <IMG src="images/b.jpg" width="20" height="20" border="0" name="thumb2" id="thumb2"> </a> 以上 よろしくお願いします。

  • このCSSどこが間違ってる？中央揃えで二段組みみするには？

    お世話になります。 CSS初心者なのでもしかしたら基本的な質問をしているかもしれませんがどうかお許しください。 現在、中央揃えコンテンツのサイトを作ろうとしているのですが、各コンテンツをdiv分けして内容部分となるコンテンツ（leftmenu/centermenu）を二段組みにしたいと思っています。ところが何故かcentermenuがleftmenuの下に表示されてしまいます。これがCSSのどこがおかしいのでしょう？一応本を読みながら書いたのですが、おかしいところがあったらどうか教えてください。 div#header{width:800px; margin-left:auto; margin-right:auto; } div#container{width:800px; margin-left:auto; margin-right:auto; } div#contens{width:800px; margin-left:auto; margin-right:auto; div#leftmenu{width:157px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF} div#centermenu{width:643px; float:right; margin-left:auto; margin-right:auto; background-color:#FFFFFF} } div#footer{width:800px; margin-left:auto; margin-right:auto; clear:both; } body{background-attachment: scroll; background-color: #990000; background-image: url(bg-photo.jpg); background-repeat: repeat-y; background-position: center; } ＨＴＭＬものせておきます。 </head> <body onLoad="仮.jpg')"> <div id="header"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="133"> <param name="movie" value="top.swf"> <param name="quality" value="high"> <embed src="toonie-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="133"></embed> </object> </div> <div id="container"> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','home02.jpg',1)"><img src="home01.jpg" name="Image1" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','news02.jpg',1)"><img src="news01.jpg" name="Image2" width="134" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','company02.jpg',1)"><img src="company01.jpg" name="Image3" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','work02.jpg',1)"><img src="work01.jpg" name="Image5" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','result02.jpg',1)"><img src="result01.jpg" name="Image6" width="133" height="53" border="0"></a><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','contact02.jpg',1)"><img src="contact01.jpg" name="Image4" width="133" height="53" border="0"></a> </div> <div id="contens"> <div id="leftmenu"><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','vuk109-bottom2.jpg',1)"><img src="vuk109-bottom.jpg" name="Image7" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image9','','blog2.jpg',1)"><img src="blog.jpg" name="Image9" width="157" height="69" border="0"></a><br> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image8','','link2.jpg',1)"><img src="link.jpg" name="Image8" width="157" height="69" border="0"></a></div> <div id="centermenu"> <div align="left"><img src="index-bar.jpg"></div> </div> </div> <div id="footer"> <div align="center"> <p><img src="line.gif" width="800" height="5"><br>Copyright (C) 2007 株式会社未定. All Rights Reserved.</p> </div> </body> </html>

  • ロールオーバー画像の上にテキストを置く方法

    サイトのヘッダのメニューは現在ロールオーバーで表現しています。その画像上にテキストを置きたいのですが、記述方法がわかりません。ぜひ、ご教授ください。。 ----------- <td> <a href="javascript:main_location('http://アドレス);" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mn_01','','/images/mn_01o.gif','mn_01txt','','/images/mn_01txto.gif',1)"><img src="/images/mn_01.gif" width="150" height="24" alt="main" border="0" name="mn_01"></a> </td> --------- 上記が対象部分のhtmlです。この中にどうやってテキストを記述していいのでしょうか？ よろしくお願いします。

  • <div>と<div>の隙間を無くす方法

    ヘッダーの<div>を作って、その下に横長（ヘッダーと同じ長さです）ナビのメニューの<div>を作りたいのですが、ヘッダーの下とナビの上に20ｐｘほどの隙間が空いてしまいます。なぜでしょうか？マージンを0に設定してもできてしまいます。 また、ナビメニューはボタンの画像にして文字を埋め込んであります。全部で6つです。それをulで右にフロートさせ、liを左にフロートさせています。DWで作っていますが、DWのプレビュー画面で確認すると、メニューがulで右にフロートしてありますが、liが左にフロートされてなくブロック状態で表示されます。しかし、IEやfirefoxなどのブラウザで確認すると、ちゃんとインライン表示されます。それが原因しているのでしょうか？ また、メニューボタンはjavascriptでスワップイメージにしました。 どなたかわかる方いらっしゃいますか？ とても困っています。できましたら至急にお願いいたします。 コードを載せておきます。 <div id="header"> 　　 　<div id="aa"> <h1>*********</h1> <h2>*********</h2> <p>**********<br /> *************</p> </div><!--aa--> 　　　　<div id="bb"> <p>********</p> </div>><!--bb--> </div><!--header--> <!--navi--> <div id="navi"> <ul #menu> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> <li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> li><a href="#" onmouseover="MM_swapImage('','','',1)" onmouseout="MM_swapImgRestore()"><img src="" name="" /></a></li> </ul> </div> <!--navi--> ヘッダー部分のcss #header{ width: 800px; height: 120px; background-image: ***; background-repeat: repeat-y; margin: 0px; } ナビ部分のcss #navi{ width: 800px; height: 35px; } } ul#menu{ float: right; display: inline; margin: 0; } li{ float: left; margin: 0;

    • ベストアンサー
    • CSS
  • スワップイメージとロールオーバーの組み合わせで…

    上の画像をクリックした時に下の画像が切り替わるページを 作ったのですが、上の画像をmouseoverで切り替えるのではなく、 マウスを動かしてもクリックしたら下の画像と連動して上の画像も 切り替えることってできますか？？ javascriptは初心者で、まったくわからずです(>-<) <SCRIPT LANGUAGE="JavaScript"> function doPic(imgName) { stepOn = ("" + imgName); document.step.src = stepOn; } </script> （中略） <a href="javascript:doPic('step1.gif');"><img src="img1.gif" name="img" border="0" onmouseover='this.src="r_img1.gif"' onmouseout='this.src="img1.gif"'></a> <a href="javascript:doPic('step2.gif');"><img src="img2.gif" name="img" border="0" onmouseover='this.src="r_img2.gif"' onmouseout='this.src="img2.gif"' ></a><br> <img name="step" src="step1.gif"> ↑こんな感じで作っております<(_ _)>

  • 1つの画像オンマウスで3つの画像を切り替えたい！

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する