NavBar上方的HTML / CSS空间并不会保持固定

时间：2014-01-21 10:56:06

标签： html css

我似乎无法使我的导航栏变得粘稠，也不能使我的导航栏上方没有空格。
我网站的网址是：http://cudahost.com/new
CSS就像：

body {
    font-size: 12px;
    line-height: 22px;
    font-family: Arial, Helvetica, Sans-Serif;
    color: #555;
    background-image:url('images/bg.png');
}

#navtopstick {
    background: inherit;
    height: auto;
    margin-top: -10px;
    position: fixed;
    z-index: 10;
}

/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}

/* HTML ELEMENTS */
h1 { font-family:"Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; text-align: center; color: #000; font-size:60px; letter-spacing:-1px; }
h1 small{ font-size: 24px; display: block; color: #636363; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:980px; margin:40px auto; }

/* CONTENT */
#content { margin-top:50px; }
#content p { font: 14px "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans-serif; color:#333333; line-height:18px; margin:15px auto; width:800px; }
#content p a { color:#0088CC; text-decoration:none; }
#content p a:hover { text-decoration:underline; }

/* STYLE NAVIGATION MENU */
#appleNav { margin:40px 0; list-style:none;

    /* Lucinda Grande is the font used */
    font-family: "Lucida Sans Unicode", "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; letter-spacing:-0.5px; font-size:13px;

    /* Apply a subtle text-shadow to the text */
    text-shadow: 0 -1px 3px #202020;

    width:980px; height:34px;

    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    border-radius:4px;

    -moz-box-shadow: 0px 3px 3px #cecece;
    -webkit-box-shadow: 0px 3px 3px #cecece;
    box-shadow: 0 3px 4px #8b8b8b;
    position: fixed;
}

#FooterWrapper {
    width: 100%;    
    max-width: 980px;
    margin: auto;
    bottom:0;
    background: url(images/darker.png);
} 


#footer {
    background: url(images/darker.png);
    width: 100%;
    float:left;
    bottom:0;
} 

    .footerFloat h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a{ color: #04B431; margin-bottom: 10px; text-transform: none; font-weight: bold; }
    .footerFloat a:link { color: #04B431; text-decoration: none}
    .footerFloat a:visited { color: #04B431; text-decoration: none}
    .footerFloat a:hover { color: #04B431; text-decoration: underline}
    .footerFloatLast h3{ font-size: 20px; color: #0431B4; margin-bottom: 10px; text-transform: none; font-weight: bold; }

.footerFloatLogo {
    width: 40%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloat {
    width: 25%;
    float: left;
    min-width:200px;
    bottom:0;
}

.footerFloatLast {
    width: 30%;
    float: left;
    min-width:200px;
    bottom:0;
}

#wrapper {
    width: 100%;
    overflow:hidden;
} 

#appleNav li { display:block; float:left; border-right:1px solid #5d5d5d; border-left:1px solid #929292; width:105px; height:34px; border-bottom:1px solid #575757; border-top:1px solid #797979;

    /* Gradient backgrounds for the buttons. Generated using http://gradients.glrzad.com/ */
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #787878), color-stop(0.5, #5E5E5E), color-stop(0.51, #707070), color-stop(1, #838383));
    background-image: -moz-linear-gradient(center bottom, #787878 0%, #5E5E5E 50%, #707070 51%, #838383 100%);
    background-color:#5f5f5f; /* Fallback */
}

/* Set the states when hovering */
#appleNav li:not(:last-child):hover {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    /* We use the inset of the box shadow to create a subtle inner glow when hovering */
    -moz-box-shadow: inset 0 0 5px 5px #535353;
    -webkit-box-shadow: inset 0 0 5px 5px #535353;
    box-shadow: inset 0 0 5px 5px #535353;
}

/* When the user clicks the button, */
#appleNav li:not(:last-child):active {
    background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #3F3F3F), color-stop(0.5, #383838), color-stop(0.51, #434343), color-stop(1, #555555));
    background-image: -moz-linear-gradient(center bottom, #3F3F3F 0%, #383838 50%, #434343 51%, #555555 100% );
    background-color:#383838; /* Fallback */

    -moz-box-shadow: inset 0 1px 2px 2px #000;
    -webkit-box-shadow: inset 0 1px 2px 2px #000;
    box-shadow: inset 0 1px 2px 2px #000;
}

#appleNav li a { color:white; text-decoration:none; text-align:center; display:block; line-height:34px; outline:none; }

/* Styling of the search field */
#appleNav form input { width:76px; height:20px; margin-left:9px; margin-top:8px; border:none; padding-left:20px; padding-right:10px; color:#eee;

    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px;

    /* CSS3 multiple backgrounds for the input field: The magnifier image and the gradient background */    
    background-image: url("../images/magnifier.png"), -webkit-gradient(linear, left bottom, left top, color-stop(0, #747474), color-stop(0.5, #6E6E6E), color-stop(0.51, #7E7E7E), color-stop(1, #8D8D8D));
    background-image: url("../images/magnifier.png"), -moz-linear-gradient(center bottom, #747474 0%, #6E6E6E 50%, #7E7E7E 51%, #8D8D8D 100%);
    background-repeat: no-repeat;

    background-color:#6E6E6E; /* Fallback */

    -moz-box-shadow: inset 0 2px 1px 1px #363636;
    -webkit-box-shadow: inset 0 2px 1px 1px #363636;
    box-shadow: inset 0 2px 1px 1px #363636;
}

/* Rounded corner for the first in last item. Shorthand: Top left, Top right, Bottom right, Bottom left. */
#appleNav li:first-child {
    -moz-border-radius:4px 0 0 4px;
    -webkit-border-radius:4px 0 0 4px;
    border-radius:4px 0 0 4px;

    border-left:none;
}

#appleNav li:first-child a img {
   vertical-align:middle; margin-top:-2px;
}

#appleNav li:last-child {
    -moz-border-radius:0 4px 4px 0;
    -webkit-border-radius:0 4px 4px 0;
    border-radius:0 4px 4px 0;

    border-right:none;
    width:124px;
}

/* Fade in animation (Webkit only) */
@-webkit-keyframes showMenu {
    from { opacity: 0; top:-20px; }
    to   { opacity: 1; }
}

#appleNav {
     -webkit-animation: showMenu 1s; position:relative;
}

有人可以帮我解决这个问题吗？如果可能的话，我希望我的导航栏总是在顶部粘，但它似乎不起作用。

另外在另一个注意事项中，如果可能的话，你可以解释一下我如何修改我的代码以使我的页脚位于页面底部，而不是粘滞或固定，但即使没有足够的内容也会被“推”到底部内容，阻止它坐在页面的一半。

非常感谢，希望尽快得到一些帮助。

--------更新-------- 感谢大家回答，我已解决了大部分问题，现在我只想在页脚上方添加一些空间，使其不在文本上方，是否可以使用上面的填充或边距来实现？不知道如何做到这一点，任何帮助将不胜感激。

3 个答案:

答案 0 :(得分：0)

尝试使用此代码，更改这些代码的边距宽度，然后添加代码fotterwrapper：

#wrapper {
  margin: 0 auto;
}

#content {
  margin-top: 0;
}

#appleNav {
  margin: 0 0 20px 0;
}

#footerwrapper{
  position: absolute;
  bottom: 0;
  width: 100%;
}

答案 1 :(得分：0)

页脚有很多教程，我跟着：

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

但是还有一个堆栈问题：

CSS to make HTML page footer stay at bottom of the page with a minimum height

可能会进行有趣的阅读

答案 2 :(得分：0)

删除wrapper上的边距。删除#applenav上的position: relative;和margin语句，并在position: fixed上设置navtopstick而不是#applenav。比，删除保证金@ #content，你很高兴！在这种情况下，您的导航将固定在上方，您可以进一步设置风格。

如果你坚持现在使用的风格，你将无法使用它。

相关问题
最新问题