下記のCSSレイアウトを、どなたか、中央揃えに変更していただけませんか。

または、方法などを教えて頂ければ、幸いです。
http://www.mediafire.com/download.php?j4kiyjy4nz3

「#containerにmargin:0 auto;を加えれば幸せになれるよ」
とは言われたのですが、
そこからが解らずに困っております。どうぞよろしくおねがいいたします!

こめ IE/Fxで動けば良いです。
こめ 最低でも、#primaryを中央揃えにしていただければ、万々歳です。

回答の条件
  • 1人1回まで
  • 登録:2009/03/21 18:07:18
  • 終了:2009/03/21 19:16:47

ベストアンサー

id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512009/03/21 19:09:19

ポイント77pt

style.cssの以下の部分を変更します。

18行目以降にある#containerに指定されている「float:left;」を削除するか、あるいは以下のようにコメントアウトして無効にします。

さらに「margin:0px auto;」を追加して真ん中寄せします。

#container {

width:980px;

/* float:left; */

margin: 0px auto;

}

これでコンテナーの真ん中寄せは出来ているのですが、このままだとロゴが左側に飛び出ていて、コンテンツが右寄りに見えますので、以下の部分も変更した方が良いと思います。

(150行目付近)#primaryと(200行目付近).footerに対しても#containerと同じ変更を加えます。

#primary {

/* float:right; */

width: 850px;

padding:20px 0px;

margin: 0px auto;

}

.footer {

/* float:right; */

margin: 0px auto;

width: 846px;

padding:6px 2px;

border-top:1px solid #f9f9f9;

color:#CDCDCD;

font-size:70%;

}


以上で大丈夫なはずですので確認してください。


3カラムにする方法ですが、floatを使用します。

質問のページでは#primay内の#columns内に#col-leftと#col-rightがありますが、それぞれ「float:left;」を指定して2カラムを構成しています。

これを3カラムにしたい場合は、HTMLで#col-center用のボックスを#col-leftと#col-rightの間に追加して、CSSで同じように「float:left;」を指定するかあるいは、HTMLで#col-leftと#col-rightの後ろに#col-center用のボックスを追加して、CSSで#col-rightを「float:right;」に変更、#col-centerに「float:right;」を指定します。

(※HTMLで出現する順番によって、floatの指定が変わります。)

※外側のボックスに合わせて、それぞれのボックスの幅を変更する必要もあります。(ボックスの幅を変更しないと、はみ出るボックスが下に落ちます。)


Safari付属のデベロッパーツールが使用しやすいので、もしHTML等の構造分析をするソフトがない場合は、Safariをおすすめします。

私も最近知ったのですが、適用されているCSSの内容まで表示されてとても使いやすいです。

※「Preferences」の「Advanced」で設定を変更(「Show Develop menu in menu bar」にチェック)するとメニューが表示されます。

id:qwenty

おおおおおお!ありがとうございます!

アンタすごいよ!今日のMVP2だよ!良いことあるよマジで!

しかも、こんな懇切丁寧に答えてくれて、お兄さんすごく感動しました!(T_T)

ご飯でも奢りたいくらいです!

ありがとうね!

2009/03/21 19:14:56

その他の回答(1件)

id:fut573 No.1

fut573回答回数195ベストアンサー獲得回数542009/03/21 19:02:40

ポイント77pt

margin:0 autoに加えて

style.cssに以下の修正を加えます。

body { }に

text-align:center;

#container {}に

text-align:left;

を追加。


これで一応センタリングが出来ます。

(実際にはもうちょっと細かく設定する必要があると思います。)


3カラムレイアウトは自力で組むと面倒ですが

「yui grids css」というものを使うと簡単に作れます。

これを使うとブラウザ間の見た目の違いを気にすることなく、色々なレイアウトを組む事が出来ます。

http://developer.yahoo.com/yui/grids/builder/

にあるジェネレーターを使えば楽だと思います。

id:qwenty

おおお!ありがとうございます!

アンタすごいよ!今日のMVPだよ!良いことあるよマジで!

スピードが速い!間違いなく、一位だよ!

ありがとうね!

2009/03/21 19:15:33
id:rouge_2008 No.2

rouge_2008回答回数594ベストアンサー獲得回数3512009/03/21 19:09:19ここでベストアンサー

ポイント77pt

style.cssの以下の部分を変更します。

18行目以降にある#containerに指定されている「float:left;」を削除するか、あるいは以下のようにコメントアウトして無効にします。

さらに「margin:0px auto;」を追加して真ん中寄せします。

#container {

width:980px;

/* float:left; */

margin: 0px auto;

}

これでコンテナーの真ん中寄せは出来ているのですが、このままだとロゴが左側に飛び出ていて、コンテンツが右寄りに見えますので、以下の部分も変更した方が良いと思います。

(150行目付近)#primaryと(200行目付近).footerに対しても#containerと同じ変更を加えます。

#primary {

/* float:right; */

width: 850px;

padding:20px 0px;

margin: 0px auto;

}

.footer {

/* float:right; */

margin: 0px auto;

width: 846px;

padding:6px 2px;

border-top:1px solid #f9f9f9;

color:#CDCDCD;

font-size:70%;

}


以上で大丈夫なはずですので確認してください。


3カラムにする方法ですが、floatを使用します。

質問のページでは#primay内の#columns内に#col-leftと#col-rightがありますが、それぞれ「float:left;」を指定して2カラムを構成しています。

これを3カラムにしたい場合は、HTMLで#col-center用のボックスを#col-leftと#col-rightの間に追加して、CSSで同じように「float:left;」を指定するかあるいは、HTMLで#col-leftと#col-rightの後ろに#col-center用のボックスを追加して、CSSで#col-rightを「float:right;」に変更、#col-centerに「float:right;」を指定します。

(※HTMLで出現する順番によって、floatの指定が変わります。)

※外側のボックスに合わせて、それぞれのボックスの幅を変更する必要もあります。(ボックスの幅を変更しないと、はみ出るボックスが下に落ちます。)


Safari付属のデベロッパーツールが使用しやすいので、もしHTML等の構造分析をするソフトがない場合は、Safariをおすすめします。

私も最近知ったのですが、適用されているCSSの内容まで表示されてとても使いやすいです。

※「Preferences」の「Advanced」で設定を変更(「Show Develop menu in menu bar」にチェック)するとメニューが表示されます。

id:qwenty

おおおおおお!ありがとうございます!

アンタすごいよ!今日のMVP2だよ!良いことあるよマジで!

しかも、こんな懇切丁寧に答えてくれて、お兄さんすごく感動しました!(T_T)

ご飯でも奢りたいくらいです!

ありがとうね!

2009/03/21 19:14:56

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません