人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

下記のCSSレイアウトを、どなたか、中央揃えに変更していただけませんか。
または、方法などを教えて頂ければ、幸いです。
http://www.mediafire.com/download.php?j4kiyjy4nz3

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

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

●質問者: qwenty
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS Fx IE margin レイアウト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● fut573
●77ポイント

margin:0 autoに加えて

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

body { }に

text-align:center;

#container {}に

text-align:left;

を追加。


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

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


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

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

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

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

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

◎質問者からの返答

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

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

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

ありがとうね!


2 ● rouge_2008
●77ポイント ベストアンサー

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」にチェック)するとメニューが表示されます。

◎質問者からの返答

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

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

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

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

ありがとうね!

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ