- 締切済み
下部の隙間
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- salonpath
- ベストアンサー率48% (194/399)
marginかpaddingやline-heightやvertical-alignあたりを弄ってみるとか なんにせよソースがなきゃ、誰もわからないと思うんですよね。
関連するQ&A
- IEで画像の横に表示される隙間について。
現在こちらのサイトで（http://www.black-inspiration.com/） 画像を横幅1260pxに合わせて隙間なく表示させようとしているのですが、 複数のブラウザでチェックするとIEだけ画像の左側にわずかな隙間が空いてしまいます。 ちなみにサイト構築にはwordpressを使用しています。 どのようにしたらこの隙間を取り除くことが出来るのか教えて頂けないでしょうか？？ よろしくお願い致します。
- ベストアンサー
- HTML
- 『css/html』フッターを下部＆特殊な移動
こんばんは。 現在Homepageを自分で作成しているのですが 頭が混乱しておりまして・・・、解決策が見つからないのでこちらに質問させていただきました。 結論としましては フッターをある範囲だけ移動(可変)するようにしたい。 現在は ブラウザ上部よりheight：650pxはメインエリアとして情報を記述。 その下にフッター(hright：50px)を配置。 フッターは下部に固定しメインエリアには食い込まない様に設定。 (ブラウザがheight：700px以下になるとスクロールバーが出現しスクロール) ブラウザがheight：700px以上の場合にはメインエリアを延ばして対応。 ここまでの動きはこんな感じです。 http://www.stylish-style.com/csstec/ultimate/sample/fixfoot-sample2.html ここまでは上記のサイト等を調べつつ作成する事が出来たのですがこの後が問題で フッターの最大位置（？）最大下部位置（？）を1000pxに設定し ブラウザが1000px以上になるとフッターの上部は固定され下部が伸びる（若しくは現れる※1） という動作にしたいのですが cssでその様な事が可能なのでしょうか？ 質問文を書くのにも矛盾が生じていると思います。 不可能なら不可能で仕方ないのですが・・・。 何卒、よろしくお願い致します。 ※1. 現れるというのは最初からフッターにheight：500pxくらいの画像を用意し それが見えてくるという意味合いです。
- ベストアンサー
- HTML
- XHTML・CSSでの塊と塊の隙間の空け方は？
ブラウザがW3C勧告に対応出来ていなかったテーブルレイアウトの時代は、パーツとパーツの間の隙間を好きに開けることは至って容易でした。 しかし、XHTML・CSSですと、隙間を開けることに「これでいいのか？」という思いがあります。 行間における隙間という隙間全てについてなのですが、例えば、左右600pxのローカルコンテンツエリアがあったとして、そこには (1)h2のテキスト ここで20px程度の隙間を入れる。 この場合、h2のmargin-botomに20pxと入れている。 (2)キャッチ的な画像イメージが右側に回り込んでいる ここにはsrcにclassで右回り込み用のCSSを書いている。 (3)h2の下に、pタグで本文を入れている。pタグに、margin-bottomで40pxの隙間を空けている。 (4)次のh2などの新たな塊へと続く と、このようにやってはいますが、思うように隙間があかないことも多く、四苦八苦しています。 例えば回り込む画像の縦サイズが一定以下の小ささになると、まともに隙間があかなくなったり、 他にも忘れましたが色々とうまく意図通りにならないことが多いです。 皆さんはどうやっていますか？ 「これが妥当だ！」「いや、こういう理由からこの方が妥当だ」 などというお話をぜひ聞かせてください。
- ベストアンサー
- CSS
- ulでの段組の際の隙間
お世話になります。 現在CSSで段組を行っているのですが、リスト（ul）で画像を縦に並べてメニューを作成しようと思っています。 liにはheightやmarginやpaddingなどをきちんと隙間なく並べるように書いて、imgにはvertical-align:bottom;を設定しています。 それでも、IE6.0で見たときどうしても1pxの隙間ができてしまうのです。 どうしてだろうと思い、画像の高さが25pxのものを作成し、liのheightに25pxを設定して（他は上記のCSSでいじらずに）表示すると、きちんと隙間ができずに表示されました。 隙間ができてしまうときのメニュー画像は高さ15pxのものを使用していて、liのheightを15pxと設定していました。 今までCSSで組んだときはきちんと隙間があくことなく表示できたのですが、今回だけどうしても隙間があいてしまいます。 メニューのリストで、使用する画像は小さいときは隙間があいてしまう、というようなバグがIEにあるのでしょうか。 もしそれがバグの場合は一言お教えいただけないでしょうか。 解決方法がなければしょうがないのでテーブルを使用しようと思います。 どうぞよろしくお願いいたします。
- ベストアンサー
- HTML
- IE7でプレビューすると隙間が・・・
Dreamweavercs4をテキストを片手に勉強中のものです。 まずは添付画像をご覧いただきたいのですが、 画面中央にある龍の付いている画像と、その数ミリ下にある バナー用の横に細長い画像の間に白い隙間があります。 テキストの通りの手順で進めると隙間ができなくなるはずなのですが、 IE7でプレビューした場合のみ、隙間ができてしまいます。 FirefoxやSafariでプレビューした場合は隙間なく綺麗に表示されます。 手順としての流れは、 画像やテキストを含めた全体部分にdiv「wrapper」を設定。 cssで「wrapper」に幅を指定、paddingは全て0、marginは左右「auto」上下「0」。 龍の画像のある段落を「h1」に指定。 その下部のバナー用の画像のある段落を「h2」に指定。 cssでタグ「h1」と「h2」にそれぞれ「Padding=上下左右0」 「margin=上下左右0」を設定。 わかりにくいかもしれませんが、大まかな流れはこのような感じです。 ちなみに、テキストに添付されていたCD-ROMにある、 完成ファイルをIE7で開いてみると、同様に隙間が表示されました。 これは、IE7特有のバグか何かなのでしょうか？ また、解決法方などご存じのかたがおられましたら、 ご教示いただけないでしょうか。 どうかよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- swfファイルの下に隙間ができる
firefoxとNNだけはswfファイルの下に5px程度の隙間ができてしまいます。 CSSでマージンもパディングも0にしていますが消えません。 IEではその隙間はなく、次の要素とぴったりとくっついているんですが…。 この隙間を埋める方法をご教授ください。
- ベストアンサー
- CSS
- ヘッダーの上にほんのわずかに隙間ができる
ウェブサイト製作の練習をしております。解決できないことがあり、質問させていただきます。 ヘッダーボックスにmargin topを設定していないにも関わらず、ヘッダーボックス上にほんのわずかに隙間ができてしまいます（1～2px程度です）。ヘッダーボックスにCSSで設定しているのは margin-left:auto; margin-right:auto; width:1000px; のみです。 bodyにはなにも設定しておりません。ちなみにIEのバージョンは8でございます。宣言は・・・ <!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”" /> でございます。教えてgooのトップ（http://oshiete.goo.ne.jp/）も一番上（"質問&回答 (Q&A) コミュニティ - 教えて！goo"のところです）は画面上部にぴったりくっついていますよね。どうすればこのような形にできるのでしょうか？どなたかアドバイスをお願いします。
- ベストアンサー
- HTML
- アクセス解析を置いたら隙間が出来る。
ホームページの一番下、</body></html>の前に にxreaの<script type="text/javascript">のアクセス解析を置きましたらFirefoxで５pxぐらいの隙間ができました。 横線が下から離れてしまって変です・・・ 解析を上部に置けば解決しますが、下に置いたまま隙間を無くせますか？
- ベストアンサー
- JavaScript
- 上下のBOXの隙間を取り除きたい
現在外部CSSでHPを作っています。 ブラウザはIE6で、Dreamweaver4を使っています。 http://okwave.jp/qa3346133.html 上記で最初の質問をさせていただきました。 最初の質問とはタイトルが違うのですが、 解決していきつつ他の問題が出てきてしまったので 新規で再度質問をさせていただいています。 ページ内にエクセルの表のようなものを作りたいと思っています。 セルで例えて説明しますと、 A1にタイトル・B1に本文、A2にタイトル・B2に本文と繰り返し、 数十行の表を作ろうと思っています。 最初はAとBの高さもバラバラだったのですが、 何度もアドバイスをいただきABに入れる文言の文字数が違っても高さはあうようになりました。 ですが、A1B1とA2B2の間に16pxの隙間ができてしまい、ぴったり合わないのです。 左右上下ともに隙間がないものが理想です。 その隙間はどのようにして取り除けば良いですか？ どうか皆さまのお力をお貸しください。 よろしくお願いいたします。
- 締切済み
- HTML
- <div>と<div>の間の１０px程の隙間が消えなくて困っています。Firefox＆safari
はじめまして。 現在movabletype3.35で初めてサイトを作成している者です。 宜しくお願いします。 下記にありますＨＴＭＬとＣＳＳでページを作っているのですが、 Firefoxやsafariで確認すると、 <div id="pankuzu">で囲んだボックスと、そのすぐ下に持ってきている <div id="introduction">で囲んだボックスの間に１０px程の隙間が出来てしまいます。 ※ＩＥ７では隙間は出来ませんでした。 <div id="keyvisual"> ← ※<div id="pankuzu">のすぐ上のボックス <div id="pankuzu"> <div id="introduction"> これら３つのボックスには全てＣＳＳでmarginとpaddingを調整しているつもりなのですが、どうしてもＩＥ７と同じように表示されず隙間が出来てしまいます。。 ちなみに、試しに一度<div id="pankuzu">のボックスをまるまる削除して表示した所、<div id="introduction">のmargin-topに0pxと指定しているのにかかわらず、この場合も10px程の隙間が出来ました。。 ということは、<div id="introduction">の中のＨＴＭＬかＣＳＳの書き方か指定に何か問題があるのかと思っているのですが、どうしても解決できません。 是非ご指導、ご鞭撻宜しくお願い致します。 ---------------------------------------------------------------- 【ＣＳＳ】 * { margin: 0; padding: 0; border: 0; background-color:transparent; color: #333; font-size: 100%; font-weight: normal; font-style: normal; text-decoration: none; } div#keyvisual { width: 780px; height: 100px; margin: 10px 10px 0 10px; padding: 0; background: url("※※※.gif") no-repeat 0 0; } div#title { width: 500px; height: 50px; line-height: 350%; margin: 0 0 0 10px; padding: 0; } div#pankuzu { width: 780px; height: 20px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } div#pankuzu p { font-size: 50%; } div#introduction { width: 780px; height: 50px; margin: 0 10px 0 10px; padding: 0; background-color: #999; } dl#site { margin: 0; padding: 0; } dl#site dt { display: block; float: left; clear: left; width: 160px; margin: 15px 5px 10px 5px; padding: 0; font-size: 90%; text-align: left; background-color: #fff; } dl#site dd { width: 600px; margin: 15px 5px 10px 5px; padding: 0; font-size: 80%; text-align: left; } --------------------------------------------------------------- 【ＨＴＭＬ】 <!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" id="sixapart-standard"> ※ヘッダー部分は省略しています。 <!-- サイトボディー部分ここから --> <body> <div id="container"> <div id="keyvisual"> <div id="title"> <h1><a href="<$MTBlogURL encode_html="1"$>" title"<$MTBlogName$>"><$MTBlogName$></a></h1> </div> </div> <!-- パン屑リスト --> <div id="pankuzu"> <p class="navi-link"><a href="<$MTBlogURL$>">TOPページ</a>><MTParentCategories glue=">" exclude_current="1"><MTIfNonZero tag="MTCategoryCount"><a href="<$MTCategoryArchiveLink$>"><$MTCategoryDescription$></a><MTElse><$MTCategoryDescription$></MTElse></MTIfNonZero></MTParentCategories><MTHasParentCategory>></MTHasParentCategory><$MTCategoryDescription$> </p> </div> <div id="introduction"> <dl id="site"><dt>題名</dt><dd>説明</dd></dl> </div> ----------------------------------------------------------------
- ベストアンサー
- HTML
