![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
御世話になります。
■ブログの、本体部分がどうしても真ん中に固定できません。本体部分は
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ベストアンサー
- 回答日時:
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
- 回答日時:
ANo.11です
動いたのですね
力技で
margin-left:-50px;とかマイナス表記で無理やり合わせてみてはどうですか?
margin-left:-50px;がダメならpadding-left:-50px;試してください
なぜだかソース見れない状況に陥っているので
どういった症状でおきているかわかりません!
他の方のアドバイスをもとにイメージしてるだけなので(笑)
おはようございます!!
hikachuさんのおっしゃっている マイナス -をしてみたら綺麗に動きました!!
独自タグがないddは綺麗に反映されていたので、独自タグ用と2つにナビをdiv分けしたらなんとか思い通りに
表示させられることができました!
有難うございました^^
皆様も有難うございました(_ _)とても助かりました!
No.11
- 回答日時:
凄い状況ですね。
。。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
- 回答日時:
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
- 回答日時:
> 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
- 回答日時:
>ですがnaviの中身が右にかたよったままです・・
>naviのpaddingは0にしているのに何故右に寄ってしまうのでしょうか(?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
- 回答日時:
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
- 回答日時:
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にしているのに何故右に寄ってしまうのでしょうか(?0?)
No.5
- 回答日時:
> 直したところ今度はnavigationの表示がおかしくなってしまいました・・
CSSにミスがありますね。以下の様に修正してみて下さい。
div#navigation {
width:190px;←単位(px)が抜けていました(IE以外では幅を解釈できなくなっています)。
float: right;←抜けていましたので右にナビを浮かせることができなくなっていました。
padding:0px;
border:1px solid;
text-align:left;
}
有難うございます!
修正してみましたが直りません><。
dlの部分がやけに右寄りになってしまうんです。
paddingも0に指定しているはずなんですが・・
No.4
- 回答日時:
> カテゴリーが記事の高さを過ぎると、記事の下に回りこんでしまう状況です。
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など)事をお奨めします。
この回答への補足
有難うございます。
回り込みの件ですが、おっしゃる通り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が表示されますでしょうか><。
お礼にすみません
ttp://www.geocities.jp/mamemaaya/html.txt
ttp://www.geocities.jp/mamemaaya/css.txt
upしてみました。
もしよろしければチェックお願いします(_ _)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS 吹き出し 下記の吹き出しのスタイルシートについて 下記のスタイルシートは左側にアイコンがでる使用にな 1 2022/11/12 17:55
- HTML・CSS CSSがなぜかfont-sizeだけ効かない...記述がまちがっているんでしょうか 5 2022/04/09 17:52
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS HTML & CSS 縦ボックス内の文字の左右センタリング 3 2023/03/25 04:23
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS テキストを画面の真ん中に配置したいです。 2 2022/11/25 16:11
- HTML・CSS CSS のみのタブ切り替えについて 1 2023/01/11 16:47
- HTML・CSS <!DOCTYPE html> <html> <head> <meta charset="utf-8 2 2023/01/05 01:04
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
【CSS】ヘッダーの高さが不明の...
-
HTMLで文字が重なって表示されます
-
widthやheightの数値に単位(px...
-
スクロールボックスを中央に配...
-
ddの内容が多い時のdtの背景を...
-
CSSで背景画像を一番下にもって...
-
画面に表示したらアニメーショ...
-
CSSについて教えて下さい ブロ...
-
画像イメージの上下左右、欲し...
-
日本地図(白地図的)にリンク...
-
CSS:animation開始位置の設定
-
table周辺の隙間をなくしたい。
-
CSS、width100%でもできる余白
-
divの入れ子が上手くいきません。
-
divの中にspanを右寄せにするに...
-
アドバイスをよろしくお願いします
-
3カラムレイアウトで隙間
-
HP初心者です。
-
h1のみが反映されない!?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報