0
我從互聯網上下載了一個模板表，並編輯成我想要它的方式，但由於某種原因，它忽略了分配給它（我無法真正地解釋它，我會在圖片中看到它），但這不是唯一的問題;我已經在桌子後面放置了下拉導航欄（並且在主頁上的圖像滑塊後面）我試圖在每個導航類上放置'z-index ='（以及各種數字），但這並不起作用。我有這麼每當有人滾動導航欄（和尾）留他們在哪裏，也許有什麼關係呢，我不知道......表走出容器，在導航欄後面
這是我的html代碼：
<head>
<meta name="Copyright" content="Copyright XylCro Gaming 2015 - All Rights Reserved.">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Gear/PC Specs</title>
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- don't forget! -->
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script>
<script>
$(window).scroll(function() {
if ($(window).scrollTop() > 200)/*header hight*/ {
$('#nav').addClass('stuck');
} else {
$('#nav').removeClass('stuck');
}
});
</script>
<script>
$(function(){
$('a').each(function() {
if ($(this).prop('href') == window.location.href) {
$(this).addClass('current');
}
});
});
</script>
<title>Untitled Document</title>
</head>
<body>
<div id="container_wrapper">
<div id="wrapper">
<div id="header">
<div id="social_bar">
<ul>
<li><a class="twitch" rel="external" href="http://www.twitch.tv/xylcro" target="_blank"></a></li>
<li><a class="youtube" rel="external" href="https://www.youtube.com/channel/UCSifAEUVDHNQ3mUFUGrUlGA" target="_blank"></a></li>
<li><a class="twitter" rel="external" href="https://twitter.com/xylcro" target="_blank"></a></li>
<li><a class="facebook" rel="external" href="https://www.facebook.com/XylCro" target="_blank"></a></li>
</ul>
</div>
</div>
<!-- div socialbar and logo -->
<div id="nav">
<div id="nav_wrapper">
<ul>
<li><a href="index.php">Home</a></li>
<li> <a href="news.php">News</a></li>
<li><a href="#">XylCro</a>
<ul>
<li><a href="about.php">About</a></li>
<li><a href="#">Gear/PC Specs</a></li>
</ul>
</li>
<li><a href="#">Archives</a>
<ul>
<li><a href="#">Twitch Archive</a></li>
<li><a href="#">YouTube Videos</a></li>
</ul>
</li>
<li> <a href="#">Community</a>
<ul>
<li><a href="#">Forum</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- other divs -->
<div id="content">
<div class="setup_wrapper">
<div class="setup scale">
<span class="setup_title">Test Title</span>
<ul class="features">
<li class="features_li">Test 1</li>
<li class="features_li">Test 2</li>
<li class="features_li">Test 3</li>
<li class="features_li">Test 4</li>
<li class="features_li">Test 5</li>
</ul>
</div>
</div>
</div>
<div id="footer">
<p>Copyright © XylCro Gaming 2015 - All Rights Reserved</p>
</div>
</div>
</div>
</body>
</html>
我的CSS代碼：
@charset "utf-8";
/* CSS Document */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
hr{
display:block;
}
html{
background-image:url(img/static/bg.jpg);
background-repeat:repeat;
background-position:top center;
}
#container_wrapper{
height:100%;
}
body{
font-family: 'Open Sans', sans-serif;
font-size:1em;
line-height:1.4;
margin:0;
}
#wrapper{
background-color:#F4F4F4;
/*background-image:url(img/static/headertest.fw.png);
background-position:top center;
background-repeat:no-repeat;*/
padding:0;
width:100%;
height:auto;
min-height:100%
}
#header{
background-image:url(img/static/header.png);
/*background-color: #F00;*/
background-position:center;
width: 1100px;
height: 200px; /* need to change */
margin:0 auto;
position:relative;
}
#scoial_bar{
float:left;
text-align:left;
margin:0;
padding:0;
}
#social_bar ul{
padding:0;
margin:0;
position:absolute;
bottom:1;
}
#social_bar ul li{
list-style:none outside none;
padding:0;
margin:6 0 0 15;
display:inline-block;
}
#social_bar ul li a{
height:50px;
background-repeat:no-repeat;
background-position:bottom;
display:inline-block;
}
#social_bar ul li a.twitch{
background-image:url(img/static/social/twitch_small.png);
width:49px;
margin:0 0;
text-indent:9999px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#social_bar li a.twitch:hover{
background-image:url(img/static/social/twitch_small_hover.png);
}
#social_bar ul li a.youtube{
background-image:url(img/static/social/youtube_small.png);
width:72px;
margin:0 0;
text-indent:9999px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#social_bar li a.youtube:hover{
background-image:url(img/static/social/youtube_small_hover.png);
}
#social_bar ul li a.twitter{
background-image:url(img/static/social/twitter_small.png);
width:63px;
margin:0 0;
text-indent:9999px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#social_bar li a.twitter:hover{
background-image:url(img/static/social/twitter_small_hover.png);
}
#social_bar ul li a.facebook{
background-image:url(img/static/social/facebook_small.png);
width:28px;
margin:0 0;
text-indent:9999px;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#social_bar li a.facebook:hover{
background-image:url(img/static/social/facebook_small_hover.png);
}
/* social and logo */
.stuck{
position:fixed;
z-index:1;
width:100%;
top:0;
}
#nav {
background-color: #222;
opacity: 0.9;
filter: alpha(opacity=50);
box-shadow: 0 4px 6px -2px rgba(0,0,0,0.4);
}
#nav_wrapper {
width: 1100px;
margin: 0 auto;
text-align: left;
}
#nav ul {
-webkit-font-smoothing:antialiased;
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
-webkit-transition: .5s;
-moz-transition: .5s;
-ms-transition: .5s;
-o-transition: .5s;
transition: .5s;
}
#nav ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li a: active {
color: #F70;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
#nav ul ul {
display: none;
position: absolute;
background-color: #333;
/*border: 5px solid #222;*/
border-top: 0;
margin-left: 0;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a:hover {
color: #699;
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
#content{
background-color:#FFF;
width:1100px;
text-align:center;
margin:-20px auto;
padding-top:3em;
padding-bottom: 3em;
}
/* content and other divs */
#footer{
color:#CCC;
background-color: #222;
opacity: 0.9;
filter: alpha(opacity=50);
height:50px;
clear: both;
position: fixed;
margin-top: -3em;
z-index:1;
width:100%;
bottom:1;
margin:auto;
text-align:center;
box-shadow: 0 -4px 8px -2px rgba(0,0,0,.4);
}
.setup_wrapper {
width:250px;
margin-left:10px;
margin-top: 50px;
}
.setup {
width: 250px;
background: #0F1012;
color: #f9f9f9;
float: left;
}
.setup .setup_title {
display: block;
width: 250px;
background: #292b2e;
margin: 15px 0 10px 0;
text-align: center;
font-size: 23px;
padding: 17px 0 17px 0;
}
.features{
display: block;
margin: 20px 0 10px 0;
padding: 0;
list-style-type: none;
text-align: center;
color: #999999;
}
.features_li{
display: block;
margin: 10px 0 0 0;
}
.scale {
transform: scale(1.2);
box-shadow: 0 0 4px 1px rgba(20, 20, 20, 0.8);
}
.scale .setup_title {
color: #64AAA4;
}
有問題的圖像：http://i1346.photobucket.com/albums/p683/dcf007/stupid%20site_zpsrtrctx3j.png
這個工程，但導航欄不再粘滯 – XylCro
對不起，請更改位置爲固定。這應該夠了吧。 – nancyolson531