- 締切済み
【css】marginについて質問です。
現在Webサイト構築をしています。いきなり躓きました。コードを見てください。 （一部だけ抜粋しています） 【cssコード】 #container_all{ width:920px; height:520px; margin:0 auto; padding:0; } #container{ width:900px; height:500px; margin:10px; padding:0; } 【XHTMLコード】 <div id=container_all> <div id=container> </div> <div> このような場合、#container_allの中に#containerがマージン10pxでちょうど中心に収まるものかと思ってましたが、見事にマージンのtopが効いてませんでした。 marginは効かないのでしょうか？教えてください。
- a1b2c3d-ttt
- お礼率0% (0/3)
- デザイナー・クリエイティブ職
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- Shinroh
- ベストアンサー率33% (3/9)
質問の答えにはなってませんが、外側のpaddingで対応はできないのですか？
関連するQ&A
- marginが効いてくれません。
下記のレイアウトで#contentsのmarginを上下左右10pxで指定していますが、Fierfoxで見るとbottomだけmarginが効いてくれません。 #contentsには背景画像を持ってきたいので、下のmarginがとれないと困っています。 よろしくお願いします。 body { margin: 0px; padding: 0px; text-align: center; } #wrap { padding: 0px; margin-top: 0px; margin-right: auto; margin-bottom: 0px; margin-left: auto; width: 800px; text-align: left; } #header { background: #0099CC; width: 800px; } #contents { padding: 0px; width: 800px; margin: 10px; } #contents #sidenavi { background: #CCCCCC; width: 160px; float: left; } #contents #main { background: #FFFFCC; width: 580px; float: right; } #footer { background: #99CCFF; height: 80px; width: 800px; clear: both; } p{ margin: 0px; padding: 0px; } ****************************HTML <!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=shift_jis" /> <title>Layout01</title> <style type="text/css" media="all"> @import url("Layout1.css"); </style> </head> <body> <div id="wrap"> <div id="header"> <h1>Layout</h1> </div> <div id="contents"> <div id="sidenavi">内容がここに入ります</div> <div id="main"> <p>内容がここに入ります</p> </div> </div> <div id="footer">内容がここに入ります</div> </div> </body> </html>
- ベストアンサー
- 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
- CSSでmarginを指定すると、表示の仕方がブラウザによって変わってしまいます。
はじめまして、CSS初心者です。 お聞きしたいことがあります。 ---CSS--- body{ margin:0px; padding:0px; } #formbox{ width:750px; height:155px; } #box01{ margin-left:30px; width:280px; height:50px; } ---HTML--- <div id="formbox"> <div id="box">ほげほげ</div> </div> というHTMLをIE6.0とfirefox1.5で表示させたときに、 <div id="box">のmargin-leftがIE6.0だと60pxぐらいになってしまいます。firefoxでは、30pxとられているようなのですが…。 IE6.0とfirefox1.5で誤差が生じしてしまうのはなぜなのでしょうか。 どなたかご教授お願いできないでしょうか。 よろしくお願い申し上げます。
- ベストアンサー
- HTML
- firefoxにおけるmargin-topの表示について【CSS】
教えてください。とても困っています。 下記のようなCSSがあります。 #big { margin: 0px; padding: 0px; width: 150px; background: #000000; height: 150px; } #small { margin: 5px; padding: 0px; height: 140px; width: 140px; text-align: center; background: #FFFFFF; } これをｈｔｍｌで次のようにします。 <div id="big"> <div id="small"> </div> </div> これでしたら、IEのほうでは、bigの中にきちんと#smallが収まっていて、 #smallのマージンも上下左右きちんと5pxずつ取られていて、 結果的に見た目は#smallの周りに黒い5pxの枠（#big）があるような四角が出来上がります。（自分的に意図したのがこの形です） ですが、firefoxで見ると、なぜか#smallのtopのマージンだけうまく反映されてなくて #bigにmarginが反映されてしまうようになります。 結果的に、#smallの周りに出来るはずの5pxの枠は左右はきちんとできるのですが、 下に10pxの黒枠が出来て、上には枠は出来ず、#bigごと5px下に下がったような形になります。 どのようにしたら、firefoxでもちゃんとしたtop-marginの表示が出来るのでしょう？ (=IEのように表示できるのでしょうか？） ちなみに、#bigか#smallにfloatで右か左を設定したら、IEでもfirefoxでも キレイな形になります。 ただ、この方法が正しいのかわからなくて。 ご存知の方がいらっしゃいましたら、教えていただけますか？
- ベストアンサー
- HTML
- CSSについて 入力フォームの上下揃い
CSSについて 入力フォームの上下揃い sample.css @CHARSET "windows-31j"; html,body,div,span,h1,h2,h3,h4,h5,h6{margin:0; padding:0; font-size:100%} html { height:100%; } body { height:100%; } body > #container { height: auto; z-index:0; } #container{ width:780px; margin-top:auto; margin-left:auto; margin-right:auto; margin-bottom:auto; position:relative; min-height:100%; border:1px solid #999; } #header{ margin: 0; padding: 0px 0px 0px 0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } #main{ padding:auto; width:100%; backgruond-color:#87CEEB; z-index:1; } #footer{ position:absolute; bottom:0px; width: 100%; height: 100px; background-color:#4682B4; z-index:1; } index.html <div id="container"> <div id="header"></div> <div id="main"> <div class="vartical-align"> <form action=""> <input type="text" name="id"> <input type="password" name="pas"> </form> </div> </div> <div id="footer"></div> </div> 上記の用なCSSにて入力フォーム等を、id=main内にて上下中央揃えにしたいのですが どうした良いでしょう？
- 締切済み
- HTML
- CSSを用いた角丸の枠（フタ－中身－底）の作り方を教えてください。
こんにちは。 こんな角丸の作り方が知りたいです。 フタ（画像） ┌─────┐（実際は角丸の画像） 中身（左右の罫線）│ │ 底（画像） └─────┘（実際は角丸の画像） 下に記載したタグでやってみたところ、IE6ではうまく表示されますが、Firefoxでは、フタ部（底部）と中身部の間が空いてしまいます。 ◆HTML <div id="container-top"><img src="img/container-top.gif"> </div> <div id="container">本文テキストがつづく。。。 </div> <div id="container-bottom"><img src="img/container-bottom.gif"> </div> ◆CSS div#container-top{ width:750px; height:10px; margin:0 auto; padding:0; } div#container{ width:750px; border-left:1px solid #cccccc; border-right:1px solid #cccccc; margin:0 auto; padding:0; } div#container-bottom{ width:750px; height:10px; margin:0 auto; padding:0; } どうぞよろしくお願いいたします。
- 締切済み
- ホームページ作成ソフト
- cssのmarginについて教えてください
cssのmarginについて教えてください cssを使い、一般的な1カラムのサイトを制作しています。 外枠を組む所までは上手く行ったのですが 中身を入れるとfirefoxで表示した時、上部分に変な余白が出てしまいました。 IE7では問題なく表示されます。 色々と試した結果、中の要素のmargin（下記におけるdiv#header pの部分）が 外枠にも影響を及ぼしているんだろうと予測しているのですが、対処方法が解りません。 （この場合、headerの上部に30pxの空白が出来てしまいます。main等で試しても同じことになりました。） marginを0にする、または<p>や<div>で囲わずに「あいうえお」と書けば余白は出ないのですが、そういう訳にもいかず・・・。 試しに<h1>で囲んだり、idではなくclassで囲んでみたりしたのですが結果は変わらず、 <div>ではなく<span>で囲むと余白はでない変わりにmargin自体が無効状態になってしまいました。 それともこういう場合、div#header p部分のmarginがdiv#headerにも適用されるのは当たり前の事で、私の考え方が間違えているのでしょうか？ div#header pのmarginが影響してるのだとしても、上にだけ影響が出て左右には影響がないことにも首をひねっています。 独学でやってきたので曖昧な部分が多く、質問も上手く文章に出来ず申し訳ないのですが 詳しい方がいらっしゃいましたら、どうぞよろしくお願いします。 ---------------------------------------------------------------------- div#box {background-color: #ffffff ; width : 850px ; margin : 0 auto ; min-height: 100% ; position:relative ;} div#header {background-image: url(image/back-header.gif) ; width : 850px ; height : 90px ;} div#menu {background-image: url(image/back-menu.gif) ; width : 850px ; height : 45px ;} div#main {background-image: url(image/back-main.gif) ; background-repeat: no-repeat ; background-position: top ; width : 850px ; padding-bottom: 25px ;} div#footer {background-image: url(image/back-footer.gif) ; width : 850px ; height : 25px ; position: absolute ; bottom: 0px ; } --------------------------------------------- div#header p {font-size : 0.9em ; margin: 30px ;} ---------------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <body> <div id="box"> <div id="header"><p>あいうえお</p></div> <div id="menu">省略</div> <div id="main">省略</div> <div id="footer">省略</div> </div>
- ベストアンサー
- HTML
- ２段リキッド(右可変)時の右ブロックのボーダー表示について
タイトルでは分かりにくいですので、まずはCSSとHTMLのソースを添付します。 test.css=== * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; background-color: black; } #container { width: 100%; height: 100%; } #menu { width: 150px; height: 100%; float: left; display: inline; margin-right: -150px; background-color: white; } #main { width: 100%; height: 100%; float: left; display: inline; margin-left: 150px; margin-right: -150px; background-color: gray; } #mainContent { margin: 10px; border: 1px solid #85b3dc; } === 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 id="menu"> MENU_CONTENT </div> <div id="main"> <div id="mainContent">MAIN_CONTENT</div> </div> </div> </body> </html> === test.htmlはネガティブマージンを使った２段組みの左固定、右可変のリキッドデザインとなっています。右可変ブロックには#mainContentにより、ボーダーを表示していますが、右可変ブロックの左には10px のマージンが取られているのに、右には10px のマージンがありません。右に10px のマージンをとるにはどうしたら良いのでしょうか？ 分かりにくい内容とは思いますが、お願いします。
- ベストアンサー
- HTML
- CSSレイアウトについて
はじめまして。 個人用サイトを趣味で制作しています。 下記のようなイメージを、html×cssで組みたいのですが、 うまくいきません。 なんとかsafariで、再現したいのですが、問題点がわかりません。 ※IE6は、きっと無理ですよね。 どなたか原因分かる方教えていただけると幸いです。 ■イメージ http://www.turn.jp/design.jpg ■現状サイト http://www.turn.jp/ ■htmlソース <body> <div id="container"> <div id="wrapper"> <div id="contents"> <div id="logo"> <h1><img src="images/logo.png" width="200" height="164" alt="2lemma" /></h1> <h2><img src="images/menu.png" width="447" height="79" alt="blog" /></h2> </div> <div id="footer"> <p>Copyright©2010 All Rights Reserved.</p> </div> </div> </div> </div> </body> </html> ■CSS @charset "Shift_JIS"; /* CSS Document */ }#container { margin: auto; width: 1000px; background-color: #959500; } #wrapper { height: 437px; width: 960px; background-image: url(../images/design.jpg); background-repeat: no-repeat; margin: 20px; } #logo { text-align: right; height: 164px; width: 200px; margin-right: 245px; margin-top: 170px; float: right; } #footer { clear: both; color:#FFFFFF; font-size:8px; padding-top: 10px; }
- 締切済み
- その他([技術者向] コンピューター)
- CSSでFirefoxのプレビューをかけると、下が空いてしまう現象（追記）
先ほど、質問させて頂きました問題に関しまして、簡単なレイアウトで再度新規にページを作成してみたところ、どうも、PCの縦幅よりも小さい値のページは、下が空いてしまうのではないかという気がしました。 レイアウトの構成は １．上部に「header」コンテナ ２．その下に「wrapper」コンテナ ３．その下（最下部）に「footer」コンテナ という構成で作成したところ、２．の縦幅が300pixのときは、このような現象が起こるが、２．の縦幅が800pixのときは起こりませんでした。 ソースコードは以下の通りです ■ html部分 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>無題ドキュメント</title> <link href="test.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header"> id "header" の内容がここに入ります</div> <div id="wrapper"> id "wrapper" の内容がここに入ります-</div> <div id="footer"> id "footer" の内容がここに入ります</div> </body> </html> ■ CSS部分 body { margin: 0px auto; padding: 0px; } #header { margin: 0px auto; padding: 0px; height: 50px; width: 800px; background: #666666; } #wrapper { margin: 0px auto; padding: 0px; height: 300px; width: 800px; background: #FFFF00; } #footer { margin: 0px auto 5px; padding: 0px; height: 60px; width: 800px; background: #00FFFF; } です。 もし、予想通りPCの縦幅の問題だとしたら、 １．コンテンツの少ないページはどのように対処するのか？ ２．PCによって縦幅が異なるが、大きな画面サイズのＰＣでは、小さな画面サイズのＰＣで正しく表示されるものも、このように下が空いてしまうのか？ ３．これまでの推測は間違えで、別の考え方から、エラーになるのか？ をご教授いただけますと幸いで御座います。 月曜日の朝から、くだらない質問かもしれませんが、宜しくお願いします。
- ベストアンサー
- HTML
