0

独自の Wordpress ブログの作成を開始したので、ヘッダーの修正に行き詰まりました。

私は CSS/JavaScript に少しだけ触れたことがあります。私が達成したいことのほとんどはすでに行われていますが、投稿などを追加する前に、このヘッダーを修正してみたいと思います.

これをインターネットで検索すると、実際には以下しか見つけられず、これを私のstyle.cssファイルに追加しました。

#masthead {position:fixed; top:0px; margin:auto; z-index:100000; width:100%;}

これにより、ヘッダー画像とナビゲーションが所定の位置に修正されましたが、中心が少しずれていますが、ページの残りの部分は今でもこれより遅れています. 問題の 1 つは、画像とナビゲーションの実際の背景が不透明なことです。以下のスクリーンショットをご覧ください。

Before code - http://tinypic.com/r/2vxm69t/6
After code - http://tinypic.com/r/34jd2t1/6

おそらく、header.php 内に別の「div」を作成するか、これを何らかの方法で修正する必要があると思いますが、実際にこれが機能する理由については 100% 確信が持てません。理想的には、このコードを追加する前のスクリーンショットに表示されている Nav リンクの下に追加した行は、ヘッダーの下部を示し、スクロールすると残りはこの下に消えます。背景は全体として白のままで、ページの残りの部分の中央にあり、背景を見せる上部の隙間も含まれます。

!! スクリーンショットについては申し訳ありませんが、あまり明確ではありませんが、これが何が起こっているのかを示しており、十分に明確であることを願っています。できるだけ早くこれをホストします!

私の「style.css」と「header.php」へのリンクは次のとおりです。他に何か必要な場合はお知らせください。

style.css - http://codepad.org/c4BnqxlF
header.php - http://codepad.org/w4z19VLW

これは私のブログで見栄えがよくなると思うので、誰かが助けてくれることを願っています。


編集

修正されたコード。正しい位置合わせと背景が表示されるようになりましたが、ヘッダー画像の上にまだ白いセクションが表示されています。次のスクリーンショットが最適です。http://tinypic.com/view.php?pic=126bd7c&s=6

#masthead {background: #FFF;position:fixed; top:0px; height: 350px; z-index:100000; width:960px;} 
#main {margin-top:335px;}

.

4

2 に答える 2

0

適切に収まるようにコードを調整する必要がありますが、達成しようとしていると思われることを実行する方法の例を次に示します。

コードでは、背景色と画像 + ナビゲーションの高さを定義する必要があります。その後、id="main" が残りの情報の下になるようにマージンを作成する必要があります。これは、画像 + ナビゲーション リンクのマージントップになります。

更新: Margin-top を 24px に追加

#masthead {background: #FFF;position: fixed; top: 0px; height: 350px; z-index: 100000; width: 100%;margin-top: 24px;} 
#main {margin-top:350px;}

参考: http: //jsfiddle.net/6VcZe/1/

于 2013-04-04T23:49:16.730 に答える