- ベストアンサー
コード上での改行なのスペースができてしまいます。
はじめまして。 現在CSS勉強中のものです。 メニューのボタンを立てならびに隙間なく配置したいと考えています。 さらに、コードも見やすくできれば1行で書くのではなく、メニューボタンごとに改行したいと考えています。 しかし、コードの上で改行（<br>じゃない）をすると、DW上ではもちろん、Firefoxでも正常に隙間なく見えるのですが、IEだと６でも７でもなぜか下の部分（おそらく改行が影響）に５pxほどの空白が出来てしまいます。 そこでなんとかならないものかとメニュー部分にmarginとpaddingを0pxにしたクラスを指定したり、下の参考サイトにあるように<li>タグを同様にクラス指定したり試行錯誤してやってみたのですが、どうにもうまくいきません・・・ http://www.s-b-c.net/ こちらのサイトはメニューが横型にはなっていますが、ジャストサイズでレイアウトしてるように思うのですが、なぜか空白ができていません・・・以前も、同様の問題にあたった時は上記サイトと同じ横型のメニューだったのですが、その時は右側に空白ができてしまい、最後のメニューボタンがはみ出てしまいました。 できれば改行して見やすく、さらに可能なら<li>を使用して隙間なく配置したいと考えているのですが、どうかご教授いただけないでしょうか？ どうかよろしくお願いいたします。
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
ご自身のソースを提示してください。 なにをどうしたいのかがよくわかりません。
その他の回答 (2)
- yarex2daze
- ベストアンサー率66% (2/3)
リストならこんな感じでしょうか。 <html> <head> <style> * { margin: 0; padding: 0; } img { vertical-align: bottom; /* ←これで問題の隙間はなくなります*/ border: none; /* ←imgのborder="0"が不要になります*/ } ul, li { list-style: none; } #left{ width: 210px; height: auto; float: left; background-color: #FFFFFF; margin-bottom: 25px; } #contents { width: 200px; margin-top: 10px; margin-left: 5px; border: 1px solid #999999; } .menu { margin: 0px; padding: 0px; width: 200px; height: 35px; }/* ↑このクラスは不要かと*/ </style> <body> <div id="left"> <div id="contents"> <img src="img/contents.gif" alt="hoge" width="200" height="20" /> <ul> <li><a href="index.html"><img class="menu" src="img/home.gif" alt="hoge" width="200" height="35" /></a></li> <li><a href="menu.html"><img class="menu" src="img/menu.gif" alt="hoge" width="200" height="35" /></a></li> <li><a href="special.html"><img class="menu" src="img/special.gif" alt="hoge" width="200" height="35" /></a></li> <li><a href="coupon.html"><img class="menu" src="img/coupon.gif" alt="hoge" width="200" height="35" /></a></li> <li><a href="qanda.html"><img class="menu" src="img/qa.gif" alt="hoge" width="200" height="35" /></a></li> <li><a href="contact.html"><img class="menu" src="img/contact.gif" alt="hoge" width="200" height="35" /></a></li> </ul> </div> </div> </body> ※javascript部は長いんで割愛しました。 余談ですがロールオーバーもCSSで書くと簡潔になりますよ。
お礼
ありがとうございます！！！ できればリストで作ってみたかったので、これもすぐに試してみます！ ちなみにNo.1の方の方法で、横並びのを試してみたのですが、横並びだとできませんでした・・・ これだと横並びのメニューでも可能なのでしょうか？ 是非とも参考にさせていただきます。 本当に、本当にありがとうございました！
- yambejp
- ベストアンサー率51% (3827/7415)
cssに以下を追加してみてください #contents a{ display:block; }
お礼
ありがとうございます！！！ やっと・・・やっと・・・解決しました！ このようなやり方まったく思いつきませんでした！ このやり方は一般的に使用されているものなのでしょうか？ 本当にありがとうございました。
お礼
<div id="left"> <div id="contents"> <img src="img/contents.gif" alt="hoge" width="200" height="20" /> <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','img/home2.gif',1)"><img class="menu" src="img/home.gif" alt="hoge" name="Image4" width="200" height="35" border="0" id="Image4" /></a> <a href="menu.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','img/menu2.gif',1)"><img class="menu" src="img/menu.gif" alt="hoge" name="Image6" width="200" height="35" border="0" id="Image6" /></a> <a href="special.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','img/special2.gif',1)"><img class="menu" src="img/special.gif" alt="hoge" name="Image5" width="200" height="35" border="0" id="Image5" /></a> <a href="coupon.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','img/coupon2.gif',0)"><img class="menu" src="img/coupon.gif" alt="hoge" name="Image7" width="200" height="35" border="0" id="Image7" /></a> <a href="qanda.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','img/qa2.gif',1)"><img class="menu" src="img/qa.gif" alt="hoge" name="Image8" width="200" height="35" border="0" id="Image8" /></a> <a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','img/contact2.gif',1)"><img class="menu" src="img/contact.gif" alt="hoge" name="Image9" width="200" height="35" border="0" id="Image9" /></a> このような形で左サイドに縦にメニューが並ぶ形になっています。ですがどうしても<a～の部分で改行するとIEではそれぞれの画像の下に空白が出来てしまいます・・・ どうかよろしくお願いいたします。
補足
該当CSSはこのような感じです・・・ #left{ width:210px; height:auto; float:left; background-color:#FFFFFF; margin-bottom: 25px; } #contents { width: 200px; margin-top: 10px; margin-left: 5px; border: 1px solid #999999; } .menu { margin: 0px; padding: 0px; width: 200px; height: 35px; } どうかよろしくお願いいたします。