0

ダイナミックコンテンツ（WordPress）を使用していて、 http：//www.munto.net/queed-v1/のようなリストの中央にロゴを配置したいと思います。

私はそれをテストし、両側のアイテムの数が同じであれば私の理論は機能します...しかし、それらが異なると、ナビゲーションが台無しになります。

http://joshrodgers.com/で実際の例を見ることができます。

私が行ったのは、ロゴを背景画像にし、それを順序付けされていないリストの中央に配置してから、各リストアイテムに幅を設定しました（非常に長いものがあったとしても、ナビゲーションを台無しにしないようにするため）。最後に、3番目のリンクの後で、リストアイテムの右側に200ピクセルの余白を配置します（このように、ロゴの上にリストアイテムはありません）...しかし、前述のように、アイテムの数が偶数の場合、これは完全に機能します、アイテムが奇数に等しい場合、それはおかしいように見えます。

これを行うための最良の方法がわからないので、これを修正するための最良の方法は何でしょうか？

ページコード：

<html>
    <head>
        <title>Josh Rodgers - El Paso, Texas</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>

    <body>
        <ul>
            <li>Home</li>
            <li>About Us</li>
            <li class="example">super new lodge</li>
            <li>Programs</li>
            <li>Events</li>
            <li>Contact Us</li>
           <li>Contact Us</li>
        </ul>
    </body>
</html>

CSSスタイル：

/* Reset */
@import url("reset.css");

body {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

ul {
    background: #ff0000 url("images/example.jpg") top center no-repeat;
    height: 200px;
    margin: 0 auto;
    text-align: center;
    width: 1000px;
}

li {
    background: #ffff00;
    color: #ff0000;
    display: inline-block;
    font-size: 20px;
    padding: 20px 0;
    position: relative;
    top: 70px;
    width: 100px;
}

li.example {
    margin-right: 200px;
}

* WordPressに統合する前に、通常のphpソリューションで作業すると考えました。

ありがとう、ジョシュ

4

1 に答える 1

1

デザインの観点から、私はおそらくロゴをホームリンクにすることを検討するでしょう。多くのWebユーザーは、ロゴをクリックして家に持ち帰ることに慣れています。ロゴの下にホームテキストを組み込むこともできます。

私はおそらくあなたのマージンの方法を使用しないでしょう-右：ロゴをカバーしないために200px、そのリストアイテムの前にあなたが変更するものはマージンをシフトします。

最終的には、ロゴを背景画像として設定することを再考し、それをリストアイテムの1つにすることをお勧めします。

于 2012-07-23T17:53:42.810 に答える