0

wordpress サイトのヘッダー画像の上にセカンダリ メニューをインストールしようとしていますが、Firefox 24.0 と Chrome 30.0.1599.101 m、Wordpress 3.6.1 でレイアウトが異なります。

このテスト サイトをチェックして、ページの最上部の違いを確認してください。Firefox はヘッダーの上にトップ メニューを「オーバーレイ」し、Chrome はヘッダーを押し下げます。

http://puckpros.edkatzman.com

当然のことながら、新しいメニューを削除してもページは同じように見えます。

Firebug と Chrome ツールを使用してページを調べましたが、これを行っている可能性のある css が見つかりません。

余談ですが、トップメニューをページのトップと同じ高さにしたいです。上部にマージンまたはパディングが発生するCSSのどこにも表示されませんが、上部から約22pxが表示されています。

ありがとう。

4

1 に答える 1

1

それを引き起こしている問題がいくつかあります。

まず第一に、あなたのメニューにはマージンがあります。あなたの style.css には次のものが含まれていることがわかります。

.header-navigation ul {
    margin-left: 0;
}

これを次のように変更するだけです：

.header-navigation ul {
    margin: 0;
}

それを変更した後も、「ノース ショア シカゴのホッケー スキル トレーニング」という見出しが一番上に表示されます。現在、「line-height: 1px;」があります。これにより、見出し自体がつぶれます。

見出しを完全に削除するか (おそらくテーマの header.php ファイルにあります)、開始タグの後に移動して<div id="header" class="grid-100 clearfix">、style.css に追加する必要があります (485 行目):

h1.title {
    color: #000;
    padding: 3px 0 0 5px;
    float: left;
}

このようにして、見出しが実際に表示され、メニューが混乱することはありません。

編集：

ナビゲーションが画像の上にとどまるようにするには、絶対にすることをお勧めします。Chrome はナビゲーションを適切にレンダリングしていると思います (私も間違っているかもしれません)。いずれにせよ、630 行目のエントリを次のように変更するだけです。

.header-navigation {
    list-style-type: none;
    margin: 0;
    padding: 0;
    position: absolute; 
    top: 0;
    right: 10px;
}

これにより、ナビゲーションが常にヘッダー画像の上に表示されるようになります。

于 2013-10-28T16:52:21.677 に答える