CSSについて教えて下さい ブログレイアウトが崩れます

質問

御世話になります。

■ブログの、本体部分がどうしても真ん中に固定できません。本体部分は

div#wrapper {
width: 750px;
padding: 0 10px;
margin:0 0 0 130px;
border:1px solid;}

今はmarginでなんとなく真ん中に見せていますが、
1024～上で真ん中に見えるだけで、1280×～にすると左よりになります。
全体のCSSは

body {
margin:0px auto;
color: #666;
font: 12px/1.5em "meiryo","メイリオ","Lucida Sans Unicode","Lucida Grande",sans-serif}
にして、marginをautoにしましたがこれでは真ん中にできないのでしょうか。

■記事本文の下に、カテゴリが回りこみます（記事本文が、カテゴリより短かった時）

記事部分
div#contents {
width: 500px;
padding: 0 10px;
float: left;}

カテゴリー部分
div#navigation {
width:190;
padding:0px;
border:1px solid;}

カテゴリーが記事の高さを過ぎると、記事の下に回りこんでしまう状況です。

説明足らずであれば補足します。修正加筆箇所を宜しくお願いします。

回答No.2

qualheart · ベストアンサー

ANo.1です。
一つ忘れていました。

body {
margin:0px auto;
text-align:center;
color: #666;
font: 12px/1.5em "meiryo","メイリオ","Lucida Sans Unicode","Lucida Grande",sans-serif}

のようにtext-align:center;をbodyに追加してください。
また、念のためdiv#contentsとdiv#navigationに
text-align:left;を追加してください。

カテゴリーが下に回り込むのは何故だか分かりませんね・・・
推測ですが、余計な</div>が<div id="navigation">の前に入っていたりしませんか？
そこで<div id="wrapper">が閉じられてしまっているため、下に回り込んでしまうのかも知れません。

補足

有難うございます！

全体を真ん中に表示することができました！有難うございます。
ただ今度はコメントページに飛んだ時に、記事の下にカテゴリ部分が回りこむ形になりました・・

余計なdivですが今のところ見当たらないです＞＜。
もう少し丹念に探してみます

回答No.12

hikachu

ANo.11です

動いたのですね
力技で
margin-left:-50px;とかマイナス表記で無理やり合わせてみてはどうですか？
margin-left:-50px;がダメならpadding-left:-50px;試してください

なぜだかソース見れない状況に陥っているので
どういった症状でおきているかわかりません！
他の方のアドバイスをもとにイメージしてるだけなので（笑）

お礼

おはようございます！！

hikachuさんのおっしゃっている マイナス -をしてみたら綺麗に動きました！！
独自タグがないddは綺麗に反映されていたので、独自タグ用と２つにナビをdiv分けしたらなんとか思い通りに
表示させられることができました！

有難うございました＾＾

皆様も有難うございました（_ _）とても助かりました！

回答No.11

hikachu

凄い状況ですね。。。
margin-left:0px;がきかないのですか。。。

少し考えを変えてみましょう
margin-left:0px;をmargin-left:50px;など適当な数に変えてみます

変化が見られない場合、他の場所が移動した場合は
margin-left:0px;の書く場所ミスってます

どこも変化がない場合はCSS内のdiv#navigation dd が
読み込めてないって事です
スペルミスとかよくあります（笑）
CSSのスペルミスだけじゃなくてHTML内のスペルミスの可能性もありますよ☆

どこかでpadding-leftが設定されてる可能性もあります
padding-left:0px;を追加してみてもいいかもしれないです

単純に";"この辺が全角だとかかもしれないです

怪しい辺りを一度消して半角で打ち直すのがいいかもしれませんね♪

お礼

ありがとうございます！

50pxにdd部分のmarginを変更してみたところちゃんと右に動きました。
どうやら{category_list}などのブログ（serenebach）の独自タグにのみ
変な空白が左にできています・・。
独自タグなしのddで囲んだ部分はちゃんとmarginが0で反映しています。

これはもうblogの方になっちゃうんでしょうか・・
でも他のテンプレートを使用してみるときれいになっているんですよね。
となるとやっぱりhtmlかcssの部分に問題があるのかな＞＜。

回答No.10

qualheart

ANo.9さんのおっしゃるとおり腑に落ちないですね。
こちらで検証したところでは直っています。

もしかして間違った箇所に
margin-left:0px;
を追加していませんか？

先ほど書いたように
div#navigation ddの定義自体がCSSから抜け落ちてます。
間違えて「margin-left:0px;」をdiv#navigation dlに追加してませんか？

必要なのはdiv#navigation ddの定義です。
先ほど書いたものをそのままCSSに入れれば直ると思うのですが・・・
以下全部です。

div#navigation dd {
margin-bottom:10px;
margin-left:0px;
}

お礼

有難うございます。

再度下に最新の物をアップしましたので、よろしければ観てやってください(__)

回答No.9

abril

> dd～/ddの部分に左空白が出来てしまう部分です。margin-leftを追加しましたが改善されません・・。

この点に関するもうお一方の回答と私の回答は全く同じものですから、その修正を施しても直らないとなるとちょっと腑に落ちないのですが…
こちらの環境上では、ANo.4のお礼欄で提供されたソース（http://www.geocities.jp/mamemaaya/html.txt、http://www.geocities.jp/mamemaaya/css.txt
）に、今までの回答の修正を加えた状態で検証しても、上記の様な（http://www.geocities.jp/mamemaaya/01.bmp）現象が起こらないものですから…。
CSSは提供されたファイルのみだけで、他に参照はしていないですね？
念の為、最新（現在）の状態のCSSファイルとHTMLファイルをもう一度提供して頂けますか？それで検証し直してみればあるいは何か見落としていた（先程提供されたのソースとの）相違点がわかるかもしれません。

お礼

何度もすみません！有難うございます

今現在の物をアップしました
http://www.geocities.jp/mamemaaya/html.txt
http://www.geocities.jp/mamemaaya/css.txt

宜しくお願いします

回答No.8

qualheart

＞ですがnaviの中身が右にかたよったままです・・
＞naviのpaddingは0にしているのに何故右に寄ってしまうのでしょうか（？０？）

先ほど回答に書いた以下の定義をCSSに追加してください。
div#navigation dd {
margin-bottom:10px;
margin-left:0px;
}

CSSではdtには定義がありましたがddの定義が抜けてたのです。
右にずれているのはddタグの文字なので、上記のようにddタグに対する定義を追加してマージン等をいじれば左寄せで表示されます。

お礼

有難うございます！

ddに対してもmargin指定してみましたが現行のままです・・
http://www.geocities.jp/mamemaaya/01.bmp

カテゴリーにサブカテゴリーがいるのですが、それも同じ値の
左空白ができてしまっています・・

回答No.7

abril

ANo.5投稿したあとでANo.4のお礼欄の情報を見ました。
また、先程コメントを見落としていたのですが「どの部分を直せば綺麗に左寄りにnaviが表示されますでしょうか＞＜。」とあるところ見ると、ナビゲーション部分は記事部分に対して右ではなく、左に表示させたいのでしょうか？

もしそうだとしますと、今のマークアップ順だとdiv#contentsの指定にも修正が必要になりますが。

div#contents {
width: 430px !important;
width: 500px;
padding: 0 10px;
float: right;←値はleftではなくrightを。
text-align:left;
}

それから、ANo.5の修正をdiv#navigationに施した上でもまだナビゲーションが崩れて見えるとしたらそれはテンプレート状態で表示させた場合の事ではないですか？テンプレートでは、ナビゲーションの部分に、”{recent_comment_list_tree}”といったアンダーバーで繋がった長い英語の変数が入っている為、これはブラウザの仕様上ワン・ワードとして扱われるので、途中で改行される事がありません。その為、div#navigationやその子要素のdlに設定した幅よりも相対的に長くなってしまい、長さをはみ出させてしまう為にナビゲーションのブロック全体がはじき出されて下に落ちてしまう状態になります。しかし、これはサーバ上にアップして実際に使用する際には、それらの変数には値（テキストデータ）が挿入されて表示される筈ですので、正しく表示されるでしょう。もし、テンプレートの段階で表示に問題がないかを確かめたければ、”{recent _ comment _ list _ tree}”といった漢字でスペースを入れて単語を切り離して見て下さい。そうすればスペース毎にワン・ワードとして認識される様になりますので実際のイメージに近い状態で確認ができます。

…とここまで書いていたところで更に追加のレスを読みました。

> dlの部分がやけに右寄りになってしまうんです。
> paddingも0に指定しているはずなんですが・・

「やけに右寄り」と仰っているのは、<dd>～</dd>の部分ではないですか？CSSを見ると、div#navigation dl ddに対する余白の初期化がされていない様に見受けられます。ddはディフォルト値だと左側に余白が与えられていますので、それを初期化してやる必要があります。下記の指定を追加してみて下さい。

div#navigation dl dd {
margin-left:0;←あるていどは余白が欲しいなら、値を調節して下さい。
}

これでいかがですか？

お礼

何度も有難うございます。
ナビ部分は記事に対して右です！ややこしくてすみません＞＜

下に落ちる部分は解決できました♪
コメント欄を開いても常に右にナビ部分が表示されています。有難うございます。

後はおっしゃっている通り、dd～/ddの部分に左空白が出来てしまう部分です。
margin-leftを追加しましたが改善されません・・。

回答No.6

qualheart

div#contents {
width: 430px !important;
width: 500px;
padding: 0 10px;
float: left;
overflow:hidden; /* overflow:hidden;を追加 */
text-align:left;}

div#navigation {
width:190;
padding:0px;
border:1px solid;
text-align:left;
float:right;
overflow:hidden; /* overflow:hidden;を追加 */
}

Navigation内のdd指定が抜け。以下を追加。

div#navigation dd {
margin-bottom:10px;
margin-left:0px;
}

でどうでしょう？

お礼

有難うございます！！

回り込み解除できました♪
ですがnaviの中身が右にかたよったままです・・

naviのpaddingは0にしているのに何故右に寄ってしまうのでしょうか（？０？）

回答No.5

abril

> 直したところ今度はnavigationの表示がおかしくなってしまいました・・

CSSにミスがありますね。以下の様に修正してみて下さい。

div#navigation {
width:190px;←単位（px）が抜けていました（IE以外では幅を解釈できなくなっています）。
float: right;←抜けていましたので右にナビを浮かせることができなくなっていました。
padding:0px;
border:1px solid;
text-align:left;
}

お礼

有難うございます！

修正してみましたが直りません＞＜。
dlの部分がやけに右寄りになってしまうんです。
paddingも0に指定しているはずなんですが・・

回答No.4

abril

> カテゴリーが記事の高さを過ぎると、記事の下に回りこんでしまう状況です。

body内の構造はこういう順番でしょうか？
----------------------------------------------------------------------
<body>

<div id="wrapper">
<div id="contents">
<p>記事部分</p>
</div>

<div id="navigation">
<p>カテゴリー部分</p>
<p>カテゴリー部分</p>
<p>カテゴリー部分</p>
</div>
</div>

</body>
----------------------------------------------------------------------
もしかして…なのですが、div#navigationをHTML側で上記の様に正しく参照できていなかったりしませんか？
もし、<div id="navigation">～</div>と指定すべきところがスペルミスなどで<div id="navigaton">～</div>などと記述されていると、「カテゴリー部分」は幅やフロートなどが指定されていない事になる（<div id="wrapper">～</div>と同じレンダリング領域）為、「記事部分」と隣り合う部分については（「記事部分」のブロックに押し出される様な形になる為）あたかも右側の残りのスペースに配置されている様に見えているかもしれませんが、「記事部分」が終了してしまった時点から、残りのコンテンツが幅一杯に流れ込む様になります。
上記の仮定が事実と異なる様でしたら、無視して下さい。

それから蛇足ですが、現在の指定だけでは、#wrapperの内包する、#contentsと#navigationのいずれもがfloatしているので、#wrapperは高さを失った状態になっています。その為、この解釈にバグのあるIE6では「正常に」表示されている様に見えますが、正しい解釈をするFirefox、Safari等では#contentsと#navigationは#wrapperの枠からはみ出す（下にぶらさがる）様な形で表示されてしまいます。ですので、これを回避する指定を親要素#wrapperに施しておく（所謂cleafixといったtipsなど）事をお奨めします。

お礼

お礼にすみません
ttp://www.geocities.jp/mamemaaya/html.txt
ttp://www.geocities.jp/mamemaaya/css.txt

upしてみました。
もしよろしければチェックお願いします(_ _)

補足

有難うございます。

回り込みの件ですが、おっしゃる通りhtmlのnavigation部分の指定がスペルが違っていまして、
直したところ今度はnavigationの表示がおかしくなってしまいました・・

ttp://www.geocities.jp/mamemaaya/01.bmp

参照させていただきました。すみません。

CSSは
div#navigation {
width:190;
padding:0px;
border:1px solid;
text-align:left;}

div#navigation dl {}

div#navigation dt {
border-bottom:1px solid;
width:170px;
margin-bottom:10px;
padding-left:0px;}

になっています。
今現在contentsの下に回りこんでしまっているのは、navigationの表示がおかしくなっているせいなのかとも思うのですが
どの部分を直せば綺麗に左寄りにnaviが表示されますでしょうか＞＜。

回答No.3

qualheart

＞今度はコメントページに飛んだ時に、記事の下にカテゴリ部分が回りこむ形になりました・・

コメント部分のDIVが<div id="contents">の外に出てしまっていませんか？
コメント部分は記事部分の一部になるので、<div id="contents">～</div>の内側に配置されている必要があると思います。
確認してみてください。

お礼

有難うございます。

htmlを観てましたが、コメントのdivはちゃんとcontentsに入ってました・・
今ちょっと気付きましたが、どうやらnavigationの値がおかしくなっているようです。
もう少し御付き合いください＞＜。 ちょっと整理してみます。