- ベストアンサー
画像の下の余白
n_breakdownの回答
私も同じ現象で悩んだことがあります。 解決策としては、 <img src="gazou.jpg" class="name" width="1024" height="768"> <div class="bar">画像</div> のソースを <img src="gazou.jpg" class="name" width="1024" height="768"><div class="bar">画像</div> とすれば解決できます。 imgタグとdivタグの間にソースレベルで改行が入ってしまう為に起こってしまう様です。
関連するQ&A
- html,css初心者です。ヘッダーの余白について
ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。
- ベストアンサー
- HTML
- ブラウザ上部に余白があります。
近い現象はありましたが、解決出来なかったのでご質問させて頂きます。 下記のソースでhtmlを制作しましたが、#headerの上に余白があります。 どうすればこの余白をとる事が出来るでしょうか？ お教え頂ければと思います。 ↓ソース↓ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- html, body{ margin:0; padding:0; } div#header{ background-color: #F00; margin:0px; padding:0px; } --> </style> </head> <body> <div id="header"> <h1>test</h1> </div> </body> </html>
- 締切済み
- HTML
- 画像の下に余白が出来てしまいます。
どんなにがんばっても下に余白が出来てしまいます。余白を消す方法を教えてください、お願いします。 多分、何か余計なもののせいで余白ができてるんだと思います。 css ↓ *{ margin:0;padding:0; font:normal 10px/16px Verdana; color:#000; letter-spacing:0.2em; } /*リンクの設定*/ a {text-decoration:none;} a:hover {text-decoration:underline;} /*改行・画像の設定*/ br {letter-spacing:normal;} img {border:0;} /*見出しの設定 h1…サイトタイトル h2…welcomeなどの見出し*/ h1 { color:#fff; font:bold 16px Verdana; } h2{ font:bold 10px Verdana; } /*右側のフレームの背景設定*/ body{ background:#fff url(img/imgr.jpg) no-repeat left bottom fixed; } /*左側、メニューの表示されるページのみに適用される背景設定*/ #INDEX{ background:#666 url(img/imgl.jpg) no-repeat right bottom fixed; } /*左側フレームの各種設定*/ #CONTAINER { margin:40px 20px 0 0; text-align:right; } #MENU { margin-top:20px; } #MENU a{ color:#fff; font-size:120%; line-height:25px; } #MENU a:hover{ color:#fff; text-decoration:none; } /*右側フレームの各種設定*/ #BOX { margin:40px auto; width:55%; } .text{ margin:5px 0 20px 10px; } .record{ margin:5px 0 20px 10px; height:200px;width:400px; overflow:auto; } html ↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Clock hand</title> <tr valign="top"> </tr> </head> <body leftmargin="0" scroll="no" topmargin="0" marginwidth="0" marginheight="0"> <table border="0" cellspacing="0" cellpadding="0"> <tbody> </tbody> </table> <table style="width: 188px; height: 693px" width="188" background="http://tokiokalink.web.fc2.com/imgl.jpg" align="left" height="693"> <tbody> <tr valign="top"> <td> <meta content="text/html; charset=UTF-8" http-equiv="content-type" /> <meta content="text/css" http-equiv="content-style-type" /> <link rel="stylesheet" type="text/css" href="style.css" /> <base target="main" /> <div id="CONTAINER">
- 締切済み
- HTML
- cssでの要素間の余白について。
ホームページを作成しており、画像の下にdivをくっつけて、配置したいのですが、どうやっても、余白が出来てしまいます。styleでdiv要素にmargin-bottom:0、h2にmargin-top:0と記述しても、余白が出来てしまい、困っています。 さらにdiv containerの大きさについても、styleでwidth,heightで、大きさを指定しているのですが、横に画面一杯に広がってしまい、大きさ指定が反映されません。 初歩的な質問かもしれませんが、どこに問題がありますでしょうか？ ご教授お願いいたします。 "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html;charset=Shift_JIS"/> <title>xxxxxxxxxxxxxx</title> <style type="text/css"> body {background-color:#f5f5f5} div#container {width="800" height="40";background-color:#fff4d8} h1 {color:#330000;font-family:Geogia,Times New Roman,sans-selif} h2 {color:#330000;font-family:Geogia,Times New Roman,sans-selif;margin-top:0} </style> </head> <body> <div id="content"> <h1><img src="xxxxxx.jpg" alt="xxxxxxxxx" </h1> </div> <div id="container"> <h2> xxxxxxxx </h2> </div> </body> </html>
- ベストアンサー
- CSS
- ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません
外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin: 0px auto; }
- 締切済み
- CSS
- CSSで画像配置の垂直方向指定
画像をいくつも展示するページを製作しているのですが、画像の垂直方向指定がうまくいきません。 縦長の画像と、横長の画像(サイズは同じ)を二枚横に並べたときに添付画像の下の方のように表示させたいのです。 タグはそれぞれしたのようなかんじです。 *****************CSS***************** #photo { margin:0 0 0 30px; padding:0; background: transparent; text-align:center; font-size : 1em; color:#69788A; } .image { font-size : 0.9em; margin : 0; padding : 10px 0 10px 0; float:center; width : 800px; border-bottom:2px solid #CFDEEF; } .left-img { float: left; width : 50%; } .right-img { float: right; width : 50%; } *****************HTML***************** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta NAME="ROBOTS" CONTENT="NOINDEX,NOFOLLOW,NOARCHIVE"> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <link rel="stylesheet" href="style.css" type="text/css"> <title>***********</title> <style type="text/css"> body { background: transparent; } </style> </head> <body id="photo"> <div class="image"> <p class="left-img"><img src="016.jpg" border="0"></p> <p class="right-img"><img src="017.jpg" border="0"></div> </body> </html> よろしくお願いします。
- ベストアンサー
- HTML
- テーブル内の文字が揃わない
検索したのですが、見当たらないので質問させてください。 私は、ほとんど無知でコピペやテンプレを利用させてもらってホームページを作っている初心者です。 テーブルの中の文字が下のテーブルの文字の位置と合わなくて困っております。 cssは外部から呼び出しで、 ------- .t{ font-size:15px; color:#666; margin:1px 8px; text-align:right; } .t:first-letter{color:#e68080;} .text2{ line-height:18px; margin:2px 0px 20px 0px; border:1pt dotted; padding:8px 2px 8px 2px; color:#e69999; } ------ htmlは ------ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" type="text/css" href="left.css"> <title>diary</title> <base target="main"> </head> <body> <div class="t">blog1</div> <div class="text2"><a href="http://■.jp">日記1</a></div> <div class="t">blog2</div> <div class="text2"><a href="http://●/">日記2</a></div> <div class="t">diary</div> <div class="text2"><a href="http://▲">日記3</a></div> </body> </html> ----- と記述しています。 この日記2と日記3の文字の開始位置はマージンで指定した左で揃っているのですが、 日記1が下の２つよりもっと左に表示されてしまいます。 別のページではテーブル内をテキストではなく、画像で使用しているのですが、 同じく１つ目のテーブルの中の画像だけが左に寄り過ぎており、 加えて別のテーブルではスペースが余計に空いていて、最初のオンマウスで位置が詰まります。（画像が動きます） テーブルを消してみたりしたのですが、文字位置は変わらないので原因はテーブルではないと思うのですが… どこをいじったら解消されるのかがわかりません。 説明が下手でわかりにくいかと思いますが、どなたかご回答宜しくお願いいたします。 記述しているソースがお門違いでしたら、貼り付けなおします。
- ベストアンサー
- HTML
- テーブルの上に余白ができてしまいます
パソコンから見たときはなんともないのですが、携帯から見ると大きい余白がでてしまって困っています。 解決方法を教えていただけませんか？ それと、できれば下記のHTMLの添削をしてもらいたいです。 <html> <head> <meta http-equiv="Content-type" content="text/html; charset=shift_JIS"> <style type="text/css"> <!-- a:hover { position: relative; top: 1px; left: 1px; text-decoration: none; } a img { border: none; } --> </style> </head> <body bgcolor="#FFFFFF" link="#000000" vlink="#000000" alink="FFFFFF" text="#000000"> <center> <Table style="margin:-84px 0px 0px 0px" border="0" bgcolor="#336666" cellpadding="10"><tr><td> <div align=center><font size="2">タイトル</font></div> <font size="1"><font color="#000000">本文</font> </body></html>
- 締切済み
- HTML
- IEでCSSの中央寄せが効かない
common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？
- ベストアンサー
- HTML
- ページのトップへの画像
ページのトップへの画像をcssにしようと思っています。 現在 ＝＝＝ html ＝＝＝ <html lang="ja"> <head> <meta charset="utf-8"> <style type="text/css"> <!-- div.box { width: 90%; height: 20px; color: #ffffff; background-color: #000000; padding: 3px 10px 3px 10px; } .gotop { float: right; padding-top: 3px; } --> </style> <title>Title Box</title> </head> <body> <div class="box"><a href="#top" class="gotop"><img alt="gotop" src="gotop.png"></a>Title Box</div> </body> </html> のようになっているソースを画像を指定してのcssに変えたいと思っていますがうまくできません。 上手にする方法を教えてください。
- 締切済み
- CSS