Midori_hige Midori_hige - 1 month ago 8
CSS Question

How to center a NAV bar with background images?

I have a navigation bar with buttons as background-images that change when I hover the mouse over. However, I can't seem to center the buttons alright.

HTML:

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


CSS

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
}
}


Codes I've seen that deal with this matter are all without the use of background images as buttons. I would like to keep using them, if possible.

Answer

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;
  background-size: cover;
  background-position: center;
}
.btnInicio {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnInicio:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnHistoria {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnHistoria:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnLogros {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnLogros:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnAct {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnAct:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
.btnCon {
  background-image: url("http://www.aspca.org/sites/default/files/cat-care_cat-nutrition-tips_overweight_body4_left.jpg");
  background-repeat: no-repeat;
  float: left;
  height: 56px;
  width: 138px;
}
.btnCon:hover {
  background-image: url("https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg");
}
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>

I have added background-size: cover; and background-position: center; to nav li in your css (and also put some cats to show real images).

Btw, your layout is pretty messed up on mobile size.

And I would create a generic .button or .nav-button class to add those background properties instead of adding them nav li. And you can then move those repeated styles (float, width, height) to this new class as well.

Comments