0
У меня есть панель навигации с кнопками в качестве фоновых изображений, которые меняются при наведении мыши. Тем не менее, я не могу сосредоточиться на кнопках в порядке.Как центрировать бар NAV с фоновыми изображениями?
nav {
padding: 10px 0 25px 0;
background-color: blue;
}
.nave {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 30px;
float: left;
}
.nav {
padding: 10px 0 25px 0;
background-color: #333;
height: 35px;
margin: 0;
border: solid;
margin-bottom: 5px;
margin-top: 5px;
text-align: center;
width: 800px;
}
nav ul {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
nav li {
display: inline;
}
.btnInicio {
background-image: url("Imagenes/btnInicio.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnInicio:hover {
background-image: url("Imagenes/btnInicio_Hover.png");
}
.btnHistoria {
background-image: url("Imagenes/btnHistoria.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnHistoria:hover {
background-image: url("Imagenes/btnHistoria_Hover.png");
}
.btnLogros {
background-image: url("Imagenes/btnLogros.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnLogros:hover {
background-image: url("Imagenes/btnLogros_Hover.png");
}
.btnAct {
background-image: url("Imagenes/btnAct.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnAct:hover {
background-image: url("Imagenes/btnAct_Hover.png");
}
.btnCon {
background-image: url("Imagenes/btnCon.png");
background-repeat: no-repeat;
float: left;
height: 56px;
width: 138px;
}
.btnCon:hover {
background-image: url("Imagenes/btnCon_Hover.png");
}
section.main section.container {
padding: 10px 360px 20px 30px;
position: relative;
overflow: hidden;
border: solid;
}
section.content {
float: left;
width: 100%;
background-color: #FFFF00;
border: solid;
}
section.sidebar {
float: right;
margin-right: -330px;
width: 300px;
background-color: #fff;
border: solid;
}
section.content:after,
section.sidebar:after {
display: block;
position: absolute;
height: 100%;
background-color: #fff;
}
section.content:after {
left: 30px;
right: 360px;
}
section.sidebar:after {
right: 30px;
width: 300px;
}
section.left,
aside.right {
padding: 20px;
}
footer {
background-color: #428BCA;
float: right;
height: 35px;
width: 99.85%;
text-align: center;
font-size: 30px;
border: solid;
margin-top: 5px;
}
@media all and (max-width: 840px) {
section.main section.container {
padding: 10px 30px;
overflow: visible;
}
section.content {
float: none;
margin-bottom: 30px;
}
section.sidebar {
float: none;
margin-right: 0;
width: 100%;
}
section.content:after,
section.sidebar:after {
display: none
}
}<nav>
<div class="nave">
<ul>
<li class="btnInicio"></li>
<li class="btnHistoria"></li>
<li class="btnLogros"></li>
<li class="btnAct"></li>
<li class="btnCon"></li>
</ul>
</div>
</nav>
<section class="main">
<section class="container">
<section class="content">
<section class="left">
</section>
</section>
<section class="sidebar">
<aside class="right">
<h2>This is a sidebar</h2>
Sign up to the newsletter!
</aside>
</section>
</section>
</section>
<footer>
</footer>
</body>
</html>кода я видел, что дело с этим вопросом все без использования фоновых изображений в качестве кнопок. Я хотел бы продолжать использовать их, если это возможно.
Я не знаю, остальную часть вашего HTML структуры так что мой лучший закрыты может попробовать 'запас: 0 авто;' в 'nav' – Franco
Он ничего не делает. Я могу опубликовать всю свою структуру. –
Просьба сделать. Поэтому я могу взглянуть на это. Вам 'css' нужны также некоторые изменения, но я могу видеть это лучше, когда вы отправляете код – Franco