センタリングされた外枠を表示させたい

前へ 次へ
このQ&Aのポイント
  • IEでのブラウザ表示でセンタリングされた幅900px高さ700pxの枠を表示させたいのですが、うまくいきません。
  • どのようにすれば枠がセンタリングされるでしょうか？
  • HTMLやCSSの設定に問題があるのか、他の要素との干渉があるのか分からず困っています。
回答を見る
  • ベストアンサー

センタリングされた外枠を表示させたい

IEでのブラウザ表示でセンタリンクされた幅900px高さ700pxの枠を表示させたいのですが、うまくいきません。どのようにすれば枠がセンタリングされるでしょうか？ ご教授よろしくお願い致します。 ・HTML 部分 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <link rel="stylesheet" href="index.css" type="text/css"> <title>新しいページ 1</title> </head> <body> <div class="page"></div> </body> </html> ・css 部分 .page { border: solid 1px #000000; width: 900px; height: 700px; }

  • Boos_
  • お礼率42% (16/38)
  • HTML
  • 回答数1
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • OKwebb
  • ベストアンサー率44% (92/208)
回答No.1

css.pageに以下を追加 margin-left:auto; margin-right:auto;

Boos_
質問者

お礼

あれ、あっさりできちゃいましたね。。。 実は margin-left: auto; や margin-right: auto; は既に試していたのですが、試した時には DOCTYPE での宣言をしていませんでした。 DOCTYPE で宣言したことによって css の動きが変わったのですかね？ どうもありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

  • スタイルシートでのセンタリングについて。

    スタイルシートでセンタリングをしたいのですが、できなくて困っています。 以下のような場合に、センタリングをしようと思い「text-align:center;」を追加しましたがセンタリングされません。 どうしたらセンタリングできるでしょうか？ ソース　------------------------------------ <html> <head> <title></title> <style type="text/css"> <!-- .test{ font-size: 10pt; font-family: ＭＳ 明朝; margin: 1px; padding: 1% 10%; border: outset 1px #EEDDFF; } --> </style> </head> <body> <span class=test>○○○○○</span> </body> </html>

    • ベストアンサー
    • HTML
  • テーブルを上部に付けてセンタリング表示させたい

    質問お願い致します。 ピクセルで幅の長さを指定したテーブルを上部に付けて センタリングしたいのですが、なぜか左に寄ってしまうのです。 いろいろな箇所にセンタリングのタグを打ち込んでも 利いてくれません。 ％指定をすると不恰好になってしまうのでどうしても ピクセル指定でセンタリングしたいのですが よろしければご指摘ください。 お願い致します。 ------------------以下ソースです---------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <title>Travel Guide: Ragged Point Inn</title> <style type="text/css"> body{ float: center; margin-top: 0px; color: white; background:#000000; background-attachment:fixed; } table{ float: center; width: 700px; background: #FFFFFF; color: #000000; } </style> </head> <body> <table cellspacing="0"> <tr> <td id="content"> <table cellspacing="0" align="center"> <tr> <td>aaaaa</td> </tr> </table> </td> </tr> </table> </body> </html>

    • ベストアンサー
    • CSS
  • IEでCSSの中央寄せが効かない

    common.cssという外部CSSファイルで .main{ width:800px; margin:0 auto; } としています。 HTMLを簡単に書くと <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" > <title>test</title> <meta content="text/javascript" http-equiv="Content-Script-Type"> <link media="all" type="text/css" rel="stylesheet" href="css/common.css"> </head> <body> <div class="main"> ここに中央寄せになった記述 </div> </body> </html> としています。 firefoxでは中央寄せになりますが、IE8では中央によりません。 どのようにしたら良いでしょうか？

    • ベストアンサー
    • HTML
  • ＷＩＮのＩＥ６でボックスに指定した背景画像が表示されません

    外部リンクのCSSでボックスに背景画像を表示させたいのですが、ウィンドウズのIE６では表示されません。記述がおかしいのでしょうか？タグは以下の通りです。ほとほと困り果てております <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>タイトル</title> <link rel="stylesheet" href="eps.css" type="text/css"> </head> <body> <div class="outer"> <p>内容を書き入れます</p> </div> </body> </html> 外部リンク .outer{ position: absolute; top: 0px; bottom: 0px; left: 80px; width:650px; background-image: url("back-sen.jpg"); padding: 0px; margin:　0px auto; }

    • 締切済み
    • CSS
  • HTMLの文法チェックをするとCSS関連でエラーが出て困っています。

    http://validator.w3.org/ http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html でHTMLの文法チェックをすると， <body><style TYPE="text/css"><!-- という行があるとエラーが出ます。 実際のHTMLは外部スタイルシートを使っているのですが <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <title>タイトル</title> <meta name="Keywords" content="キーワード "> <meta name="Description" content="内容説明"> <link rel="stylesheet" href="./css.css" type="text/css"> </head> <body> <div id="page"> 以下略 であり，<body>タグの後ろは<div>タグなのですが，何故かそう認識されます。 スタイルシートの指定がおかしいのかと考えたのですが， いくら検索しても<head></head>間に <link rel="stylesheet" href="./css.css" type="text/css"> を入れるとしか書いてなく理由がわかりません。 ちなみにcss.cssの内容は *{} というような内容の羅列のみで，その他の情報は一切入れていません。 どこがおかしい点なのかわからず悩んでおります。 理由のわかる方いましたら是非ご教授願います。

    • ベストアンサー
    • HTML
  • CSS/float内のセンタリング

    下記の記述でsideconteをsideWrap内にセンタリングしたいのですが、うまくいきません。sideWrap内に記述したテキストはセンタリングされるのですが、sideconteは思った通りに、配置できません。どのように記述すれば、よいでしょうか？ <html lang="ja"> <head> <style type="text/css"> #sideWrap { width:220px; float:right ; background-color: #fec000; text-align:center; } .sideconte { width:175px; background-color:red;text-align:center;} </style> </head> <body> <div id="sideWrap">text1 <div class="sideconte"> text2 </div><!-- /sideconte --> </div><!-- /sideWrap --> </body> </html>

    • ベストアンサー
    • HTML
  • 外部CSSと　HEAD内のCSSの違い

    現在、macで Dreamweaver8を使用してHPを作っています。 外部のcssがうまく反映されません。 そこで、head内に同じcssを入れたところ、きちんと反映されました。 どうして違いがでるのか教えてください。 『head内に入れた時』 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } </style> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> 『外部cssの時』 [styel.cssは] body { font-family: "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3"; font-size: 14px; font-weight: normal; background-position: center; padding: 0px; margin: 0px; } #page { background-color: #009900; height: 800px; width: 760px; margin-right: auto; margin-left: auto; position: relative; top: 0px; } #title { background-color: #CCFF00; height: 120px; width: 700px; position: relative; left: 0px; top: 0px; margin-right: 15px; margin-left: 15px; padding-right: 15px; padding-left: 15px; } [反映されるhtmlは] <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>無題ドキュメント</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <div id="page"> <div id="title"> </div> </div> </body> </html> です。 誰かお答えくださいませ。

    • ベストアンサー
    • Mac
  • CSSで設定した背景画像がFirefoxだとズレて表示されます

    以下のように、CSSを設定しました。 -- CSSの内容(抜粋) ------------------------------- H2{ 　　color:#333333; 　　background-image:url(img/title-01.jpg); 　　background-repeat:repeat-x; 　　padding:3px 25px; 　　font-family:"Lucida Sans"; 　　font-size:medium; } -- HTMLの指定 ------------------------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>タイトル</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div id="info-area"> 　<h2>いろはにほへと</h2>　←問題なくタイトル文字の後ろに背景画像title-01.jpgが表示されている 　<div></div> 　<div></div> </div> <div id="main-area"> 　<h2>ちりぬるをわか</h2>　←大幅に上方にズレて表示される 　<div></div> 　<div></div> </div> …以下省略… CSSは外部読込にしてあり、HTML内には幅や高さ，色などを指定するタグは一切ありません。 問題の部分に到達するまでのタグは なお、上記の指定方法でInternetExplorer6.02とSleipnir2.8.5では 問題なく表示されています。 表示が崩れたFirefoxは3.0.11です。 Firefoxでも意図したように表示される方法はありますか？

    • ベストアンサー
    • CSS
  • ブラウザ枠を超えず表示する方法

    CSSについてですが、まずはCSSとHTMLを見てください。 ↓test.css === * { padding: 0px; margin: 0px; } html, body { width: 100%; height: 100%; } #container { width: 100%; height: 100%; margin: 10px; border: 1px solid #b3b3b3; } === ↓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> </body> </html> === test.html をブラウザで見ると、ボーダーラインがブラウザ枠(右側)を突っ切る形で表示されています。width: 100% と指定したので、現在表示しているブラウザ幅からmargin: 10px したところでborder: 1px が表示される(四角形のボーダーがスクロールなしで確認できる)と思ってましたが、ボーダーが現在のブラウザ幅を突っ切って表示されることはあたりまえのことなんでしょうか？ むしろ、スクロールなしでボーダー全体を確認する術は、tableタグを使わずに実現する方法はあるのでしょうか？ お願いします。

    • ベストアンサー
    • HTML
  • html,css初心者です。ヘッダーの余白について

    ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する