0

I have my nav inside the header. I have an image in the corner and want the navigation links, which I made as buttons, on the right, but higher up within the white box. I had a problem with the header not resizing when i shrunk the page but I fixed that, but now the buttons are off the header. They also do not resize when I shrink the page. Help is greatly appreciated. Thanks. The url is http://tolitakeover.com

Here is 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>

Here is 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”，从标题中清除导航类？

理想情况下，他应该在上面设置三个类，例如：#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 回答