- 締切済み
左右にゆとりのあるホームページ
現在、左右にゆとりのあるホームページを作っています。 最初は、<TABLE>タグで、左右にゆとりを作ろうと思いましたが、TABLEタグは、レイアウトのために使用してはいけないとW3Cに書かれていたので、<TABLE>タグ以外で、左右にゆとりのあるホームページを作りたいのですが、どうすればいいのでしょうか。 以下のCSSを使ってもいいのですが、IEのみのCSSを使ってる上、左寄せになってしまいます。 body {word-break:break-all;width:600px;}
- みんなの回答 （6）
- 専門家の回答
みんなの回答
W3Cを云々言い出したらbase_top_aug.cssに書かれているこれが正解じゃないですかね。 ------------------- div#body{ margin: 0 auto; border-left: 1px solid transparent; width: 761px; /*\*/ _border: none; _width: 760px; /**/ } ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿ margin: 0 auto;をbodyに入れても良いと思いますけどね。 IE6ならこれで大丈夫ですよね。 その他は・・・
ウーン！ 左右に空きを作るとIEの左寄せ対策は別です。 全体を示します。 もちろん、どのようにレイアウトするかは質問者の問題です。 要は、そのポイントだけを参考に！ /* ========================================================================================================== mystyle.css: Last update 2005/10/05 By XXXXXXXXXXXXXXXXX ------------------------------------------------------------------------------------------------------------- */ @charset "Shift_JIS"; /* この外部 CSS の文字コードを「Shift JIS」に設定 */ /* ========================================================================================================== 全体構造 ------------------------------------------------------------------------------------------------------------- */ body { margin: 0; /* 余白をゼロに */ padding: 0; font-size: 10pt; text-align: center; /* Win IE 6 で、ブロックレベル要素がセンタリングされないのを防ぐため */ } /* ========================================================================================================== ヘッダ ------------------------------------------------------------------------------------------------------------- */ div#header { width: 820px; background: url('../images/toppage/background_header.gif') no-repeat bottom; } /* ========================================================================================================== メイン・コンテンツ ------------------------------------------------------------------------------------------------------------- */ div#container { width: 820px; margin-left: auto; margin-right: auto; background: rgb(170, 170, 170) url('../images/toppage/background_container.gif') repeat-y; text-align: left; } div#wrapper { float: left; width: 80%; } div#content { float: right; width: 70%; } div#sidebarA { color: white; float: left; width: 30%; text-align: left; } div#sidebarB { float: right; width: 20%; } /* ========================================================================================================== フッタ ------------------------------------------------------------------------------------------------------------- */ div#footer { clear: both; width: 820px; font-size: 8pt; margin-left: auto; margin-right: auto; background: url('../images/toppage/background_footer.gif') no-repeat top; }
お礼
こんにちは、LAITです。 ありがとうございました。
- pi8027
- ベストアンサー率11% (6/53)
body{ margin-left:10%; margin-right:10%; } とすれば大丈夫
- aqucent
- ベストアンサー率39% (78/200)
補足(結果)を述べるのは良いのですけど、もう少し、感謝の気持ちを表した方がお互いに気持ちよいコミュニケーションを図れると思いますよ。 > 例としては、教えて！gooのトップページのような感じです。 教えてgooは以下のタグでセンタリングを実現しています。 <div align="center"> 上記は内部の要素をセンタリングするタグであって、左右にマージンを取るタグではありません。 従って、「左右にマージンを取る」という希望とは少し違います。 とりあえず、センタリングという前提で考えますね。 align属性は非推奨属性のため、CSSに変えると以下のようになります。 <head> <style type='text/css'> table.center { margin: 10px auto; text-align: left; background-color: #ddd; } div.center { margin: 10px auto; padding: 0px; text-align: left; width: 50em; background-color: #ddd; } body { text-align: center; /* ブロックレベル要素をセンタリング(IE用) */ } </style> </head> <body> <table class='center'> <tr> <td> table要素をセンタリング </td> </tr> </table> <div class='center'> div要素をセンタリング </div>
/* =============================================================== 全体構造 ------------------------------------------------------------------------------------------------------------- */ body { margin: 0; /* 余白をゼロに */ padding: 0; font-size: 10pt; text-align: center; /* Win IE で、ブロックレベル要素がセンタリングされないのを防ぐため */ } で試してみて下さい。
補足
左右にゆとりが無いため、できません。 例としては、教えて！gooのトップページのような感じです。
- yambejp
- ベストアンサー率51% (3827/7415)
body{margin:0px 100px;} とか？
補足
この手は、640x480などの大きさのディスプレイで見ても、左右にゆとりができるので、逆に見難くなるため、できません。 例としては、教えて！gooのトップページのような感じです。
お礼
確かにそうですね。marginを使わずに、widthだけでも真ん中寄せではないけど、うまいこと行きました。 ありがとうございました。 NN4だと、失敗するけど、それは、CSSのバグだと思うし無視してもいいかな・・・・。