У меня опять проблема. Я только что обновил мою страницу Arcade, и я хочу, чтобы у нее была другая навигационная панель, чем остальная часть моего сайта. Когда я делаю каждый div, который я использую в качестве вкладки, position:relative;
div, он отлично работает. Но я хочу, чтобы вкладки оставались на вершине, где бы вы ни находились в аркаде.
Я изменил вкладки на position:fixed
и перестало работать. Все мои вкладки перекрывали друг друга, поэтому вы могли видеть только один. Я изучал этот вопрос и нашел на нем статью. В этой статье говорится о том, чтобы поместить все position:relative
divs внутри одной фиксированной позиции div. Я пробовал, и он не работает.
Я использую PHP файл, чтобы сохранить эти вкладки.
Это мой HTML в моем заголовочном файле:
<body>
<br />
<div id="gamenav-fixed"><center><a href="/"><div class="game-home">Home</div></a><a href="/arcade/action"><div class="game-nav">Action</div></a><a href="/arcade/arcade"><div class="game-nav">Arcade</div></a><a href="/arcade/puzzle"><div class="game-nav">Puzzle</div></a><a href="/arcade/vehicle"><div class="game-nav">Vehicle</div></a><a href="/arcade/violence"><div class="game-nav">Violence</div></a><a href="/arcade/defense"><div class="game-nav">Defense</div></a><a href="/arcade/rpg"><div class="game-nav">Role Playing</div></a><br /><br /></div>
<div class="text-center"><font face="lucida console" size="12px" color="#686868">Game</font><font face="baskerville old face" size="12px" color="#888888"><b>Shank</b></font></br></br></div>
</body>
Вот CSS, который я использую для этих вкладок:
/* The following is for the arcade page navigation! */
/* Center navigation. */
div#gamenav-fixed:{
position:fixed;
}
.game-nav{
border:0px;
padding:9px 25px 10px 25px;
box-shadow:0px 0px 0px 0px;
transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
font-family:arial;
color:#909090;
text-size:12px;
text-align:center;
display:inline;
position:relative;
background-color:#e0e0e0;
}
.game-nav:hover{
border:0px solid #686868;
transition: .5;
-moz-transition: .5;
-webkit-transition: .5;
background:#c0c0c0;
color:#202020;
}
.game-nav:active{
border:0px solid #686868;
transition: .5;
-moz-transition: .5;
-webkit-transition: .5;
box-shadow:0px 0px 10px 1px #a0a0a0 inset;
background:#d0d0d0;
color:#202020;
}
.game-home{
border:0px;
padding:9px 25px 10px 25px;
box-shadow:0px 0px 0px 0px;
transition: .5s;
-moz-transition: .5s;
-webkit-transition: .5s;
font-family:arial;
color:#202020;
text-size:12px;
text-align:center;
display:inline;
background-color:#c0c0c0;
position:relative;
}
.game-home:hover{
border:0px solid #686868;
transition: .5;
-moz-transition: .5;
-webkit-transition: .5;
background:#e0e0e0;
color:#909090;
}
.game-home:active{
border:0px solid #686868;
transition: .5;
-moz-transition: .5;
-webkit-transition: .5;
box-shadow:0px 0px 10px 1px #a0a0a0 inset;
background:#d0d0d0;
color:#202020;
}
/* Ends arcade navigation! */
Мой сайт - gameshank.com. И спасибо заранее!
в первую очередь у вас есть ошибка в CSS
div#gamenav-fixed:{
должен быть без ":"
Для меня это не перекрывается тогда, и единственное, что осталось от id, чтобы установить его на 100%, поэтому оно является широким, как вся страница и центрируется.
div#gamenav-fixed {
position: fixed;
width: 100%;
}
Если у вас есть проблемы с этим, вы можете вставить весь HTML-код? может быть, проблема с doctype или sth аналогична, что может привести к тому, что страница не будет корректно отображаться в каждом браузере. Возможно, вы также можете указать, какой браузер вы используете.
Здесь доказательство jsfiddle, что это работает:
На основе вашей фактической стороны (gameshank.com) ваш CSS должен выглядеть так:
.nav {
/* ----- */
margin: 0px;
left: 0px;
position: fixed;
width: 100%;
/* ----- */
background: #989898;
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJod…EiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #989898 0%, #d0d0d0 77%, #d0d0d0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#989898), color-stop(77%,#d0d0d0), color-stop(100%,#d0d0d0));
background: -webkit-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
background: -o-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
background: -ms-linear-gradient(top, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
background: linear-gradient(to bottom, #989898 0%,#d0d0d0 77%,#d0d0d0 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#989898', endColorstr='#d0d0d0',GradientType=0 );
}