0

絶対中央のロゴをナビゲーション リンク (両側に 3 つ) で囲み、サイズ変更時にナビゲーションがロゴの下に収まるようにする方法がわかりません: http://testsite.brentthelendesign .com/ . これが他の場所で回答されている場合は、事前にお詫び申し上げます。どんな助けでも大歓迎です！

コードは次のとおりです。

ロゴCSS

h1.logo {
    float: none;
    left: 50%;
    margin-left: -80px;
    text-align: center;
}

h1.logo a {
    background: url("images/logo.png") no-repeat scroll 0 0 transparent;
    display: block;
    float: none;
    height: 127px;
    text-align: center;
    text-indent: -9999px;
    width: 181px;
}

.abs {
    position: absolute;
}

ナビゲーション CSS

.nav {
    position: relative;
}
#navigation ul li, #navigation ul li a {
    border: medium none !important;
    color: #3C3F40;
    display: block;
    float: right;
    font-family: 'Fjord One',"Times New Roman",Times,serif;
    font-weight: normal;
    margin: 42px 0 130px !important;
    padding: 15px 25px;
    position: relative;
    text-align: center !important;
    text-decoration: none;
    text-transform: uppercase;
}
#navigation ul li:hover a, #navigation ul li a:hover {
    color: #D9A13B;
}
#navigation ul li:hover li a {
    color: #D9A13B;
    font-weight: normal;
}
#navigation ul li.active a {
    color: #D9A13B;
}
#navigation ul.sub-menu {

}
#navigation ul.sub-menu li {
    border: medium none;
}
#navigation ul.sub-menu li a {
    background: none repeat scroll 0 0 transparent;
    border-bottom: medium none;
    border-radius: 0 0 0 0;
    height: 32px;
    line-height: 32px;
    min-width: 210px;
    padding: 5px 0 5px 8px;
    position: static;
}
#navigation ul.sub-menu li a:hover {
    border-bottom: medium none;
}

HTML:

<header class="sixteen columns">



 <nav>

    <h1 class="logo abs">
    <a href="/">Bound By Design</a>
    </h1>

    <div id="navigation" class="row sixteen columns">
        <div class="menu-header">

            <ul id="menu-primary-menu" class="menu sf-js-enabled">

                <li id="menu-item-40" class="menu-item menu-item-type-post_type menu-item-
               object-page current-menu-item page_item page-item-4 current_page_item menu-item-40 active">
                <a href="http://testsite.brentthelendesign.com/">Home</a>
                </li>
                <li id="menu-item-41" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-41">
                <a href="http://testsite.brentthelendesign.com/category/tattoos/">Tattoos</a>
                </li>
                <li id="menu-item-42" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-42">
                <a href="http://testsite.brentthelendesign.com/category/piercings/">Piercings</a>
                </li>
                <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60">
                <a href="http://testsite.brentthelendesign.com/aftercare/">Aftercare</a>
                </li>
                <li id="menu-item-58" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-58">
                 <a href="http://testsite.brentthelendesign.com/category/news/">News</a>
                </li>
                <li id="menu-item-59" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-59">
                <a href="http://testsite.brentthelendesign.com/contact/">Contact</a>
                </li>
           </ul>
        </div>
     </div>
   </nav>
</header>
4

2 に答える 2

2

追加するだけです：

#navigation ul li:nth-child(3) {
  margin-right: 213px!important;
}

layout.css に追加すると、ロゴの問題が処理されます。

また：

#navigation ul li, #navigation ul li a { 15px 0 26px 0 !important; }

ナビゲーションと「WELCOME」の間のギャップをなくしたい

于 2013-07-17T17:37:33.847 に答える
0

ロゴとページ幅にあまり依存しないアプローチを次に示します。

#menu-primary-menu {width: 100%}
#menu-primary-menu > li:nth-child(n+4) {float: right}

3 つの右フローティング メニュー項目は、右から左に積み上げられているため、順序を逆にする必要があることに注意してください。

于 2013-07-17T17:46:03.043 に答える