- ベストアンサー
ブラウザに隙間なくつけるには
画面をブラウザに隙間なくつけるにはどうしたらよいのでしょうか？ <body margin-top="0"> <container margin-top="0"> は試しましたがだめでした。 出来れば外部CSSで制御したいのですが。
- kurobon619
- お礼率76% (314/410)
- HTML
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (1)
- meenie
- ベストアンサー率44% (40/90)
何がやりたいのか少し見えにくいのですが、こういうことでしょうか。 --- xxx.css --- body { margin: 0px; padding: 0px; }
補足
meenieさんありがとうございます。 要するに画面のトップとブラウザの間に隙間をなくしたいという ことです。スクロールしても下には行くけど上には行かないという 状態です。 上記のようにやりましたが、効果ないということは べつのところに問題があるのでしょうか？
関連するQ&A
- CSS safariでのブラウザ画面表示差異について
CSS safariでのブラウザ画面表示差異について コンテンツをブラウザの画面の上下隙間なく詰めたいので、HTMLの全要素に対してCSSでmargin: 0; padding: 0;とリセットしているのですが、safariで見た所どうしても隙間が少し空いてしまいます。どうしてでしょうか？Firefoxなら隙間なく詰めれています。 ちなみに、コンテンツ全体を包む#containerは margin: 0 auto;で中央に寄せています。
- ベストアンサー
- HTML
- トップ画像の上の隙間をなくしたいです。
テンプレートはこれなのですがhttp://sonyapple.net/Preview/V/14/ bodyのところにmargin-top:0px;を記述してもダメでした。 隙間が気になって仕方ないのでお分かりになる方いらっしゃいましたらお助けください。
- ベストアンサー
- HTML
- ブラウザ枠を超えず表示する方法
CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓test.html=== <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link rel="stylesheet" href="./test.css" type="text/css"> </head> <body> <div id="container"> </div> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。
- ベストアンサー
- HTML
- table周辺の隙間をなくしたい。
ヘッダーのバーとすぐ下のtableの間の隙間を無くしたいのですが、どうすれば良いのでしょう。 margin属性を調整すれば隙間を無くせるブラウザもあるようですが、ＩＥはどうしてもダメなのではないでしょうか。なによりも、ブラウザ次第で隙間の大きさが違うのに困っています。 ***** test_06.html ***** <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>只今お勉強中！</title> <link href="test_06.css" rel="stylesheet" type="text/css"> </head> <body> <img class="header" src="header_01.jpg" alt=""> <table class="main"> <tr class="logo"> <td class="01"> <img class="logo" src="logo.jpg" alt=""> </td> <td class="02"> <div></div> </td> </tr> </table> </body> </html> ***** test_06.css ***** body { margin-top: 0px; text-align: center; background: url("header_back.gif") repeat-x; background-color: #CBE5FF; } img.header { margin: 0px auto; width: 820px; display: block; } table { margin: 0px auto; width: 860px; background: url("wrapper_01.gif") repeat-y; } td { margin: 0px; padding-left: 20px; width: 352px; float: left; } img.logo { width: 352px; margin: -3px 0px -3px -3px; }
- ベストアンサー
- HTML
- cssでbodyタグのtopマージを0にしているのですがスペースが。。。
cssでbodyタグのtopマージを0にしているのですがスペースが空いてしまいます。 下記がCSSです。 /* body */ body,td,th { color: #000000; } body { background-color: #FFFFFF; margin-left: 0px; margin-top: 0px; background-image: url(share_img/bg_back.gif); } CSSを外部ファイルにする前は、TOPは空くことは無かったのですが、 CSSを外部ファイルにした途端、空いてしまうようになってしまいました。 どうしても方法がわからなくて困ってます。 どなたかご教授お願いします。
- ベストアンサー
- HTML
- oveflow、margin等の表示について質問です
以下のようなhtml （XHTML 1.0 Transitional、文字コードはUTF-8） <body> <div id="wrapper"> <div id="container"> test </div> </div> </body> で、bodyにリピート有りの背景、wrapperにx軸にリピートの背景、containerにリピート無しの背景と背景色に白をcssで設定しました。 containerは中央揃えで上に35pxの空きをもたせたいのですが、containerに「margin-top:35px」とするとIE（6、7）では意図した通りに表示されるのですがfirefoxだとwrapperにも35pxの空きができてしまいbodyの方の背景が見えてしまうといった状態になりました。 containerのmargin-topを指定せず、wrapperに「padding-top:35px」を指定する、または、containerのmarginはそのままでwrapperに「overflow: hidden」を指定すると両方のブラウザで意図した通りに表示されました。 ただ、paddingを指定した方はわかるのですが、なぜoveflowで、しかもhiddenで解決できたのかが全くわかりません。個人的な感覚ではcontainerのmarginをいかす方法で進めたいのですが…。 変な質問ですが、なぜこれで解決できたのが教えていただけると助かります。根本的に間違っている点などもありましたらご指摘していただければ幸いです。説明下手ですが何卒、よろしくお願いいたします。 ---元のcss--- html,body { height: 100%; margin: 0px; padding: 0px; } body { background-image: url(../img/***1.jpg); background-repeat: repeat; background-position: left top; height: 100%; } #wrapper { background-image: url(../img/***2.jpg); background-repeat: repeat-x; margin: 0px; padding: 0px; width: 100%; } #container { background-color: #FFFFFF; background-image: url(../img/***3.jpg); background-repeat: no-repeat; background-position: left top; width: 850px; margin-right: auto; margin-left: auto; height: auto; min-height: 620px; margin-top: 35px; }
- ベストアンサー
- CSS
- 下に隙間ができる
Flashコンテンツの周りにボーダーラインを書きたいのですが、 下記のように記述すると、コンテンツの下に2pxくらいの隙間が できてしまいます。 この隙間はどうすれば消すことができるのでしょうか？ ・HTML <div class="mainimage"> <embed src="test.swf" wmode="transparent" width="720" height="272"> </div> ・CSS div.mainimage { margin-top: 28px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; width: 720px; border: 1px solid #000000; }
- ベストアンサー
- Flash
- ADOBE DW 5.5 ヘッダとコンテンツの隙間
現在、独学でADOBE DREAM WEAVER CS 5.5でwebサイトを作成していますが、 headerとcontentの間に10pixcelほどの隙間ができてしまいます。「デザイン」ビューには 表示されないのですが、「ライブ」ビューやIE9やchromeでも隙間ができてしまっています。 これを防ぐ方法はなにかありませんでしょうか？コードは下記となります。 【HTML】--------------------------------------------------------- <html> <body> <div id="container"> <div id="header"> <img src="a.png" width="1000" height="150"> </div><!-- /#header --> <div id="content"> <p>aaa</p> <p>aaa</p> <p>aaa</p> </div><!-- /#content --> </div><!-- /#container --> </body> </html> 【CSS】--------------------------------------------------------- body{ background-color: #CCC; font: 16px/24px 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS PGothic',sans-serif; color: #000; } #container { margin:0 auto; width: 1000px; } #header { margin: 0 auto; padding: 0 auto; } #content { width:1000px; margin: 0 auto; padding: 0 20; background-color: #666; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- 画像とその下にあるテキストの隙間を小さくする方法
ワードプレスで画像を挿入し、その画像の下にテキストを表示させたいと思っています。 管理画面にある「メディアを挿入」の画面で「キャプション」にテキストを記入しました。 これで画像の下にテキストが表示されましたが、画像とテキストの間に広い隙間が出来てしまっています。 この隙間をなくそうと、テキストの部分にクラスを設定し、そのクラスに対してCSSから「margin-top: 0px;」などと記述したのですが、変化がありませんでした。 また、imgタグの最後に「style="margin-bottom: 0px;"」を追加しても変化がありませんでした。 画像とその下にあるテキストの隙間を小さくするためにはどうすればよいのか教えて下さい。
- 締切済み
- CSS
- IE6で、背景画像とコンテナを常に中央表示させたい
bodyの背景画像と、コンテナを ブラウザウインドウ幅に対して、 常に中央表示させたいです。 IE7、8、FireFox、Safari では上手くいっているのですが、 IE6だけ、うまく行きません。（何故かずれてしまいます） コードは以下です ------------------------------------------------------- ●HTML <body> <div id="container"></div> </body> ●CSS body{ background: url(画像のパス) no-repeat; background-position: center top; text-align: center; } container{ width: 900px; margin: 0 auto; } ----------------------------------------------------------------------------------- どうやらIE6では、 コンテナも bodyに置いた背景画像も だいたい中央表示されているのですが 軸がズレている？？ようなかんじで お互いがずれて、だいたい真ん中、という感じになってしまいます。 どなたか詳しい方いらっしゃいましたら よろしくお願いいたします。。
- ベストアンサー
- HTML
- 有効期限の確認方法や更新手順について教えてください。
- Android携帯で「ESETセキュリティ ソフトウェア シリーズ」の有効期限を確認する方法と、有効期限が切れている場合の更新手順についてご教示ください。
- 「ESETセキュリティ ソフトウェア シリーズ」のMobile版のAndroid携帯で、有効期限の確認方法と有効期限が切れている場合の更新手順を教えてください。
お礼
ありがとうございます。 お手数掛けました、助かりました。