WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:ページ全体を中央揃えで表示する方法

0:[投稿] hana [2006/03/01 06:07 ] [環境:IE6、WindowsXP まだサーバー]

はじめまして。
ページの表示位置について悩んでいます。

[cssファイル]
body {text-align: center;  /* 古いブラウザへの対応 */
    }

.contents {width: 800px; 
          margin-left: 5px auto; /* 中央表示 */
          }

上記のように記述して、プレビューすると、IEでは中央に表示されますが、Netscape 7.1とFirefoxでは左に寄っていて、ページ内のレイアウトも崩れていました。

どうしたらIE以外のブラウザでも中央表示できるでしょうか?
どうぞ宜しくお願いします。          


1:[回答] xhtml? [2006/03/01 09:47 ]

>margin-left: 5px auto; /* 中央表示 */
とりあえず 表記の間違いをチェックしてみましょう。
margin:5px auto; /* 中央表示 */
margin:全体;
margin:上下 左右;
margin:上下 左 右;/* 忘れました */
margin:上 右 下 左;


2:[質問] hana [2006/03/01 18:31 ]

xhtml?さま ご回答ありがとうございます。

>margin-left: 5px auto; /* 中央表示 */
 ↑間違っていました。
 申し訳ありません、CSSファイルには
 margin:5px auto; と書いてありました。

margin: auto;
と書くと、ページの上が余白なしで詰まってしまうので
margin:5px auto; と書いています。

margin-left: auto;
margin-right: auto;
と書いても、IE以外では左に寄ってしまいます。
中央寄せは、margin以外で設定するのでしょうか?
それとも、他の表記内容の影響でしょうか?
また、お暇があれば教えてください。
よろしくお願いいたします。


3:[回答] xhtml? [2006/03/01 21:29 ]

/*---ページ全体のマージンの初期化*/
*{
    margin:0;
    padding:0; /*opera対策*/
}
/*---BODYセンタリング*/
body{
    text-align:center;    /*IE5x対策*/
}
/*---全体レイアウト*/
#container{
    margin:20px auto;
    padding:0;
    text-align:left;    /*bodyでのセンタリングを解除*/
    width:780px;
}
私の場合の例ですが、これでIE6x,FireFoxでセンタリングされています。


4:[回答] AC1号 [2006/03/01 22:20 ]

どんなHTMLにそのCSSを適用しているか分からないので、これだけの情報では判断しかねます。きちんとDOCTYPE宣言をしていないかもしれませんし、.contentsがインライン要素である可能性も否定できません。

>>1
調べればすぐにわかるようなことでデタラメを書かないでください。あえて誤りを指摘しないでおくので、自分で訂正記事を出してください。


5:[回答] xhtml? [2006/03/01 23:10 ]

>どんなHTMLにそのCSSを適用しているか分からないので、これだけの情報では判断しかねます。きちんとDOCTYPE宣言をしていないかもしれませんし
★私の記述したコードに誤りがあるのでしたら、すみませんでした。


6:[完了] hana [2006/03/02 01:51 ]

xhtml?さま AC1号さま
ご回答ありがとうございます。

No.3でxhtml?さまに教えていただいたように、「ページ全体のマージンの初期化」と「全体レイアウト」のpadding:0; を書き足してみたところ、ちゃんと中央に表示されました!!

私は「HTML&スタイルシート レイアウトブック」という本を参考に
初めてのHP作りに挑戦しているのですが、「ページ全体のマージンの初期化」についての記載はなかったのでびっくりでした。
ありがとうございました。

中央表示とページ全体(body)に設定した枠線も表示されましたが、contents内のレイアウトが崩れてしまったのでこれから修正してみます。
また行き詰まったら質問させていただきますので、どうぞ宜しくお願いいたします。

DOCTYPE宣言に関してはまだまだ勉強不足でよくわからないのですが、Adobe Goliveで自動的に記載されるのでそのままです。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
と書いています。

がんばって勉強します!
ありがとうございました!


7:[完了] xhtml? [2006/03/02 19:38 ]

センタリングがされて よかったですね。
モダンブラウザであれば cssを正しく理解するので この指定で大丈夫みたいですよ。レガシーブラウザはわかりませんが、ボックスにborder margin paddingを指定するとIE5x系では解釈が他のブラウザと異なるためレイアウトが壊れることがあります。google等でボックスモデルハック CSSハックで検索してみるといいと思います。


8:[完了] hana [2006/03/06 10:54 ]

xhtml?さま

スレを「完了」していたので、お返事を頂戴していたことに気付かず失礼いたしました。

センタリングの件、本当にありがとうございました。
すごく気持ち悪かったので、解消されてスッキリです。

教えて頂いたハックについて検索してみました。
まだまだ私には難しくて???でしたが、お陰様で勉強になるページもいくつかあってお気に入りに登録させて頂きました。

今は、IE以外のブラウザで崩れてしまったレイアウトが気持ち悪いのでそちらの方で悶々としています。
もうちょっと頑張ってみてギブアップしたら、またこちらで相談させて下さい。

どうもありがとうございました。

回答(必須): 状態:

お名前(必須):

URL:




[戻る]