スタイルシートの指定にもかかわらず、なぜ画像に変なスペースが入るのでしょうか？
- スタイルシートでmargin:0; padding:0;と指定しているにもかかわらず、画像に変なスペースが入る場合があります。
- 画像に変なスペースが入る原因は、画像自体に設定されている余白やマージンが影響している可能性があります。
- また、スタイルシート内の他の要素によって画像に余白やマージンが生じている場合もあります。
- ベストアンサー
スタイルシートに関しての質問です。margin0 padding0と指定し居るのに、変なスペースが入ってしまいます。。。
スタイルシートで、 *｛ padding:0; margin:0; ｝ img{ padding:0; margin:0; } と指定しているのですが、なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ ソースは下記の通りです。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <head> <META http-equiv=Content-Type content="text/html; charset=Shift_JIS"> <META content="新築マンション,賃貸,敷金ゼロ,礼金ゼロ,ペット可,内覧可能,水商売可,風俗可,東京,都内,マンション,アパート,一戸建, name=keywords> <title>株式会社</title> <link href="css/mainstyle.css" rel="stylesheet" type="text/css"> </head> <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" ></div> <div id="sidememu"> <table width="150" border="0" cellpadding="0" cellspacing="0" > <tr> <td><a href="#"><img src="img/menu1.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu13_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu5_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu4.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu11_h.gif" width="150" height="40" border="0"></a></td> </tr> <tr> <td><a href="#"><img src="img/menu10_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu3.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu9_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu6_h.gif" width="150" height="40" border="0"></a></td> <tr> <td><a href="#"><img src="img/menu8_h.gif" width="150" height="40" border="0"></a></td> </tr> </table> </div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> </div> </body> </html> cssは、 /* CSS Document */ *{ padding:0; margin:0; } img{ padding:0; margin:0; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidememu{ margin-top:20px; background-color:#F00; float:left; } #main{ margin-left:10px; margin-top:20px; float:right; } です。すみません。教えてください！
- unagitokyo
- お礼率33% (2/6)
- その他([技術者向] コンピューター)
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
> 半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・ 「半角スペースを隠すために、コメントアウトした」のはどこの部分の事ですか？私がANo.1で「ここでしょうか？」とおたずねした部分は、補足のソースを見てもそのまま（半角スペースがコメントアウトされていない）になっていますので、そもそも「へんなスペース」が入っている（いた）のは、「そこ」の事ではなかったのですね？ > 最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね …と仰っているところを見ると、「へんなスペース」が入っていたのは<td>内の事で、各メニュー画像が「上下に隙間無くぴったりくっつかなかった」という事だったのでしょうか？ 検証する為には、質問者様の抱えている状況を正確に把握する必要がありますので、以下の点を明確にして頂きたく思います。 ・今度のソースで、「へんなスペース」が入っているのはどの部分ですか？具体的に示して下さい。 ・「へんなスペース」が入って見えるのを確認したのはどの環境（ブラウザの種類とヴァージョン）においてですか？ ・memu_back1.gifの縦横サイズを教えて下さい。 ・実際に使用されているCSSに提供された部分以外の設定があったり、問題のHTMLファイルから別のCSSを併せて参照したりはしていませんね？
その他の回答 (1)
- abril
- ベストアンサー率69% (388/560)
> なぜか画像でへんなスペースが入ってしまいます。どうしてでしょうか？ 「へんなスペースが入」るのは、具体的にどの部分ですか？もしかして： <div id="flash-a">～</div>と<div id="main-1">～</div> の上下の間にですか？もしそうであれば、それぞれの<div>と子要素である<img>の間に、半角スペースが入っている為かと思われます。 試しに質問者様ご提供のソースをそっくりコピーして再現してみましたところ、IE6/7上では<div id="flash-a">～</div>と<div id="main-1">～</div>の間に1～2pxほどの隙間ができる様ですので、半角スペースを削除するとぴったりくっつきました。 ※FirefoxやOpera等では、元より隙間はできていません。 ちなみに、現状のCSSだと、IE以外の環境ではコンテンツ全体が画面に対して水平方向にセンタリングしませんが、それはご了承の上の事でしょうか？ また、子要素の#sidememuと#mainがfloatしている為、親要素の#wapperが高さを失っていますので、それに対する対策を施しておかないとIE以外の環境だと何かと不都合が出てきますが…
補足
有難うございます。あのですね、 やりなおしまして、 ソースは、 <body> <div id="wapper"> <div id="head"><img src="img/forward_rogo.gif" width="250" height="56" border="0" alt=""></div> <div id="sidemenu"><!-- --><ul><!-- --><li><a href="#">仲介業者様 </a></li><!-- --><li><a href="#">空室一覧表</a></li><!-- --><li><a href="#">物件情報 </a</li><!-- --><li><a href="#">ご契約の流れ </a></li><!-- --><li><a href="#">申込書ダウンロード</a></li><!-- --><li><a href="#">ご入居者様</a></li><!-- --><li><a href="#">お部屋の解約について</a></li><!-- --><li><a href="#">お問い合せ</a></li><!-- --><li><a href="#">会社概要</a></li><!-- --><li><a href="#">経営理念</a></li><!-- --><li><a href="#">事業内容</a></li><!-- --></ul><!-- --></div> <div id="main"> <div id="flash-a"> <img src="img/dammy.gif" width="650" height="150" border="0"> </div> <div id="main-1"> <img src="img/top_1.gif" width="650" height="40" border="0"> </div> </div> <div id="footer"> </div> </div> </body> CSSは、 *{ padding:0; margin:0; } img{ padding:0; margin:0; vertical-align:top; } body{ margin-left:auto; margin-right:auto; text-align:center; } #wapper{ width:820px; } #head{ margin-top:20px; text-align:left; border-bottom:2px #000099 solid; } #sidemenu{ margin-top:20px; float:left; } #sidemenu ul{ list-style:none; background:#FF0000; } #sidemenu li{ font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size:10px; background-image:url(../img/memu_back1.gif) ; background-position:-113px 0px; width:103px; height:18px; text-align:left; padding-left:10px; padding-top:10px; overflow:hidden; margin:0; } #sidemenu li a{ color:#FFFFFF; text-decoration:none; } #main{ margin-left:10px; margin-top:20px; float:right; width:650px; } #footer{ clear:both; } にしたんですが、やっぱり、ダメなんです。。。半角スペースを隠すために、コメントアウトしたんですけど、ダメみたいで・・・ wapperの件は、clear:bothを入れたので、大丈夫になったんですけど。。。どうしてでしょう？？ ちなみに、最初のtableだと、img{vertical-align:top;}を入れたら直ったんですけどね・・・すみません。アドバイス下さい。よろしくお願いします。
関連するQ&A
- スタイルシートについて
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD><IMG src="i1.gif" width="64" height="64" border="0"></TD> <TD><IMG src="i2.gif" width="64" height="64" border="0"></TD> </TR> <TR> <TD><IMG src="m1.gif" width="32" height="32" border="0"></TD> <TD><IMG src="m2.gif" width="32" height="32" border="0"></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> こういったTableを使った表がある場合、スタイルシートで示すことは出来ますか？もし出来るならそのソースを教えてください。 また、こういったTableのホームページを一括でスタイルシートに変換できるソフトが存在していたら教えてください。 それと、この行数がかなり大きくなると、Tableよりも軽く表示がされると聞いたのですが本当でしょうか？ ご返答、何卒、よろしくお願い致します。
- ベストアンサー
- HTML
- インラインフレーム内でのテーブル位置指定が上手くいきません
インラインフレームを使用したホームページ作成中なんですが 一箇所だけどうしても解決できないことがあったので質問させていただきます フリー素材サイトのメニューテーブルを左上フレームに使用しているんですが htmlとスタイルシートを上手く使いこなせてないせいで メニューテーブルの位置指定ができずにいます テーブルは縦につなげるタイプのものです 左上フレーム内のright bottomに指定したいのですが上手くいきません 大変見苦しい点が多いとは思いますが どなたか解決策、アドバイス等ありましたらよろしくお願いいたします 【index.html】 <html><head>～</head> <frameset cols="220,*" frameborder="no" border="0"> <frameset rows="90%,10%" frameborder="no" border="0"> <frame src="menu.html" name="menu" scrolling="no"> <frame src="sita.html" name="sita" scrolling="no"> </frameset> <frame src="top.html" name="main" scrolling="auto" > </frameset> <body>～</body> </frameset> </html> 【menu.html】 <html><head>～</head> <body> <table id="left" cellpadding="0" cellspacing="0"> <h2>サイト名</h2> <tr><td><img src=".gif" width="80" height="47"></td></tr> <tr><td><img src=".gif" width="80" height="4"></td><tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="top.html" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><a href="" target="main"><img src=".gif" width="80" height="16" border="0"></a></td></tr> <tr><td><img src=".gif" width="80" height="4"></td></tr> <tr><td><img src=".gif" width="80" height="16"></td></tr> </table> </body> </html> 【スタイルシート】 ～ #left{ width:180px; text-align:right; vertical-align:bottom; }
- ベストアンサー
- HTML
- スタイルシートのテーブル枠について
今までテーブルを利用してホームページに簡単な線を つけていました。これをスタイルシートで行うと 微妙にうまくできません・・・お助けください。 すべてＩＥで検査しております。 html従来の私の線の引き方 <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr> <td bgcolor="#000000"> <img src="sps.gif" width="600" height="1"> </td> </tr> </table> 上記の表現をスタイルシートを利用してやりたいのですが 線が１pxのはずが、大きくなってしまいます。 cssを利用した記述 css部分 .index_table{ width: 600px; border:0px; border-width: 0px; margin: 0px; padding: 0px; } html部分 <table class="index_table"> <tr> <td bgcolor="#000000"> <img src="ims/sps.gif" width="600" height="1"> </td> </tr> </table> これに似たいい方法は、ないでしょうか？ 質問が、うまくまとまってなくてすみません・・・
- ベストアンサー
- HTML
- IEとFirefoxでリンクの「hover」の状態が異なります。
IEとFirefoxでリンクの「hover」の状態が異なります。 メニューに画像を使っているのですが、IEとFirefoxでは「hover」時のbackground-colorのかかり方が異なります。 IEだと画像全体にかかるのですが、Firefoxでは画像の下の方だけにしか色がつきません。 画像をテキストに変更すると、テキスト全体にきちんとかかります。 画像に問題があるのでしょうか？ どうすれば解決するのか教えてください。 以下にメニューのソースを載せておきます。 （HTML） <table width="100%" height="40" cellspacing="0"> <tr> <td width="100" ><a href="page1.html"><img src="menu1.gif" border="0" alt=""></a></td> <td width="100" ><a href="page2.html"><img src="menu2.gif" border="0" alt=""></a></td> <td width="100" ><a href="page3.html"><img src="menu3.gif" border="0" alt=""></a></td> <td width="100" ><a href="page4.html"><img src="menu4.gif" border="0" alt=""></a></td> <td width="100" ><a href="page5.html"><img src="menu5.gif" border="0" alt=""></a></td> <td width="100" ><a href="page6.html"><img src="menu6.gif" border="0" alt=""></a></td> <td width="100" ><a href="page7.html"><img src="menu7.gif" border="0" alt=""></a></td> </tr> </table> （CSS） a:hover { background-color: #000000;} どうぞよろしくお願いします。
- ベストアンサー
- HTML
- <td> 内のテーブルを上寄せにするには？
すみません教えていただけますか？ 初心者です。 このまま表示するとTABLE A の直ぐ下のテーブルが中央に来てしまいます。 上寄せにしたいのですが、どのようにすればよいでしょうか？ よろしくお願いします。 <table width="960" border="1"> <tr> <td width="160"> <!-- TABLE A --> <table width="160" border="1"> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> <tr> <td> <a href="" ><img src="subMenu.gif" /></a> </td> </tr> </table> </td> <td width="800" height="1200" border="1"> </td> </tr> </table>
- ベストアンサー
- HTML
- このテーブルタグの中の色を白にするには
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> <STYLE type="text/css"> <!-- .border{ font-size : 1pt; } --> </STYLE> </HEAD> <BODY> <TABLE border="0" cellpadding="0" cellspacing="0"> <TBODY> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_1.gif" width="20" height="20" border="0"></TD> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> <TD colspan="2" rowspan="2"><IMG src="images/001_base_2.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="18"></TD> </TR> <TR> <TD width="2" bgcolor="#000000"><BR> </TD> <TD width="18"></TD> <TD>ここに内容を書きます（画像<A href="images/001_base_1.gif">１</A>・<A href="images/001_base_2.gif">２</A>・<A href="images/001_base_3.gif">３</A>・<A href="images/001_base_4.gif">４</A>）</TD> <TD width="18"></TD> <TD width="2" bgcolor="#000000"><BR> </TD> </TR> <TR> <TD colspan="2" rowspan="2"><IMG src="images/001_base_4.gif" width="20" height="20" border="0"></TD> <TD height="18"></TD> <TD rowspan="2" colspan="2"><IMG src="images/001_base_3.gif" width="20" height="20" border="0"></TD> </TR> <TR> <TD height="2" bgcolor="#000000"><SPAN class="border">o</SPAN></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> 現在はテーブルの内側の色が透明色（背景の色）になっています。 これを透明でなく白にする方法をおしえてください！
- 締切済み
- HTML
- ＣＳＳで自動改行させたくない。
スタイルシートやテーブルで、幅を指定してあげると その幅にあわせて自動改行したりとか、その枠内の背景だけを 変更することができると思うんですが。 スタイルシートでやっても、なぜかうまくいきません。 今は、あきらめてテーブルでやってるんですが。 何がよくないのか、教えていただければ幸いです。 根本的な基本が、わかってないんですかね？ ＣＳＳ #main { width:760px; overflow:visible; } #head { width:760px; bgcolor: #ff0000; } .head-img { padding: 0px; margin: 0px; float:left; } #menu { width:760px; margin: 0px; padding: 0px; bgcolor: #ff0000; } .menu-buttom { margin: 0px; padding: 0px; } ＨＴＭＬ <html> <head> <link href="base.css" rel="stylesheet" type="text/css"> </head> <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> <div id="main"> <div id="head"> <div class="head-img"><img src="img/head_img.jpg"></div> </div> <div id="menu"> <img src="img/menu_left.gif" width="20" height="30"><img src="img/menu_top.gif" border="0" width="180" height="30" name="img_m1"><img src="img/menu_hp.gif" border="0" width="180" height="30" name="img_m2"><img src="img/menu_com.gif" border="0" width="180" height="30" name="img_m3"><img src="img/menu_inq.gif" border="0" width="180" height="30" name="img_m4"><img src="img/menu_right.gif" width="20" height="30"> </div> </div> </body> </html>
- ベストアンサー
- CSS
- ドロップダウンメニューの方法を教えてください
■ドロップダウンメニューでサブメニューが横並びで出るようにしたいと思っています。 HTMLは下記のように記述しています。どのようにJavascriptを記述すると良いのか教えてください。よろしくお願いします。 【html】 <div id="menuber"> <a href="#"><IMG src="test/m1.gif" width="101" height="20" border="0" align="left"></a> <div class="hiddenmenus"> <span id="sub"> <a href="#"><IMG src="test/sub1.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub2.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub3.gif" width="101" height="20" border="0" align="left"></a> <a href="#"><IMG src="test/sub4.gif" width="101" height="20" border="0" align="left"></a> </span> </div> </div> 【CSS】 .hiddenmenus {position:absolute; top: 20px; left: 0px;} #sub1 { visibility: hidden; }
- ベストアンサー
- JavaScript
- HTMLについて
現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です
- ベストアンサー
- HTML
- ページ上部にスペースが空いてしまう・・・
今ショッピングモールに出店するために素人ながらページを作っているんですが、ヘッダーの部分の上にスペースがどうしても空いてしまっていていて、修復できません・・・・。モールの方に聞いてみたところ「閉じるタグが抜けている・・」等の答えが返ってきたのですが、それ以上は教えてくれませんでした。。いろいろ調べてみたのですが、どうしても分かりません。。どうかよろしくお願いいたします。 ↓まだ作成途中なので変な箇所があるかもしれません・・。 <table class="head" bouder> <tr> <td class="head"> <img src="gazou" width=600 height=130 alt=""> <tr> <tr align="right"valign="middle"><br> <tr> <td width="713" height="35"> <table width="0" border="0" cellpadding="0"> <tr><td width="32%"><img src="gazou" width="200" height="8"></td> <td width="0%"><a href="～.html"><img src="gazou" width="108" height="25"border="0"></td> <td width="16%"><a href="～html"><img src="gazou" width="107" height="27"border="0"></td> <td width="16%"><a href="～html"><img src="/lib/shidagoromo/puraa" width="108" height="27"border="0"></td> <td width="16%"><a href="～.html"><img src="gazou" width="107" height="27" border="0"></td> <td width="20%"><img src="gazou" width="107" height="28"border="0"></td> </tr> </table> </td> </tr> よろしくお願いします。
- ベストアンサー
- HTML
お礼
お返事ありがとうございます。 firefoxでは、大丈夫だったんですけど、IE6でliの所で空きができてしまってたんです。結局ですね、liに、floatをかけ、ulと親divに、widthを指定した所、直りました。アドバイス有難うございました！