- ベストアンサー
CSSのボックスが縦に並ばない？解決方法を教えてください！
outbraveの回答
外枠に margin-bottom を設定するだけでいいと思いますけど。 <!DOCTYPE html> <html lang="ja"> <head> <style type="text/css"> #mainbox { width:800px; margin:auto; border:solid 1px; height:1200px; margin-bottom:150px; } </style> <title></title> </head> <body> <div id="mainbox"> </div> </body> </html>
関連するQ&A
- cssに関する質問です。
cssに関する質問です。 フッターをbodyタグの直後に置きたいのです。 そうするとフッターはbodyタグの直後に表示されてしまいます。 cssでフッターだけをホームページの最後に表示する方法はありますか。 <body> <div id="footer">フッター ホームページの一番下に表示したい。</div> <div id="content>ホームページの内容 フッターよりも上に表示したい。</div> </body> ＣＳＳハックのような方法でも構いませんが、実現方法があれば教えてください。 よろしくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- ［CSS］ヘッダー固定＋コンテンツの縦位置可変
CSSでのヘッダー固定に関する質問です。 ヘッダーを固定表示しつつ、ヘッダーの縦幅が文字サイズの可変などで大小した時に それにあわせてその下部の固定じゃないコンテンツ部分の縦の位置が 調整されるようにCSSで組むことは可能でしょうか？ ヘッダー固定関連を調べてみたのですが、 条件に合うものがうまく見つけられなかったので、 恐れ入りますが質問させていただきました。 添付画像のような処理を行いたいと思っています。 ●文字サイズ可変に対応できない例 #header{ position:fixed; (またはposition:absolute;) width:100%; height:100px;" } #content{ width:100%; margin:100px 0 0;(またはpadding) } <body> <div id="header" >******</div> <div id="content">*****</div> </body> これだと#header内の文字サイズが大きくなった場合、枠からはみ出してしまいます。 現在はこれを用いています。（IE6対応などは行っています） ●文字サイズ可変に対応出来るが、固定部分に対応出来ない？ http://www.rr.iij4u.or.jp/~kazumix/d/css/sample/header_footer.html こちらのやり方？ ●やりたいこと <body> <div id="header"> <div id="header1">テキスト テキスト テキスト</div> <div id="header2">画像や動画など縦幅は固定</div> <div id="header3">テキスト テキスト テキスト</div> </div> <div id="content">******</div> </body> この形で、 header1とheader3はテキストが入るのでfirefox等の ブラウザの文字サイズ変更にて縦幅が可変しますが、 header2は常に縦幅が固定(100pxなど)です。 この条件の#headerの高さに応じて、スクロールバーが一番上にある状態の時は #content部分が常にピタッと#headerの下にひっついた状態にしたいです。 （スクロールバーは#content部分ではなく、body全体に出る形） この条件で、CSSのみで、ヘッダー固定を実現することは可能でしょうか？ htmlの書き方は見た目が実現可能であれば必ずしも●やりたいこと の部分のものと同じでなくてもかまいません。 js等必要でしょうか？ ご存知の方、ご教授いただけますと幸いでございます。
- ベストアンサー
- CSS
- position: relativeでIE6に余分な空白ができる
position: relativeを使って、divボックスを移動させました。 が、IE6で見ると、本来そのdivが表示されるはずだった場所に空白のみが残ってしまい、困っています。（ie7、FireFox、Safariなどは大丈夫） この空白を無くす方法をご存知の方、ご教示いただけませんでしょうか？ ソースは以下のような感じです。 －－－－－－－－－－－－－－－－－ <body> ■略■ <div id=\"outer\"> <div id=\"maincontents\">メインコンテンツが入っています。</div> <div id=\"gazou\">メインコンテンツの右上に重ねて表示したいbox</div> </div> ■略■ </body> －－－－－－－－－－－－－－－－－ #gazou { position: relative; top : -700px; left : 300px; width: 100px; height : 200px; background: url(images/gazou.gif) no-repeat; } －－－－－－－－－－－－－－－－－
- 締切済み
- HTML
- position: relativeでIE6に余分な空白ができる
position: relativeを使って、divボックスを移動させました。 が、IE6で見ると、本来そのdivが表示されるはずだった場所に空白のみが残ってしまい、困っています。（ie7、FireFox、Safariなどは大丈夫） この空白を無くす方法をご存知の方、ご教示いただけませんでしょうか？ ソースは以下のような感じです。 －－－－－－－－－－－－－－－－－ <body> ■略■ <div id=\\\\\\\"outer\\\\\\\"> <div id=\\\\\\\"maincontents\\\\\\\">メインコンテンツが入っています。</div> <div id=\\\\\\\"gazou\\\\\\\">メインコンテンツの右上に重ねて表示したいbox</div> </div> ■略■ </body> －－－－－－－－－－－－－－－－－ #gazou { position: relative; top : -700px; left : 300px; width: 100px; height : 200px; background: url(images/gazou.gif) no-repeat; } －－－－－－－－－－－－－－－－－
- ベストアンサー
- HTML
- CSSで背景画像が表示されない
CSSレイアウトで通常のHTMLで作成しています。 背景画像が表示されないくて困っています。 他の方の質問で似た事例があったのと、 情報サイトを見てみたのですがどうしても上手くいきません。 この場合floatとclearはどう使えば背景が表示されるのでしょうか？ http://oshiete1.goo.ne.jp/qa3882745.html http://2nose.com/css/?ID=120 bodyには別背景を指定してあるのでbodyへの指定はできません。 何かアドバイスがあれば教えて頂けますでしょうか。(__) 確認はIE8です。 [ css ]----------------------------------------------------- #wrap{ width: 920px; height: 100%; margin-left: auto; margin-right: auto; background: url(../img/background.jpg) repeat-y; } #contents{ clear: both; } #sidemenu{ width: 275px; float: left; } #mainbox{ width: 570px; float:right; } [ html ]---------------------------------------------------- <div id="wrap"> <div id="contents"> <div id="sidemenu">サイドメニュー内容</div> <div id="mainbox">メインコンテンツ</div> </div> </div> 以上です、よろしくおねがいします！
- ベストアンサー
- 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
- HTMLで横幅をCSSで設定できません。
HTMLで横幅をCSSで設定できません。 headerを作成しているのですが、画像のように横幅が外枠の wrapperをはみ出して表示されてしまいます。 はみ出した値は5pxとpaddingで指定した値と一致します。 headerをtableタグで作成した場合、横幅700pxの枠中での padding-left:5px;になり、横幅には変化はありません。 しかし、<div id="header">で横幅を700pxとし、 padding-left:5px;とすると、headerの横幅が 5px増えてしまいます。 <div id="header">の横幅を変化させずに、 paddingを指定することは可能なのでしょうか。 わかる方いらっしゃいましたら宜しくお願い致します。 ■HTML <html> <body> <div id="wrapper"> <div id="header"></div> </div> </body> </html> ■CSS #wrapper { width: 700px; } #header { width: 700px; padding-left: 5px; }
- ベストアンサー
- HTML
- CSSについてです
tumblrのテーマを作っているのですがサイドバーのレイアウトがうまくいきません。 具体的には、サイドバーがコンテンツがある部分の長さまでしか伸びず、それより下は記事の部分が食い込んでしまうといった問題が発生しています。 僕は、サイドバーの横にあるborder-rightを記事などほかの部分と同じ長さまできっちり伸びるようにしたいです。 このサイトを見てこんな設定をしてみたのですがこれでは画面に表示されている部分までしか効果がなくスクロールしたら意味がなくなってしまいます。 サイト http://d.hatena.ne.jp/seto-san/20081215/1229335070 HTML <body> <div id="body">本文</div> </body> CSS * { margin: 0px; padding: 0px; } html{ height: 100%; } body{ height: 100%; } #body { height: 100%; min-height: 100%; } body > #body { height: auto; } tumblrのテーマはごちゃごちゃしているので、簡易的なページを位置から作ってそこでサイドバーを実装してみてもうまくいきませんでした。 何かうまいやり方があったら教えてください
- 締切済み
- CSS
- CSSで高さ100％のレイアウト
テーブルを使用せずCSSでのレイアウトなのですが フッター位置をブラウザの一番下にマージン無しで指定したいのですが出来ません。 テーブルでは <table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td valign="top">内容</td> </tr> <tr> <td valign="bottom">フッター</td> </tr> </table> というように指定していたのですが CSSでのレイアウトはHTMLを <div id="container"> <div class="content">内容</div> <div id="footer">フッター</div> </div> .CSS では #container { height: 100%; } は無効なのでしょうか？ 他のやり方でもフッターをブラウザの一番下にマージン無しでレイアウトできる方法があったら教えて下さい。
- ベストアンサー
- CSS
- CSSについて
下記ののCSSでmainContentの780px を250pxと530pxに分割する方法を教えてください。 DW CS3を使用しています。 よろしくお願いいたします。 <style type="text/css"> <!-- body { background: #666666; margin: 0; /* 複数の異なるブラウザの初期設定値に対応するため、body エレメントのマージンと余白を 0 にすることをお勧めします */ padding: 0; text-align: center; /* これにより、IE 5* ブラウザではコンテナが中央揃えになります。そして、テキストは、#container セレクタの初期設定である左揃えに設定されます */ color: ffffff; background-color: #000000; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 100%; } .oneColFixCtrHdr #container { width: 780px; /* 最大幅である 800px より 20px 小さくすることにより、ブラウザクロームの使用が可能となり、水平スクロールバーが表示されなくなります */ background: #000000; margin: 0 auto; /* 自動マージン（幅と連動）により、ページが中央揃えになります */ border: 0px solid #000000; text-align: left; /* この設定は body エレメントの text-align: center より優先されます。 */ } .oneColFixCtrHdr #header { padding: 0 0px 0 0px; /* この余白は、その下に表示される div のエレメントの左揃えと一致します。#header でテキストの代わりにイメージが使用される場合は、必要に応じて、余白を削除してください。 */ background-color: 000000; } .oneColFixCtrHdr #header h1 { margin: 0; /* #header div の最後のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間の原因不明のスペース）が回避されます。div の周囲に境界線が適用されている場合は、境界線によってマージンの相殺が回避されるため、この操作は不要です */ padding: 10px 0; /* マージンの代わりに余白を使用して、エレメントを div の端に接触しない位置に維持することができます */ } .oneColFixCtrHdr #mainContent { padding: 0px; background-color: #000000; } .oneColFixCtrHdr #footer { padding: 0 0px; background-color: #444444; } .oneColFixCtrHdr #footer p { margin: 0; /* フッターの最初のエレメントのマージンを 0 に設定することにより、マージンの相殺（div 間のスペース）が回避されます */ padding: 10px 0; /* このエレメントの余白により、マージンの相殺を発生させることなく、マージンの効果とまったく同じように、スペースが設定されます */ } --> </style>
- 締切済み
- ホームページ作成ソフト
お礼
回答ありがとうございました。 解決せずに締切りますが、一番最初に頂いたのでベストアンサーにさせて頂きます。
補足
なぜだかわからないですが、外枠のボックスに margin-bottom: 100px; を足しでも、何もかわらないんです・・・。