centro barra navegación

Hola,

Os pido ayuda con un menú que estoy haciendo en una página web.
Se trata d una barra de navegación con seis botones. Esos botones tienen dos estados que difieren en altura y color, en nada más. Los botones se mantienen activos cuando navegas dentro de la página a la que hace referencia el botón. Y hay un margin de 8px entre cada uno de ellos, para mantenerlos separados.
Mi problema es que no soy capaz de que esta barra de navegación esté centrada. Seguro que tiene una solución rápida y fácil, pero yo no la encuentro.

El cacho de código html de la barra de botones es este

Código HTML :

<section class="nav-botom">
      <nav class="btn-bottom">
         <ul>
            <li><a href="comunicacion.html">boton1</a></li>
            <li><a class="inactive" href="medios.html">boton2</a></li>
            <li><a class="inactive" href="online.html">boton3</a></li>
            <li><a class="inactive" href="infografia.html">boton4</a></li>
            <li><a class="inactive" href="deseno.html">boton5</a></li>
            <li><a class="inactive" href="imaxe.html">boton6</a></li>
         </ul>
      </nav>
   </section>

Y este el css

Código CSS :

.btn-bottom {
   width: 100%;
   overflow: hidden;
   margin:0 auto
}
.btn-bottom ul {
   list-style: none
}
.btn-bottom li a {
   position: relative;
   color: #fff;
   float: left;
   font: normal 1.000em/1.4 "FeSanDisThin", Helvetica, sans-serif;
   padding: 10px;
   text-align: left;
   text-decoration: none;
   height: 140px;
   width: 15.5%;
   background: #014171;}
.btn-bottom li:nth-child(2) a,
.btn-bottom li:nth-child(5) a {
   margin-left: 8px; 
   margin-right: 8px
}
.btn-bottom li:nth-child(3) a {
   margin-right: 4px
}
.btn-bottom li:nth-child(4) a {
   margin-left: 4px
}
.btn-bottom li a.inactive {
   position: relative;
   height: 140px;
   top:30px;
   background: #708eb2
}
.btn-bottom li a:hover {
   background: #014171; 
   opacity: 1
}
.btn-bottom li a strong {
   font: normal 1.000em/1.4 "FeSanDisHeavy", Helvetica, sans-serif; 
   text-transform: none
}

ul con "text-align:center"
li con "display:inline-block"

centrada?... a qué?... qué elemento en específico?
Lo que puse arriba es para poner los "botones" de forma horizontal y que estén centrados todos con respecto a su contenedor. (sería directamente el ancho de la lista "ul")

Gracias por responder nasho.

No me ha servido ese código, o no lo he puesto bien

Añadí esto a

Código CSS :

.btn-bottom ul {list-style: none; margin: 0 auto; text-align: center}
.btn-bottom  li {display: inline-block;}

pero se descolocan todos los li.

yo quiero colocar esa barra horizontal en el centro respecto del body y pegado a l final del body

mmm a tu clase .btn-bottom, ponle un ancho menor a 100%

Nada, si hago eso aparecen algunos alineados horizontalmente y otros no.

OK... no había visto tu código.

Código CSS :

.btn-bottom {
   width: 100%;
   overflow: hidden;
   margin:0 auto
}
.btn-bottom ul {
   list-style: none;
    text-align: center;
    margin:0;
    padding:0;
}
.btn-bottom li{
    display:inline-block;
    width:15%;
}
.btn-bottom li a {
   position: relative;
    display:block;
   color: #fff;
   font: normal 1.000em/1.4 "FeSanDisThin", Helvetica, sans-serif;
   padding: 10px;
   text-align: left;
   text-decoration: none;
   height: 140px;
   background: #014171;
}

modifica el ancho de li a tu gusto

Perfecto nasho, muchas gracias de verdad.

Solo que ahora tengo otro problemilla. Te adjunto una foto para que veas a qué me refiero.



Uploaded with ImageShack.us

Como ves los seis botones están alineados al centro, dentro del body, que es la parte blanca y que tiene un width del 75% (para que a los lados se vean los margenes azules, que sería el html)

Al body le he aplicado los siguientes estilos

Código CSS :

body {
   width: 75%;
   color: #383838;
   background-color: #fff;
   font: normal 100%/0.4 "FeSanDisThin", Helvetica, sans-serif;
   max-width: 1260px;
   padding: 0 4.761904761904762%;
   text-rendering: optimizeLegibility; 
   -moz-border-radius-bottom-right: 20px;
   border-bottom-right-radius: 20px;
   border-bottom-left-radius: 20px;
   line-height: 1.25}

Y la botonera quedó finalmente así

Código CSS :

.nav-bottom {margin-top: 50px}
.btn-bottom {width:100%; overflow: hidden; margin:0 auto;}
.btn-bottom ul {margin: 0; padding: 0; list-style: none; text-align: center;}
.btn-bottom li {margin:0; padding: 0; display: inline-block; width:15.6666666667%; background: #014171;}
.btn-bottom li a {
   position: relative;
   display: block;
   color: #fff;
   float: left;
   text-align: left;
   text-decoration: none;
   padding:8px;
   height: 120px;
   font: normal 1.000em/1.4 "FeSanDisThin", Helvetica, sans-serif;
   background: #014171;
   }
.btn-bottom ul li:hover,.btn-bottom ul li a:hover {background: #708eb2; opacity: 1}

Tengo dos dudas, cómo podría hacer para dejar todos los elementos de la página con ese padding menos la botonera, para que ésta ocupase más ancho y llegase casi hasta el límite lateral del body. He puesto este código, pero no parece haber ningún cambio

Código CSS :

body > .nav-bottom ul {padding: 0}

Y la segunda duda que tengo es cómo conseguir que no haya ese margin-bottom en la botonera. Si te fijas , se ve una pequeña parte blanca debajo de los botones

Muchas gracias por la ayuda!!

Bueno, uno de los problemas ya está solucionado. Simplemente era eliminar el valor del line-height

dewars escribió:

Me refiero al de la linea blanca por debajo de los botones

al link (.btn-bottom li a) quítale el float, estas acomodando los li horizontalmente con inline-block, ese valor hace que los elementos se comporten como palabras, da una separación entre cada elemento (li). Si quieres modificar el ancho de ese espacio usa, (word-spacing)

al poner ( .btn-bottom ul {margin: 0; padding: 0;} ), le estas quitando los espacios que trae por default las listas, únicamente a las listas que se encuentran dentro de esa clase. Las demás listas no se ven afectadas, por lo que mantienen sus espaciados.

***Personalmente prefiero "resetear" esos espaciados desde el principio y amoldarlos a mi gusto
Al principio de mi hoja de estilos inserto esta línea:

Código CSS :

*{margin:0; padding:0;}

Muchas gracias por toda la ayuda nasho.