[SOLUCIONADO] divs autoadaptables ?

[ignacio85r]

buenas gente, estoy complicado con unos divs, que a su vez son enlaces, pero no logro que me queden ocupando el ancho total del contenedor que los contiene. tengo echo algo como esto

Código HTML:

 <nav class="menu">
                        <div><a href="">Links</a><div>
                        <div><a href="">links</a><div>
                        <div><a href="">links</a><div>
                        <div><a href="">links</a><div>
                </nav> 

el css es el siguiente::

Código:

.menu a { 
    background-color: #006699;
    display:inline;
    float: left; height:80px;
    list-style-type: none;
    margin:0px auto; 
    padding: 80px 100px;
    }

.menu a:hover{
    background-color: #0099ff;
    -moz-box-shadow: 5px 4px 8px #000000;
    -webkit-box-shadow: 5px 4px 8px #000000;
    box-shadow: 5px 4px 8px #000000;
    }

alguien me puede orientar un poco para lograr lo que necesito???


muchas gracias!!! saludos!!!!

[pzin]

Bueno, lo primero sería cambiar la estructura HTML, no porque no se pueda hacer sin cambiarla, sino porque enlaces agrupados deberían de ponerse en una lista desordenada con ul.

Código HTML:

<nav>
  <ul>
    <li><a href="#">enlace</a></li>
    <li><a href="#">enlace</a></li>
    <li><a href="#">enlace</a></li>
    <li><a href="#">enlace</a></li>
    <li><a href="#">enlace</a></li>
  </ul>
</nav>
 

Después respecto al CSS, tienes que poner una estructura como si esos elementos fueran tablas con display: table/table-row/table-cell. Y para que cada elemento de la lista tenga el mismo ancho, tienes que fijar la estructura de la tabla con table-layout.

Código CSS:

nav {
  display: table;
  width: 100%;
  table-layout: fixed;
}
nav ul {
  display: table-row;
}
nav li {
  display: table-cell;
  text-align: center;
}
 

Si adicionalmente quieres que los enlaces siempre ocupen todo el ancho dentro del elemento de la lista, entonces elimina el centrado de texto anterior quitando text-align (más que nada porque no hace falta) y creas otra regla para los enlaces para que se visualicen como elementos de bloque:

Código CSS:

nav li a {
  display: block;
}
 

[ignacio85r]

ante nada muchas gracias por tu ayuda pzin pero creo me parece que no fui claro o me explique mal... lo que quiero lograr es que entre las 4 secciones li se ocupe el total del ancho de la pagina. como la imagen en la seccion [IMG] Uploaded with ImageShack.us[/IMG] como esta en la imagen en la parte donde dice "contacto" y estan las distintas figuras a los costados. eso seria el menu completo.


--------------------------------------------------------edito---------------------------------------------------------

creo que lo resolvi. y me explique bien anteriormente. lo que hice fue lo siguiente: segui la instruccion de pzin y luego para darte el tamaño grande que encesitaba añadi lo siguiente al codigo css (cualquier cosa corrijanme si algo esta mal)::.

Código:

nav{
    display: table;
    width:100%;
    table-layout: fixed;
}

nav ul {
    display: table-row;
}

nav li { 
    background-color: #006699;
    display:table-cell;

}

nav li a {
    display: block;
    padding: 80px 50%;  /*para hacer que se ocupe el total del ancho del nav*/
    text-decoration: none;
}

nav li a:hover{
    background: #0099ff;
    display: block;
    text-decoration: none;
}

[pzin]

Iniciado por ignacio85r

creo que lo resolvi. y me explique bien anteriormente.

Si, te explicaste bien, yo me explique bien, luego entendiste algo mal supongo.

Ese padding que pusiste no hace que ocupe el ancho total de nada. Supongo que te refieres a alguna otra cosa.

[ignacio85r]

es que si quito ese padding me sucede que se achica el contenedor quedando del tamaño del texto y me queda muy pequeño el menu

[ignacio85r]

entonces.. como puedo logralo????

[alzacon]

Haces lo más complicado para rellenar el espacio, con lo facil que puede ser usar porcentajes en el ancho.

Para la respuesta de pzin lo solucionas sin padding añadiendo:

Código CSS:

nav a {/* ó con "nav li a" */
  width:100%;
}
 

o para el hml de pzin, pero con un enlace menos, corrigiendo tu css original

Código CSS:

nav ul{
  list-style-type: none;
}
nav a { 
  background-color: #006699;
  float: left;
  height:80px;
  width: 25%;/*para 4 enlaces: 100/4*/
  /*margin:0px auto;/*no sirver para texto*/
  text-align: center;
}
nav a:hover{
  background-color: #0099ff;
  -moz-box-shadow: 5px 4px 8px #000000;
  -webkit-box-shadow: 5px 4px 8px #000000;
  box-shadow: 5px 4px 8px #000000;
}
 

[pzin]

Copiando el mismo código que puse arriba:

[ignacio85r]

ahroa si... tenia yo un error en el codigo que interferia el codigo de pzin, ahi salio.
gracias a todos! :)

[alzacon]

Pues debe ser que reproduje el error, ya me estrañaba que no funcionase.