1

まず第一に、私のこのプロジェクトを手伝ってくれたここにいるみんなに感謝したいと思います!

サイトのロゴをナビゲーション リンクの中央に配置し、ヘッダーの少し下に配置しようとしています。私の問題は、この効果を (ほぼ) 達成すると、ロゴが右側に移動し、ナビゲーション リンクが元に戻ることです。このサイトで同様の問題に対して多くの解決策を試しましたが、サイコロはありません。

私の問題の現在の状態は、ここで見つけることができます:サイト

CSS:

  nav {
    position: fixed;
    top:0px;
    left:0px;
    width: 100%;
    height: auto;
    padding: 0px;
    border-bottom: 4px solid #291e13;
    background:url(../../img/black_paper.png);
    background-color:#FFF;
        -webkit-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); 
    -moz-box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
    z-index:1;
    list-style:none;
    text-align:center;
    font-family: Conv_goudy_bookletter_1911-webfont;
    font-weight:bold;
}

nav li {
    display: inline;
}

nav li a {
   display: inline-block;
   padding: 10px;    
       font-family: 'Oswald', sans-serif;    
       font-size: 16px;
       text-transform: uppercase;
       text-decoration: none;
       color: #fff;
       vertical-align:central;
       text-shadow: 1px 2px rgba(0, 0, 0, .2);
       -webkit-transition: color .3s linear;
       -moz-transition: color .3s linear;
       -o-transition: color .3s linear;
       -ms-transition: color .3s linear;
       transition: color .3s linear;
}


nav li a:hover {
  color:#F30;
}


nav li a img {
     display:inline-block;
     position: absolute;
     top: 25px;
     margin: 0 auto;
}

そしてHTML：

<div id="headercontainer">
        <nav>
            <ul>
                <li><a class="homelink anchorLink" href="#home">Home</a></li>
                <li><a class="aboutlink anchorLink" href="#about">About</a></li>
                <li><a id="plan9Logo" class="homelink anchorLink" href="#home"><img src="img/logo.png" width="133" height="133"></a></li>
                <li><a class="menulink anchorLink" href="#menu">Menu</a></li>
                <li><a class="contactlink anchorLink" href="#contact">Contact</a></li>
            </ul>               
        </nav>

    </div>

ある種の背景にすることで、この効果を達成することは可能でしょうか?

4

1 に答える 1