スタイルシートの外枠について質問です。
- スタイルシートの外枠について質問です。外部ファイルに.container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66}と記入、htmlに<link rel="stylesheet" href="（スタイルシートのURL）" type="text/css">と書きました。
- margin:30px 0px 100px -450pxで指定したように、ブラウザ上から30pxあけて外枠が表示され始めますが、外枠の下がブラウザにぴったりくっついてしまいます。
- 場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。どこが間違っているのか、教えていただけると大変助かります。
- ベストアンサー
スタイルシートの外枠について質問です。
スタイルシートの外枠について質問です。 外部ファイルに .container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66} と記入、htmlに <link rel="stylesheet" href="（スタイルシートのURL）" type="text/css"> </head> <body> <!-- --> <div class="container"><!--全体の横幅など指定 --> </div> </body> </html> と書きました。 margin:30px 0px 100px -450pxで指定したように、ブラウザ上から30pxあけて外枠が表示され始めますが、外枠の下がブラウザにぴったりくっついてしまいます。 場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。 どこが間違っているのか、教えていただけると大変助かります。
- neko984
- お礼率8% (4/45)
- ホームページ作成ソフト
- 回答数1
- ありがとう数11
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
＞場合によっては外枠の下が見えなくなるようで、100pxあけての表示が上手くできません。 というか、ウィンドウ幅が最も一般的な1024幅、720px高さでははみ出して見えない・・ .container{background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; ;border:8px; border-style:ridge;margin:30px 0px 100px -450px ;border-color:#00ff66} ？？？の書き方も、なぜそうしているのかわかりませんが、簡略化プロパティをきちんと書きなおして同じプロパティを整理すると .container{ background-color:white; position: absolute; left: 50%; width: 900px; height:1500px; margin-top:30px; margin-right: 0px; margin-bottom: 100px; margin-left: -450px; } 絶対配置ですから、margin-right、margin-bottomは無効ないし、CSSで決めようがありません。 そもそも、staticであるbody直下にあるdiv.containerの意味が不明です。 body{ height:1630px; } .main{ background-color:white; margin-left: auto; margin-right:auto; margin-top:30px; width: 900px; height:1500px; } となるはずです。実際には色々なウィンドウサイズに合わせて、最大で900px、最小で600px、それ以外はウィンドウ幅の90%でセンター配置するのが良いでしょう。 【参考サイト】 ボックスモデル http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/box.html#mpb-examples
関連するQ&A
- スタイルシートで、マージン０に出来ません
夜分に失礼します。 個人の趣味のホームページですが ブラウザ上部と左部のマージンを０に出来ずに困っています。 スタイルシートで、margin 0;としても、マージン０にならないのに BODY句に直打ちすると、マージン０になるので、もう、ワケが分かりません。 ご参考までに、ソースを記します。 また、ブラウザはIE6です。 どうぞ、宜しくお願いします。 <HTML> <HEAD> 中略 <STYLE type=text/css> BODY_i{margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; font-family: "ＭＳ ゴシック","Osaka－等幅",monospace; font-size:12pt; color:#696969; line-height:150%;} .photo1{width:982px; height:730px; background-color:#DCDCDC; border-style:solid ridge ridge solid; border-width:1px 2px 2px 2px; border-color:#DCDCDC #DCDCDC #DCDCDC #DCDCDC; text-align:center; vertical-align:middle; padding:11px 11px 11px 11px;} </STYLE> </HEAD> <BODY class=BODY_i> <!-- <BODY topmargin=0 leftmargin=0> --> <P class=photo1> <IMG SRC="test_CIMG6224.JPG"> </P> </BODY> </HTML>
- 締切済み
- その他（インターネット・Webサービス）
- Opera（10.10）でのスタイルシートの表示について
Opera（10.10）でのスタイルシートの表示について Operaでのスタイルシートの「border」の表示について質問させて下さい。 これは例ですが、HTMLとCSSを以下のとおりに設定しているとしますね。 ------------------------------------------------------------------ <body> <div id="layout"> <div id="box1"> <p>ボーダーのテスト</p> </div> </div> </body> ------------------------------------------------------------------ *{ margin : 0px; padding : 0px; } #layout{ width : 800px; height : 600px; padding : 10px; margin-left : auto; margin-right : auto; background-color : #FFF; } #box1{ width : 780px; height : 580px; padding : 10px; border-top : solid 1px #D1D1D1; border-left : solid 1px #D1D1D1; border-right : dashed 1px #D1D1D1; border-bottom : dashed 1px #D1D1D1; background-color : #FFF; } ------------------------------------------------------------------ このように設定した場合、「id="box3"」のボーダーは上と左が直線、 右と下が点線と表示されるのが正しい表示だと思います。 しかし、Operaで閲覧した場合なぜか「border-left」のみ表示されません。 「border-left」を「solid」から「dashed」に変更すると表示されます。 borderに合わせてwidthもちゃんと横に伸びているので、 CSSが適用されていないわけではないと思います。 また、「border-left」を「dashed」から「solid」に変更した場合には、 「border-top」と「border-right」の両方が見えなくなってしまいます。 どちらの問題も、IE6やFirefox（3.5.7）では指定通り正しく表示されました。 Operaでも同様に正しく表示させるにはどうすればよいのでしょうか。 よろしくお願いいたします。
- ベストアンサー
- HTML
- スタイルシートで位置固定すると、スタイルシートでの改ページ指定ができなくなる
スタイルシートのpositionを使用して位置固定すると、page-break-beforでの 改ページができなくなります。 位置固定し、かつ、その文字の直前で改ページする方法はないでしょうか？ ブラウザはIE5.5以降を考えてます。 ====================================================================== <html> <body> <div style="position:absolute; top:100px;"> テスト１ </div> <div style="position:absolute; top:150px; page-break-before:always;"> テスト２(この文字の直前で改ページさせたい） </div> <div style="position:absolute; top:200px;"> テスト３ </div> </body> </html> ====================================================================== 宜しくお願いします。
- ベストアンサー
- HTML
- スタイルシートに関して
最近、スタイルシートの勉強を始めました。 下記の様なCSS,HTMLを作成しブラウザーで表示するとIEは意図通りに IE以外(FireFox,Opera等)ではIEと違う（意図と異なる）表示になり 悩んでいます。 表示したい内容 黒いベース(300px,300px)の上に紫の四角(200px,200px)、さらにその上に緑の四角(100px,100px)を配置したい。 配置は、ブラウザーの左上隅より中心を上から150px,左から150pxとし３つ共に中心を合わせる。 IEでは、意図通りに表示 IE以外では、上にスペースが空き、各boxの表示位置が上にずれている CSS .box0 { width:300px; height:300px; background-color:#000000; } .box1 { margin-top:50px; margin-left:50px; width:200px; height:200px; background-color:#ff00ff; } .box2 { margin-top:50px; margin-left:50px; width:100px; height:100px; background-color:#00ff00; } HTML <BODY> <div class="box0"> <div class="box1"> <div class="box2"> </div> </div> </div> </body> ＊内容が悪いよとかCSSではできないよなどご意見・アドバイス頂ければ幸いです。
- ベストアンサー
- HTML
- 外部スタイルシートが読み込めない
こんにちは。 外部スタイルシートが読み込めず 困っています。 HTMLは、 <html> <head> <link rel="stylesheet" href="controlbox2.css" type="text/css"> </head> <body> <div class="modal">syun</div> </body> </html> controlbox2.cssは .modal{ background-color:#fff; padding:10px; border:1px solid #333; } だけです。 もちろん同じディレクトリで あり何度も確認しています。 ブラウザは、IE7です。 ヘッダー部分に スタイルシートを書くと 当然効果があります。 <head> <style type="text/css"> .modal{ background-color:#fff; padding:10px; border:1px solid #333; } </style> </head> 文字コードは、ともに SHIFT_JISで保存しています。 何が悪いのか、 全くわかりません。 何か分かる人がいましたら、 よろしくお願いします。
- ベストアンサー
- HTML
- ホームページビルダーでスタイルシートを使ったのですが？
今、ホームページビルダーで簡単な2カラム（右メニュー）のテンプレートを作っています。 質問ですが、メニューバー（サイドバー）に色を付けたくて、画像を使う事にしました。 <div class="main">に画像（background.gif）を入れ属性で繰り返す（垂直方向）にチェックをいれたのですが、ＩＥやfirefoxでプレビューでは反映されていないです。 色々いじってみたのですがどうしても解りません。どこが間違っているのか教えていただけないでしょうか？ よろしくお願いします。 HTML <body> <div class="box"> <div class="header"> <span class="site_name">ここにサイト名を入れる</span> <h1>ここにｈ１</h1> <div class="description_1">ここに簡単な説明文</div> </div> <div class="main"> <div class="contents">コンテンツ部分<br /> </div> <div class="menu"> メニュー部分 </div> </div> <div class="footer"> フッター部分 </div> </div> </body> スタイルシート * { margin:0; padding:0; } .box{ width : 750px; margin: 0 auto; border-left-width : 1px; border-left-style : solid; border-left-color : black; border-right-width : 1px; border-right-style : solid; border-right-color : black; border-bottom-width : 1px; border-bottom-style : solid; border-bottom-color : black; } .header { width : 726px; height : 96px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; border-bottom-width : 2px; border-bottom-style : solid; border-bottom-color : black; } .main { width : 750px; background-image : url(file:///C:/Documents and Settings/※※※/img/background.gif); background-repeat : repeat-y; background-position : 0px 0px; margin-top : 0px; margin-bottom : 0px; margin-left : auto; margin-right : auto; background-color : #ffffff; } .menu { float: left; width : 180px; padding-top : 10px; padding-left : 10px; padding-right : 10px; padding-bottom : 10px; margin-left : auto; margin-right : auto; } .contents { float: left; width : 526px; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; } .footer { clear: both; width : 726px; height : 26px; background-color : #b9b9ff; padding-top : 12px; padding-left : 12px; padding-right : 12px; padding-bottom : 12px; text-align : center; } .menu ul { list-style: none; } .site_name{ font-size : 21px; font-weight : bold; margin-left : 12px; } h1{ font-size : 15px; margin-top : 12px; margin-left : 24px; } .description_1{ font-size : 12px; font-weight : normal; margin-left : 24px; }
- ベストアンサー
- ホームページ作成ソフト
- 見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法に
見出しや左メニューのhtmlを後ろに置く時のスタイルシートの指定方法について 見出しや左メニューの部分のhtmlをページ全体の後ろのほうに配置したいと考えています。 添付の画像のソースが以下のとおりです ----------------------------------------------------------------------- <div style="position:relative;margin:auto;width:800px;"> <div style="height:20px;width:100%;background-color:#ff0000;"> </div> <div style="margin:0px 0px 0px 150px;width:650px;background-color:#00ff00;"> ああああああ<br /> ああああああ<br /> ああああああ<br /> ああああああ<br /> </div> <div style="position:absolute;top:20px;left:0px;width:150px;background-color:#0000ff;"> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> いいいいい<br /> </div> <div style="height:20px;width:100%;background-color:#ffff00;"> </div> </div> ----------------------------------------------------------------------- 一応、左メニューについて実現できていて、見出しも同様にやれるのですが、 この方法では、absoluteで配置しているため、フッターの部分を重ならない ようにするためには、見出しとフッターの間のブロックについて高さを指定する しか方法を思いつきません。 ・absoluteで配置する以外の方法があるでしょうか。 ・absoluteで配置したとしても、高さを指定しない方法があるでしょうか。 よろしくお願いします。
- ベストアンサー
- HTML
- WindowsのIEで、スタイルシートのfloatがずれてしまいます
スタイルシートの「float」についてなんですが、 ------------------------------------------------------------------- <html> <head> <title>メニューテスト</title> <style type="text/css"> <!-- body { margin: 0px; padding: 0px; } #menu{ float: left; width: 170px; margin-top: 0px; margin-left: 8px; } --> </style> </head> <body> <div id="menu">あいうえお</div> </body> </html> ------------------------------------------------------------------- 上記のようにすると、WindowsのIE5以降で見たとき、 「あいうえお」のマージンが8pxと指定してあるにもかかわらず、16pxほど空いてしまいます。 「float」を外せば正常に表示されます。 他のブラウザでは正常に表示されますので、Win IEのみの現象だと思うのですが 何か良い解決方法はないでしょうか？ よろしくお願いします。
- ベストアンサー
- HTML
- div要素を半透明にして且つ外枠をつけたい
div要素を半透明にして且つ外枠をつけたいです。 下記のように書いたのですが、borderも一緒に半透明になってしまいます。添付画像の様にするにはどうしたらよいでしょうか？ 教えてください。 <html> <head> <style> div{ background: green; opacity:0.2; filter: alpha(opacity=20); border: 1px solid green; } #hoge{ position: absolute; top: 0; left: 50; width :50; height :50; } </style> </head> <body> あいうえお <div id='hoge' ></div> </body>
- ベストアンサー
- HTML
- スタイルシートのwidthについて
<style type="text/css"> #hoge{border:solid 1px black;width:100px;margin:0;} </style> <div id="hoge> </div> このようにdivタグにスタイルシートをつけるとなぜか縦の幅ができてしまいます。 width:100をなくせばただの線になるのですがwidthをつけるとどうして 縦幅ができてしまうのでしょうか？ hightをつけてるのはまだしもwidthをつけただけじゃ横の長さが決まるだけで縦は0だと思ったのですが違うのでしょうか？ ブラウザはIE6で見ました。
- ベストアンサー
- HTML
お礼
とあるサイトでwidの幅に関係なくかならず中央に寄せることができるため、こんな記述になりました。 ＞絶対配置ですから、margin-right、margin-bottomは無効ないし、CSSで決めようがありません。 とあったので、最下部のmargin設定は諦めました。 うーむ、残念；