CSSのborderが実際の領域より上に表示される
- CSSのborder-bottom指定により、div#contensの領域より上にborderが表示されてしまう現象が発生しています。
- この現象は、min-height:800px;の指定が原因である可能性があります。
- 解決策としては、min-heightの値を可変にする方法や、別の方法で要素の高さを調整することが考えられます。
- ベストアンサー
CSSのborderが実際の領域より上に表示される
お世話になります。 CSSのborder-bottom指定のことでどうしても分からないことがあります。 div#contensにborder-bottom指定をしてその直下のdiv#footerと区別したいと考えています。 本当はdiv#footerにborder-top指定すればいいのでしょうが、footerはbackground-imageが2500pxあり、border-topすると、2500px分表示されます。 実際のコンテンツ領域は800px分なので、800pxだけのborderがほしいのです。 ところが、div#contensにborder-bottom指定すると、実際の情報量より上にborderが表示されます。これはどうしてでしょうか？ いろいろ考察したところ、どうやらmin-height:800px;の指定が原因で適用されているようです。min-heightはページによって情報が少ない場合でもある程度の高さを確保するために設定していますが、800px以上の情報量となる場合は、その情報量に沿ってきちんとborderも可変してほしいのです。解決法をどうか教えていただけないでしょうか。 よろしくお願いします。 CSS--- body { background-image:url(../images/site-body.jpg);←この画像が2500pxあります。 background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin:0px; } div#header { width:800px; height:150px; margin-left:auto; margin-right:auto; } div#contens { border-bottom:1px dotted #333333; width:800px; height:auto !important; min-height:800px; margin-left:auto; margin-right:auto; } div#footer { background-image:url(../images/footer-bg2.jpg) ;←この画像も2500pxあります。 background-repeat:no-repeat; background-position:bottom; height:100px; } HTML--- <body> <div id="header"> ～省略～ </div> <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> </div> <div id="footer"> ～省略～ </div> </body>
- toonie
- お礼率26% (55/210)
- ホームページ作成ソフト
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
toonie さん 先日回答したところを応用しましょう。 http://okwave.jp/qa/q6687095.html 「背景画像が表示されない」場合の対処 NO.2でヒントがありますし、同じ要領の何かでclearをする。 今回の質問内容だけなら、borderは表示される。 変な質問だから、誰も回答してくれない・・・ #leftmenu{ float:left;} #rightmenu{ float:left;} このCSSが書いてないけど、これを使ってますよね？ だとすると、clearが無いから、 div#contensが把握されない。 ※ 前質問の背景画像が解釈されないのと同じ・・・ --------- float＋clear --------- clearはコンテンツによって色々な方法があり、 基本を覚えないと何もできません。 簡単な方法だと、 <div id="rightmenu">～省略～</div> の後にclear:both;を設定。 <br style="clear:both;">でも出来るし、 <div style="clear:both;"></div>の空要素を使う場合もある。 自分が自由に出来るなら、 何かブロック要素のコンテンツをを配置する。 例えば、 <p style="clear:both;">文章文章文章</p> デザインやコンテンツ的に置けないのなら、 clearfixを使うか、ついでに使いまわすか。 clearはテクニックなので、どれが正しいとか良い訳ではないです。 ------------------- ＞どうやらmin-height:800px;の指定が原因で適用されているようです。 違います。froatです。 具体的には、※後半のポイント部分で （分かりやすいように背景色を付けた） div#contens { border-bottom:1px dotted #333333; width:800px; /* clearfixも考慮しheight類削除 */ margin-left:auto; margin-right:auto; } /* これありますよね？この辺を変更 */ #leftmenu{ float:left;width:200px; background-color:lime;} #rightmenu{ min-height:800px; /* ここにmin-height追加 */ float:left;width:600px; background-color:yellow;} * html #rightmenu{ height: auto !important; height: 800px;}/* ハック */ div#footer { background-image:url(../images/footer-bg2.jpg) ; background-repeat:no-repeat; background-position:bottom left; /* leftかcenter追加 */ height:100px; } <div id="contens"> <div id="leftmenu"> ～省略～ </div> <div id="rightmenu"> ～省略～ </div> <div style="clear:both;"></div> <!-- これがclear --> </div>
関連するQ&A
- CSSでのレイアウトが崩れてしまうんです。
お世話になります。ＣＳＳビギナーなのですが、どうかご教授ください。800pxの画面のセンター表示のサイトを作りたいのですが、divでheader800px/container800px/contents600px（contensの中にleftmenu150px/centermenu450px/footer600pxとさらにdiv分けしてあります。）/leftmenu200pxという具合にレイアウトしたいのですが、leftmenuがcontensの右横にきてくれません。footerの下に表示されます。さらに言うとcontens自体が真ん中に表示されてしまいます。float:leftを指定するとブラウザ画面の左側にいってしまいますし...。これはどうしてでしょう？素人ゆえ基本的なことを見落としているかもしれませんがどなたか教えていただけないでしょうか？ ■HTML </head> <body> <div id="header">省略</div> <div id="container">省略</div> <div id="contens"> <div id="leftmenu">省略</div> <div id="centermenu">省略</div> <div id="footer">省略</div> </div> <div id="rightmenu">省略</div> </body> </html> ■CSS div#header { padding-top:0px; width:800px; margin-left:auto; margin-right:auto; background-color:#00CC00; } div#container { width:800px; margin-left:auto; margin-right:auto; } div#contens { width:600px; margin-left:auto; margin-right:auto; } div#leftmenu { width:150px; float:left; } div#centermenu { width:450px; float:left; margin-left:auto; margin-right:auto; background-color:#FFFFFF; } div#footer { float:left; width:600px; padding-top:50px; } div#rightmenu { width:200px; float:right; background-color:rgb(147,182,110); padding-bottom:5px; } body { background-attachment:scroll; background-color:#FFFFFF; background-image:url(../image/bg.jpg); background-repeat:no-repeat; background-position:center top; }
- ベストアンサー
- ブログ
- CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのは
CSSでレイアウト崩れ、＃rightmenuが下がって余白ができるのはなぜ？ あまりCSSに詳しくないものです。どうかご教授ください。 添付画像のようにに、div分けして全体のデザインを制作しています。 #headerの下に#contensがあり、その中に#leftmenuと#rightmenuと区分けしています。 #leftmenuがメニューボタン部分で#rightmenuが情報を表示するコンテンツ部分です。 #contensはそれで閉じ、最後に#footerがあります。 ところが、#rightmenu部分に望んでいない余白ができます。 #leftmenuと頭で揃えたいのですが、何故か220pxほど下がって表示してしまうのです。（paddingやmarginの設定はしていません） 作業はdreamweaverで作なっているのですが、便利なものでボックスにマウスを寄せると赤いラインでボックスの表示をしてくれます。それを右クリックしてどのdivがそうさせているのか調べたら#contensだとありました。 しかし#contensのCSSをチェックしても何が原因なのか分かりません。 これはどうしてでしょうか？ 私個人の知識ではどうしても分かりかね質問させていただきました。 HTMLとCSSにどこかおかしなところがあればどうか教えてください。 よろしくお願いします。 HTML----------------- <body> <div id="header"> <h1>タイトル</h1> </div> <div id="contens"> <div id="leftmenu"> <a href="" id="ボタン1"></a> <a href="" id="ボタン2"></a> <a href="" id="ボタン3"></a> <a href="" id="ボタン4"></a> <a href="" id="ボタン5"></a> <a href="" id="ボタン6"></a> <a href="" id="ボタン7"></a> </div> <div id="rightrmenu"> <div id="rightbox-top"> <h3>本文</h3> <p>挨拶文</p> </div> <div id="rightbox-bottom"> </div> </div> </div> <div id="footer"> <p class="copyright">Copyrightうんぬん</p> </div> </body> CSS----------------- body { background-image:url(../image/top.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); } div#header { width:800px; height:139px; margin-left:auto; margin-right:auto; } div#contens { width:800px; height:auto; min-height:520px; margin-left:auto; margin-right:auto; } div#leftmenu { width:161px; } div#rightmenu { width:639px; float:right; } div#footer { clear:both; height:100px; background-image:url(../image/top-bottom.jpg); background-position:top center; background-repeat:no-repeat; background-color:rgb(237,232,195); margin-left:auto; margin-right:auto; }
- ベストアンサー
- ホームページ作成ソフト
- borderをページの下まで伸ばしたい
お世話になります。既出の質問を見たのですが、解決できず質問させていただきます。 テーブルを使い左右にレイアウトを分けています。 左のメニュー部分の上下両サイドにborderを設定していますが、メニュー部分の方が圧倒的にメインよりコンテンツが少なく、ページの途中でborderが途切れてしまいます。 メインコンテンツの縦量に合わせて下まで伸びて欲しいのですが、どうすればいいのでしょうか？ 恐れ入りますが下記ソースです。 /*CSS*/ body { margin: 0px auto; padding: 0px; height:100%; width: 760px; text-align:center; position:relative; } #header { padding:0px ; margin: 0px auto; width: 760px; height: auto; } #contents { margin: 0px auto; padding: 0px; height:100%; width: 760px; background-color:#FFFFFF } .side{/*メニュー部分*/ margin:0px; padding:0px 0px 20px; border:1px #666666 solid ; width:163px; height:auto; } .footer {/*フッターの背景画像サイズに合わせheightを設定*/ margin:0px; padding:10px; width: 760px; height:72px; text-align:left; background-image:url(image/bottom.gif); background-repeat:no-repeat; border:0px; } .coretable{/*画面レイアウト左右分けテーブル*/ margin:5px 0px 0px; padding:0px; width:760px; } <!--html--> <body> <div id="header"> ヘッダー内容 </div> <div id="contents"> <table border="0" cellpadding="0" cellspacing="0" class="coretable"> <tr><td width="165" align="center" valign="top"> <div class="side"> メニュー内容 </div> </td> <td width="595" align="center" valign="top"> メインコンテンツ内容 </td> </tr> </table> </div> <div id="footer"> フッター内容 </div> </body> </html> あるサイトで拝見して、 .sideに height:100%;/* for IE6 */ min-height:100%; を加え、 html{ height:100%; } body{ height:100%;} としてみたところ、borderは伸びず、footerがページの途中に上がってきてしまうという現象でした。 テーブルを使っているのが悪いのでしょうか？ どうかお知恵をお貸し下さい。
- ベストアンサー
- CSS
- footerを{position:absolute;bottom:0p
footerを{position:absolute;bottom:0px;}で固定しようとしたら、今度はブラウザのウィンドウの上下を縮めるとfooterが上部の要素を上に通り越してしまいます。 これを正しく、footerが上部要素に届いたらfooterの移動がと止めるにはどうしたらよいでしょうか？ 以下HTMLとCSSです。 <html> ・・・・中略 <body> <div id="wrapper"> <div id="head"> ・・・・中略(ナビゲーションなどあって） </div> <div id="mainContainer"> ・・・・中略(3カラム等あって） </div>mainContainerEND <div id="footer"> </div> </div>(wrapperの閉じ) </body> </html> ######css########## html { height:100%; } body { height:100%; } div#wrapper { width:800px; height:100%; margin:10px auto 0 auto; border:#000000 solid 1px; background:#FFFFFF; } div#header { width:780px; margin:10px auto 10px auto; } div#mainContainer { width:780px; height:auto; margin:0 auto; } div#footer { clear:both; height:20px; text-align:center; width:800px; background-image:url(footer_image.jpg) no-repeat left bottom; position:absolute; bottom:0; ######ココマデ よろしくお願いします。
- 締切済み
- HTML
- HPの作成を教えてください。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。 作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。 何分初心者なので分かりやすく教えて頂ければ助かります。 body , html { height: 100%; margin: 0; padding: 0; text-align: center; /* 標準文字色 */ font-size : 100%; background-image : url(../imege/bg01.png); background-repeat : repeat-x;background-position : left top; } /* Safari用ハック 文字サイズ調整 */ /*\*/ html:\66irst-child body{ font-size: 90%; } /* end */ } img{ border-top: 0; border-right: 0; border-bottom: 0; border-left: 0; } #container { width: 100%; position: relative; height : 100%; min-height: 100%; background-image : url(../imege/fbg01.png); background-repeat : repeat-x;background-position : left bottom; } #header{ width: 100%; height : 84px; margin-top : 0px; margin-bottom : 0px; text-indent : -9999px; } #contents { padding-top : 84px; padding-bottom: 100px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; } #footer { position: fixed; bottom: 0; width: 100%; height: 100px; margin-left : auto; margin-right : auto; } #header-in{ width : 900px; height : 84px; position : relative; margin-left : auto; margin-right : auto; margin-top : 0px; margin-bottom : 1px; } #contents-in{ margin-left : auto; margin-right : auto; width : 900px; position : relative; margin-top : 0px; margin-bottom : 0px; } #footer-in{ margin-left : auto; margin-right : auto; margin-bottom : 0px; width : 900px; height : 100px; position : relative; margin-top : 0px; } #header-logo{ width : 500px; height : 84px; float : left; z-index: 2; } #header-logo2{ width : 200px; height : 84px; float : left; z-index: 2; } <div id="container"> <div id="header"> <div id="header-in">ヘッダー <div id="header-logo">トップロゴ</div> <div id="header-logo2">お問い合わせ</div> </div> </div> <div id="contents"> <div id="contents-in">コンテンツ</div> </div> <div id="footer"> <div id="footer-in">フッター</div> </div> </div> よろしくお願いいたします。
- ベストアンサー
- CSS
- [CSS] 常にフッターは下部に表示 IE7
常にフッターは下部にくるように下記のスタイルとhtmlを使用しております。 内容が少ない場合でも、下記のように常に画面一番下にくるようになっております。 ---------------------------- 内容 ---------------------------- フッター部 ---------------------------- 【HTML側】 <body> <div id="container"> <div id="main"><p>内容</p></div> <div id="footer">Copyright</div> </div> </body> 【CSS】 body,html{height:100%;} #container {border:1px #000 solid; width: 900px; margin: 0px auto;position: relative;height: 100%;min-height: 100%;} body > #container {height: auto;} #main {background:#f00;padding-bottom: 100px;} #footer {background:#ff0; position: absolute; bottom: 0px;left:0px; height: 100px; width: 100%;} IE9などですと、最初に画面を開いて一番下にいたフッターが、 画面サイズを広げると一緒にくっついて一番したのままでいるのですが、 IE７で見ると、最初に開いた画面では一番下にいるのに、画面を広げると その場所のままです。更新をかけると一番下に移動するのですが、 これはIE7では無理なのでしょうか？ 広げたら一緒にフッター部がくっついていってほしいのですが、わかる方が いらっしゃいましたら、ご教授お願いいたします。
- ベストアンサー
- CSS
- CSSでの質問です
初めて段組を作ってみたんですが、上の余白を無くするにはどうしたらいいのでしょうか？ ソースは以下のとおりです。 <style type="text/css"> <!-- #wrapper { width: 760px; margin: 0px auto; } #header { background-color: #9933FF; height: 50px; top: 0px; } #primary { background-color: #c7d5ed; float: right; width: 550px; margin-top: 10px; margin-bottom: 10px; } #secondary { background-color: #f9cfba; float: left; width: 200px; margin-top: 10px; margin-bottom: 10px; } #footer { clear: both; background-color: #99FFFF; height: 50px; } --> </style> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="primary"> </div> <div id="secondary"> </div> <div id="footer"></div> </div> </body> </html> センタリングを維持したまま上の余白をクリアしたいのですが、何か解消法はありますか？
- 締切済み
- 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による配置の計算が合いません
cssによる配置で width の計算がうまくあいません。 コンテンツ部分が 750(ページ)-5(padding)-1(border)-134(navi-width)-5(padding)-1(border)=604(contents-border) ちなみにSafariでは計算通りでした。 IE6ではだめなようです。 くわしくは <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> BODY { padding-top : 0px; margin-top : 0px; text-align : center; padding-bottom : 0px; margin-bottom : 0px; } #page { background-color : #dd22aa; width : 750px; margin : 0; padding-top : 0px; text-align : left; margin-top : 0px; margin-left : auto; margin-right : auto; margin-bottom : 0px; height: 100%; padding : 0px ; } #header { width : 750px; height : 80px; position : relative; float:left; clear : both; background-color : #008899; padding: 0px; margin: 0px; color : #b99859; } #navi { width : 134px; height : 399px; float : left; position : relative; clear : both; background-color : #ffffff; background-repeat : no-repeat;background-position : center top; padding-top : 50px; padding-left : 0px; padding-right : 0px; padding-bottom : 0px; margin-top : 0px; margin-left : 5px; margin-right : 0px; margin-bottom : 0px; border-left-style : solid; border-left-width : 1px; border-left-color : #000000; } #contents { width :596px; height : 399px; float : right; position : relative; padding : 0px; margin-top : 0px; margin-left : 0px; margin-right : 5px; margin-bottom : 0px; background-color: #9999FF; border-right-style : solid; border-right-width : 1px; border-right-color : #000000; } </style> <title>テスト</title> </head> <body> <div id="page"> <div id="header"> ヘッダー </div> <div id="navi"> ナビゲーション。左のパディングが5px。左のボダーが1px。幅が134px。 </div> <div id="contents"> コンテンツ。右のパディングが5px。右のボダーが1px。幅が596px。計算すると、750-5-1-134-5-1=604(幅)となるはずなのですが、596pxでないとはまりません。 </div> </div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- 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
お礼
ありがとうございます。 clearしてないのがいけなかったんですね！ HTMLのほうに記述するのも知りませんでした。 いつも本当にお世話になります。 ありがとうございました～