ウインドウを小さくするとbody上部ボーダが切れる
- ウインドウを小さくすると、bodyの上部ボーダーが切れる現象が発生しています。
- ブラウザウインドウを小さくし、スクロールバーが表示された状態で、スクロールバーを右に動かすと、bodyに設定してあるボーダーが途中で切れます。
- ウインドウサイズを小さくしてもページ上部のボーダーは常に両端までくる形にしたいです。ＩＥ８でもFirefox3.6.12でも同じ現象が発生します。
- ベストアンサー
ウインドウを小さくするとbody上部ボーダが切れる
ブラウザウインドウを小さくし（スクロールバーが表示された状態） スクロールバーを右に動かすと、bodyに設定してあるboder-topのボーダーが途中で切れます。 ウインドウサイズを小さくしてもページ上部のボーダーは常に両端までくる形にしたいです。 ＩＥ８でもFirefox3.6.12でも同じです。 サイトボックスとして、 <div id="site_box"> </div> でサイトＢＯＸは900pxとしており、 ＣＳＳで #site_box{ width: 900px; margin-right: auto; margin-left: auto; } として中央寄せをしています。（body自体はそのまま） ************XHTML************** <body> <div id="site_box"> <div id="header"> <div id="header_msg"><p>ページトップコメント</p></div> <div><img src="img/logo.gif" width="250" height="52" /></div> </div> <div id="main"> <div> <p>テスト</p> <p>テスト</p> <p>テスト</p> <p>テスト</p> </div> </div> <div id="footer"> <div class="copy"><p>Copyright © ******* All Rights Reserved.</p></div> </div> </div> </body> </html> *********ＣＳＳ**************** *{ margin:0px; padding:0px; } body{ border-top-width: 3px; border-top-style: solid; border-top-color: #0066FF; } #site_box{ width: 900px; margin-right: auto; margin-left: auto; } #header{ width: 900px; } #main{ margin-top: 10px; height: 600px; } #footer{ } /*** ヘッダー部 ***/ #header_msg{ text-align: right; margin-top: 10px; } .copy p{ text-align: center; } よろしくお願いします。
- method2027
- お礼率22% (18/79)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
bodyに直接枠線つけたりするのはいかがな物かと思いますけど、 widthも指定してやれば、途切れないです。 body{ width:900px; border-top-width: 3px; border-top-style: solid; border-top-color: #0066FF; }
関連するQ&A
- ブロックレベル要素内ブロックレベル要素のmargin-topが効かない
<html><head><style> *{ margin:0; paddgin:0; border:none; } div#wrap{ background:#BBB; width:600px; height:900px; margin:30px auto; } div#header{ background:#999; width:150px; height:60px; margin:30px; } </style></head><body> <div id="wrap"> <div id="header"> </div> </div> </body></html> 例えばこの用な場合で、divの中にdivが入っている場合など…中に入っているdiv要素のmargin-topが効きません。原因がよくわらないのですが、どのような条件の時にmargin-topは効かなくなるのでしょうか？また解決策はどのようなものがあるでしょうか？このようなケースでmargin-topが効かなくなったのが二度目でどうしても気になったので質問させていただきました。よろしくお願いします。
- ベストアンサー
- 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
- 上部の余白をなくしたいのですが・・・
Dreamweaver CS5でホームページを作成しています。 デザインビューで見ると一番上に隙間は出来ないのですが、ライブビューやブラウザーでプレビューすると,隙間が出来てしまいます。上部に隙間が出来ない方法を教えてください。 <body> <div id="headWrap"> <div id="header"> <h1><img src="imges/rogo.png" alt="**" width="365" height="74" /></h1> <ul> <li><a href="#">**</a></li> <li><a href="#">**</a></li> </ul> </div> </div> <div id="menu"> <div id="button"> <ul id="MenuBar1" class="MenuBarHorizontal"> <li><a href="#">HOME</a> </li> <li><a href="#">**</a> </li> </ul> </div> </div> <div id="contents"> <p>id "contents" の内容<!--/#contents--></p> </div> <div id="footer"> <div id="footerMenu"> <ul><li><a href="#">ホーム</a></li> <li><a href="#">**</a> </li> </ul> <address>Copyright © All Rights Reserved.</address> </div> </div> <script type="text/javascript"> var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"}); </script> </body> CSS部分 * { font-family:"Hiragino Kaku Gothic Pro", HiraKakuPro-W3, "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, "MS P ゴシック", verdana, sans-serif;color:#333; } body {background: #FFF url(imges/bg_body.gif) repeat-x left top; margin: 0px; padding: 0px; } a {text-decoration:none; } #headWrap {width: 100%; background: url(imges/bgimgHead.jpg) repeat-x left top; margin: 0px auto; padding: 0px 10px; } #header {height: 90px; width: 850px; margin: 0px auto; } #menu {height: 100px; width: 100%; background: url(imges/bgimgMemu.jpg) repeat-x left top; clear: both; } #button {height: 40px; width: 850px; margin: 0px auto; } #contents {width: 850px; background: #FFF; margin: 0px auto; clear: both; } #footer {width: 100%; background: url(imges/bgimgFoot.jpg) repeat-x left top; margin: 0px; } #footerMenu {margin: 0px auto; width: 850px; } #headWrap #header ul li {float: right; list-style: none; padding-left: 10px; padding-right: 10px; } #headWrap #header h1 img {float: left; margin-top: 0px; } #footer #footerMenu ul li {float: left; list-style: none; padding-right: 5px; ｝ どうぞよろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- CSSで文字が流れ込んでしまいます
CSS勉強中ですが、このように組んだらFireFoxで見ると左のコンテンツより右のテキストを増やした場合に左の<div id="leftside">の領域まで文字が行ってしまいます。 clear: bothを入れるのかなぁと思いつつ、色々なところに入れてみたのですが、変らなくて・・・。 どのようにしたらいいでしょうか。 body { margin-top: 0; background: #30689D; text-align: center; } #header{ width: 760px; margin-left: auto; margin-right: auto; background: #E2E2E2; } #container{ width: 760px; margin-left: auto; margin-right: auto; background: #FFFFFF; text-align: left; } #wrap { padding: 0px; } #leftside{ width: 170px; float: left; background: #FFFFFF; } #photo{ width: 570px; float: left; margin-left: 10px background: #FFFFFF; } #news{ width: 570px; margin-left: 10px background: #FFFFFF; } #footer{ width: 760px; margin-left: auto; margin-right: auto; padding: 10px 0px 10px 0px; background: #E2E2E2; text-align: right; } p { margin: 0; padding: 0; } -----HTML <div id="header">ヘッド</div> <div id="container"> <div id="wrap"> <div id="leftside"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </div> <div id="photo"> <p>写真を入れたいところ</p> </div> <div id="news"> <p>ここの文字をたくさん入れて下に増えるとと左に文字が流れ込んでしまいます。</p> <div id="footer">フッターく</div>
- ベストアンサー
- HTML
- ページ上部に空白ができます
いつもお世話になります。 dreamweaver8でホームページを作っています。 下記のような記述をすると、ページ上部に空白ができます。 どこを直せばよいのでしょうか、教えて下さい。 【CSS】 #body{ font-family:"メイリオ", Meiryo,"ＭＳ Ｐゴシック", Osaka,"Hiragino", "ヒラギノ角ゴ Pro W3", sans-selif,; color: #333333; font-size:10px; margin: 0; padding: 0; text-align: center; } #wrapper { width: 722px; margin-top:0px; margin-left: auto; margin-right: auto; background-image: url(img/sidebk2.jpg); background-repeat:repeat-y; } #header { background-color: #FFFDE5; background-image:url(img/title_bar.jpg) ; background-repeat:no-repeat; height: 62px; width: 722px; margin-bottom : 0px; } #header p { position: relative; margin: 0; top:42px; left:570px; width:150px; color:#ffffff; font-size: 11px; } 【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>無題ドキュメント</title> <link rel="stylesheet" type="text/css" href="style.css" media="all"> </head> <body> <div id="wrapper"> <div id="header"> <p>| <a href="http://***.com" target="_blank">ブログ </a>|<a href="../sitemap.html">サイトマップ</a> | </p> </div> </div> </body> </html>
- ベストアンサー
- ホームページ作成ソフト
- HP作成で背景画像が表示されないです・・
いつもお世話になっております。 今回は、HP作成のことでご指導いただきたく投稿致しました。 説明が上手くできていないと思いますが 宜しくお願い致します。 参考書片手にCSSにトライしていますが 一部、背景画像が表示できず困っています。 ネットで調べていますと「float」を使っている場合について 対処法が色々掲載されているのですが 何か間違っているようで、どれを試しても 背景画像を表示することができません。 下記にhtmlとｃｓｓを簡単に貼り付けました。 説明不足がありましたら、ご指摘下さい。 Dreamweaver MX2004を使っています。 － html － <body> <div id="container"> <div id="header"> →背景画像表示されます。 <p>＊＊＊＊＊</p> </div> <div id="box"> <div id="left"> →背景画像表示されます。 <p>＊＊＊＊＊ </p> </div> <div id="right"> →背景画像表示されません。テキストは表示されます。 <p>＊＊＊＊＊</p> </div> </div> <div id="footer"> <p>＊＊＊＊＊</p> </div> </div> </body> － ｃｓｓ － #container { width:800px; height:400px; top:0px; text-align:center; margin-left:auto;margin-right:auto; text-align:left; } #header { position: static; top:0px; font-size: 11px; padding-top: 0px; color: #003366; padding-left: 10px; width: 800px; background-image: url(img/*****.jpg); background-repeat: no-repeat; height: 120px; line-height: 25px; } #box{ width:800px; height: 600px; margin: 0 auto; } #left{ width:190px; float:left; padding-top: 50px; text-align: left; height: 600px; background-image: url(img/*****.png); background-repeat: no-repeat; padding-left: 20px; font-size: 12px; padding-bottom: 0px; } #right{ font-size: 10px; height: 600px; width: 590px; background-image: url(img/******.png); float:right; } #footer{ width:800px; clear:both; text-align: center; font-family: Osaka, "ヒラギノ角ゴ Pro W3", "HGSゴシックE"; color: #CC3300; font-size: 10px; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: solid; border-top-color: #999999; padding-top: 20px; }
- ベストアンサー
- ホームページ作成ソフト
- 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>
- ベストアンサー
- ホームページ作成ソフト
- CSSレイアウトでフッターをうまく配置出来ません。
CSSで初めてレイアウトしていますが、テキストがふえた場合、フッターが文章部分と重なってしまいます。文章部分が増えた分だけ、フッターの位置を自動的にずらすようにしたいのですが・・・floatで作り変えを考えていますが、今のやり方で出来るのかどうか、どうしても確認したいのです。どうぞ宜しくお願い致します。 以下サンプルのソースです。 <body> <div id="layout"> <div id="header"> <h1><img src="img/co.gif"></h1> </div> <div id="mainarea"> <div id="navi"> <h2><img src="img/button.gif"></h2> <ul> <li class="naviatem">メニュー</li> </ul> </div> <div id="main"><img src="img/contact.jpg"></div> <div id="scontents"> <form> <table width="90%" cellpadding="0" cellspacing="2" border="0"> <tr> <td class="contact">内容</td> <td class="contact1"><textarea cols="50" rows="10"></textarea></td> </tr> </table> </form> </div> </div> <div id="footer"> <p>フッター部分</p> </div> </div> </body> -------CSS------------- #layout{ width: 750px; height: 100%; margin-left: auto; margin-right: auto; } #header{ width: 750px; height: 63px; margin: 0px; } #mainarea{ margin-top: 16px; width: 750px; height: 100%; } #navi{ width: 183px; margin-left: 3px; } #main{ position:absolute; width: 561px; margin-left: 189px; top: 81px; } #footer { margin: 30em 0 0 0; width: 750px; border-top: 1px solid #666666; position : relative; z-index: 1; } #scontents{ position:absolute; margin-left: 192px; top: 250px; width: 553px; }
- ベストアンサー
- CSS
- 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; } よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- Safariでheight:100%のボックスを表示したいのです
Safariでheight:100%のボックスを表示したいのです。MacIE・WinIE・FireFox・Operaでは出来たのですが、どうしてもSafariだけheight:100%のボックスが出来上がらず・・・。 以下、記述したCSSとHTMLです。 HTML--------- <body> <div id="main"> <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 <h1>height100%のボックス</h1> <p> 標準準拠のIEやfirefoxでbody直下にheight100%のボックス </p> ・・・略 </div> </body> </html> CSS--- /* \*/ html{ height:100%; } /* \*/ body{ height:100%; width:80%; margin:0px auto; padding:0px; } div#main{ background-image:url(../images/contents_bg.gif); border:solid 1px #760014; border-width:0px 1px; height:100%; min-height: 100%; margin:0px auto; padding:0px; border:1px solid #ff0000; } body > #main{ height: auto; } h1{ margin:0px auto; padding:0
- ベストアンサー
- HTML
補足
bodyのwidthを900pxしてはだめです。 ブラウザを最大化したとき、ブラウザのボーダーが両端までこないです。 常に両端にくるようにしたかったです。 CSS body{ min-width:900px;/*ウインドウサイズ縮小によりbody上部のボーダーが切れるのを回避*/ } これで、できました。