0

ヘッダー内にナビゲーションがあります。隅に画像があり、右側にボタンとして作成したナビゲーション リンクが必要ですが、白いボックス内の上部にあります。ページを縮小したときにヘッダーのサイズが変更されないという問題がありましたが、それを修正しましたが、ボタンがヘッダーから外れています。ページを縮小してもサイズは変更されません。助けていただければ幸いです。ありがとう。URLはhttp://tolitakeover.com

html は次のとおりです。

<header>
    <nav> 
        <ul>
            <li><a href="contact.html" class="button">Contact</a></li>
            <li><a href="" class="button">Blog</a></li>
            <li><a href="events.html" class="button">TBD</a></li>               
            <li><a href="affiliates.html" class="button">Affiliates</a></li>
            <li><a href="events.html" class="button">Events</a></li>
        </ul>
    </nav>
</header>

ここにCSSがあります：

nav{
   background:url('http://tolitakeover.com/images/toliheader.fw.png');
   background-size: 40% 100%;
   margin-left: 5%;
   width: 90%;
   height: 100%;
   background-repeat: no-repeat; 
   background-color:white;
}

nav ul{
   padding-top:20%;
   padding-right:3%;
   height:60%;
}

nav li{
    display:inline;
   float:right;
   padding-right:1%;
   padding-top:-50px;
}

nav ul li a,
   nav ul li a:visited{
   background-color: white;
   color: black;
   display:block;
}

nav ul li a:hover{
   text-decoration:none;
   background-color:white;
   color:black;
}

.button {
   display: inline-block;
   text-decoration: none;
   color: black;
   font-weight: bold;
   background-color: lightgray;
   padding: 5px 20px;
   margin-left:3%;
   margin-right:3%;
   font-size: 1.15em;
   border: 1px solid red;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   text-shadow: 0px -1px 0px rgba(0,0,0,.5);
   -webkit-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px       rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   -moz-box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);
   box-shadow: 0px 6px 0px lightgray, 0px 3px 15px rgba(0,0,0,.4), inset 0px 1px 0px rgba(255,255,255,.3), inset 0px 0px 3px rgba(255,255,255,.5);}
4

2 に答える 2

0

そのルートに行く場合は、代わりに「clearfix」を使用して、ヘッダーから nav クラスをクリアしますか?

理想的には、次のような 3 つのクラスが必要です。 #menu #container clearfix #navigation これにより、現在 #nav にあるように、ロゴも制御できるようになります。

于 2013-02-22T03:04:02.087 に答える
0

たくさんのことが起こっています。

質問、このスタイルシートはどこから入手しましたか? あなたがやろうとしていることは悪いニュースです。私はこれをどこから説明し始めればよいかさえ知りません...

次のようなクリーンでレスポンシブなテンプレートを使用して、ゼロから始めることをお勧めします。

http://www.initializr.com/

「ページのサイズ変更」とは、モバイルまたはタブレットに劣化することを意味しますか? CSS には、これに対するルールはありません。

また、CSS を見て、これを読むことをお勧めします: http://css-tricks.com/the-difference-between-id-and-class/

于 2013-02-22T02:40:37.727 に答える