サポート » 使い方全般 » ヘッダー以下の幅がブラウザいっぱいに拡がってしまう

  • 解決済 hidechan3595

    (@hidechan3595)


    自社サイト立ち上げ準備中のWordPress初心者です。
    xamppによるlocalhost環境で、WordPress 3.2.1、Graphene 1.4.1 というテーマを用いてカスタマイズをすすめています。
    ブラウザはFirefox6.0メインで、IE8.0でもチェックをしています。
    Navigetion menu のカスタマイズが終わったところで画面チェックをしたところ、header img および top-barのみが初期値width:960px で画面中央に配置され、header 以下(Navigation menu 以下)が、ブラウザ幅いっぱいでレイアウトされるようになってしまいました。
    テーマGrapheneのstyle.cssはバックアップを取り、変更点にはコメントを付けつつ作業を進めてきていますが、原因が分かりません。
    どこの設定が書き換わってしまったのか、ご教授をお願いします。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • hidechan3595さん
    こんばんわ。はじめまして。

    もし差し支えなければ、変更点を加えた状態のCSSをお教え頂けますか。
    Header直下にくるボックス名も教え頂けると参考になります。

    おそらく、Navigation menu 直下にくるボックスの幅を指定する記述がないのではないかと思うのですが…。

    またはdivの閉じたタグがたぶっている等。

    トピック投稿者 hidechan3595

    (@hidechan3595)

    bcさん、はじめまして。
    アドバイスありがとうございます。
    ※よく分からないままに投稿したのですが、この内容は「テーマ」にて教えていただいた方がいいのでしょうか・・・

    top-barです。

    #top-bar {
    	background: url(images/sprite_h.png) left -196px repeat-x #313130;
    	/*border-bottom:1px solid #222;*/
    	/*height: 54px; top-bar幅変更*/
    	height: 48px;
    	position: relative;
    	z-index: 10;

    headerです。

    #header {
    	background-position: center top;
    	background-repeat: no-repeat;
    	/*border-top:1px solid #000; top-barとheader-imgとの間のライン色変更 */
    	border-top:1px solid #e3e3e3;
    	/* header-img下とnav-barとの間のライン追加 */
    	border-bottom;1px solid #fff;
    	height: 198px;
    	width: 100%;
    	position: relative;
    }

    header-imgの記載です。

    #header_img_link {
    	display: block;
    	position: absolute;
    	text-decoration: none;
    	width: 960px;
    	height: 198px;
    }

    そして、navの記載です。

    /* nav-bar の長さ*/
    #nav .menu {
    	width: 100%;
    }
    .menu-bottom-shadow{
    	background: url(images/sprite_h.png) left top repeat-x #eee;
    	height: 3px;
    	width: 100%;
    }

    この後に、本体(と思われる)記載が続きます。

    #content {
    	background: #e3e3e3;
    	/* padding-top: 21px; */
    	padding-top: 15px;
    	padding-bottom: 20px;
    }
    #content-main {
    	float: none;
    	width: 100%;
    }

    この情報で伝わりますでしょうか・・・
    よろしくお願いします。
    ※くり返しになりますが、この内容は「テーマ」フォーラムにてご教授いただいた方がいいのでしょうか。 もしそうであれば、「テーマ」に移動します。

    モデレーター Takuro Hishikawa

    (@hissy)

    原因がCSSなのかphpなのか、まず切り分けたほうがよろしいかと思います。
    現在の変更を加えたテーマのバックアップを取り、Grapheneを再インストールし、CSSだけアップロードしてみる。さらに元に戻し、変更を加えたPHPだけアップロードしてみる。どちらかというとbcさんの指摘するように閉じタグの過不足が原因のように想像しますが。

    トピック投稿者 hidechan3595

    (@hidechan3595)

    hissyさん、アドバイスありがとうございます。
    「CSS」と「php」の切り分け
    自分の中で何がはっきりしていないか というと、まさにこの部分です。
    CSSは全行プリントアウトし、何度も読み直して怪しい点は実際に試しているのですが、phpのコーディングが今ひとつきっちり理解できていません。
    アドバイスいただいたとおり、再度 Grapheneを再インストールし、試してみます。
    bcさん、hissyさん、ありがとうございます。

    ※やはり今回ご質問している内容は、「テーマ」フォーラムでのやりとりが適切のような気がします。
    ですので、アドバイスいただいた方法を試しますが、このフォーラムでのご質問は、とりあえずこの時点で一区切り付けるようにいたします。
    継続して、「テーマ」フォーラムにてお問い合わせすることになると思います。
    よろしくお願いいたします。

    トピック投稿者 hidechan3595

    (@hidechan3595)

    Grapheneのheader.phpをカスタマイズしているときに、偶然直りました。
    原因は、皆さんにご指摘いただいたとおり、header.phpの「/div」タブがダブっていたためでした。
    ありがとうございました。

5件の返信を表示中 - 1 - 5件目 (全5件中)
  • トピック「ヘッダー以下の幅がブラウザいっぱいに拡がってしまう」には新たに返信することはできません。