Distribuir varios botones en div

Juandavo · #1 (**permalink**) 27/08/2013, 09:48

Saludos,

Tengo un div Contenedor con:
height: auto;
width: 1160px;

Dentro de este div (Contenedor) pongo varios botones, un número no determinado ya sean 6 o 15 y lo que quiero es que se distribuyan uniformemente al ancho(width) del div Contenedor.

Dentro del foro la solución es PONER UNA CLASE A CADA BOTON CON FLOAT:LEFT Y UN MARGIN-RIGHT, Y AL ULTIMO BOTON QUITARLE EL MARGIN RIGHT.

En este caso tengo muchos botones y necesito otra solución.

Dentro del html y del div Contenedor puedo poner <center> y todos los botones se centran, pero no se distribuyen:

<div id="Contenedor">
<center>
<a href="" class="btn">BOTON1</a>
<a href="" class="btn">BOTON2</a>
<a href="" class="btn">BOTON3</a>
<a href="" class="btn">BOTON4</a>
</center>
</div>

Hay una función parecida a <center> pero que me distribuya a todos mis elementos o botones dentro del div(Contendeor) ?

Que solución me recomiendan ?

GRACIAS

OJO NO QUIERO PONER UNA CLASE A CADA BOTON ....

Rafael · #2 (**permalink**) 27/08/2013, 10:49

Cita:

Dentro del foro la solución es

¿Dentro de qué foro?

Bueno, la cosa es que pongas

Código CSS:

Ver originaldiv.Contenedor a {
text-align: center;
display: inline-block;
width: 10%;}

Ese 10% para 10 objetos, haz cuentas. 100% / la cantidad de objetos dentro.

Ni siquiera necesitas ponerle btn a los a.

Juandavo · #3 (**permalink**) 27/08/2013, 11:34

Cita:

Iniciado por Rafael

¿Dentro de qué foro?

Dentro de este mismo foro la solución plantean poner una clase a los objetos

Rafael, no me distribuye los objetos o botones, por ejemplo si tengo 6 botones quiero que se distribuya el espacio horizontalmente al ancho del Contenedor (1160px) ..

CSS:

Código:

#botonesCategorias{
	height: auto;
	width: 1160px;
	padding-top: 5px;
	padding-bottom: 5px;
}

HTML:

Código:

<div id="botonesCategorias"> 
    <a href="" class="btn">SILLONES GERENCIALES</a>
    <a href="" class="btn">SILLAS EJECUTIVAS</a>
    <a href="" class="btn">SILLAS OPERATIVAS</a>
    <a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a>
    <a href="" class="btn">SILLAS DE VISITA</a>
    <a href="" class="btn">SILLAS MADERA</a>
    <a href="" class="btn">TANDEM DE ESPERA</a>
    <a href="" class="btn">SOFÁ ESPERA</a> 
    <a href="" class="btn">AUDITORIO</a>
    </div>

("botonesCategorias") sería el contenedor
(class="btn") solo pongo un texto y la clase está definida para que se haga un botón

pzin · #4 (**permalink**) 27/08/2013, 14:24

Podrías hacer algo así:

Código CSS:

Ver originala.btn {
  width: calc(100% / 8)
}

La otra sería usar display: table/table-cell, aunque si sabes los elementos que hay con especificar los anchos tendría que ser suficiente.

C2am · #5 (**permalink**) 27/08/2013, 17:17

Aquí tienes posibles soluciones:
http://ksesocss.blogspot.com/2012/05...6-maneras.html
Busca la parte de Doble centrado múltiples elementos en tamaños desconocidos o ventanas dinámicas
O aquí el jsfiddle de kseso

Saludos

faillure · #6 (**permalink**) 28/08/2013, 06:54

Cita:

Dentro de este div (Contenedor) pongo varios botones, un número no determinado ya sean 6 o 15 y lo que quiero es que se distribuyan uniformemente al ancho(width) del div Contenedor.

negritas mías.
distribuir (supongo que uniforme, porque si no no necesitaría la consulta) no es centrar.

C2am mejor que esa demo, y de la misma pagina, [URL="http://ksesocss.blogspot.com/2013/06/text-align-justify-y-rwd.html"]esta otra[/URL]

cumple los dos requisitos, siempre que se asegure que el numero maximo de los botones no supere la anchura del div contenendor

¿por que me salen asi lo enlaces?

Juandavo · #7 (**permalink**) 28/08/2013, 11:28

Cita:

Iniciado por C2am

Aquí tienes posibles soluciones:
http://ksesocss.blogspot.com/2012/05...6-maneras.html
Busca la parte de Doble centrado múltiples elementos en tamaños desconocidos o ventanas dinámicas
O aquí el jsfiddle de kseso

Saludos

De lo que entiendo en la parte de "Doble centrado múltiples elementos en tamaños desconocidos o ventanas dinámicas" les centra a los botones pero no los distribuye o no se ven distribuídos en todo el largo de un div (padre o contenedor) o al menos no muestran un div (Contenedor)...

Aún no consigo que se DISTRIBUYAN a lo largo del div(contenedor) que es este:

CSS:

Código:

#botonesCategorias{
	height: auto;
	width: 1160px;
	padding-top: 5px;
	padding-bottom: 5px;
}

HTML:

Código:

<div id="botonesCategorias"> 
    <a href="" class="btn">SILLONES GERENCIALES</a>
    <a href="" class="btn">SILLAS EJECUTIVAS</a>
    <a href="" class="btn">SILLAS OPERATIVAS</a>
    <a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a>
    <a href="" class="btn">SILLAS DE VISITA</a>
    <a href="" class="btn">SILLAS MADERA</a>
    <a href="" class="btn">TANDEM DE ESPERA</a>
    <a href="" class="btn">SOFÁ ESPERA</a> 
    <a href="" class="btn">AUDITORIO</a>
    </div>

No consigo que, si tengo 3 o 5 o 9 botones o los que sea se distribuyan en todo el largo (width: 1160px) AYUDA !!

pzin · #8 (**permalink**) 28/08/2013, 12:26

Cita:

Iniciado por pzin

La otra sería usar display: table/table-cell, aunque si sabes los elementos que hay con especificar los anchos tendría que ser suficiente.

Cita:

Iniciado por Juandavo

No consigo que, si tengo 3 o 5 o 9 botones o los que sea se distribuyan en todo el largo (width: 1160px) AYUDA !!

Imita el comportamiento de celdas como te dije y ya está.

Juandavo · #9 (**permalink**) 28/08/2013, 12:49

La verdad no es que tenga muchisimos conocimientos de HTML Y CSS y no se a que te refieres con :

Cita:

La otra sería usar display: table/table-cell, aunque si sabes los elementos que hay con especificar los anchos tendría que ser suficiente.

Cita:

Imita el comportamiento de celdas como te dije y ya está.

No se en donde poner el código que me das para ver si me funciona .... Sorry, espero tu ayuda .... GRACIAS

pzin · #10 (**permalink**) 28/08/2013, 13:09

Código CSS:

Ver originala.btn {
  display: table-cell;
}

faillure · #11 (**permalink**) 28/08/2013, 13:54

Cuesta leer.
Como no me salen los enlaces ¿? de color... otra ves en negritas para que resalte
http://ksesocss.blogspot.com/2013/06/text-align-justify-y-rwd.html

Pzin:
table-cell no distribuye
Tendria que conocer antes el nº para dar anchuras

pzin · #12 (**permalink**) 28/08/2013, 14:26

Cita:

Iniciado por faillure

Cuesta leer.
Pzin:
table-cell no distribuye
Tendria que conocer antes el nº para dar anchuras

No sé porqué pensaba que si.

Otra solución es cambiar un poco la estructura, de paso hacerla algo más semántica:

Código HTML:

Ver original<div id="botonesCategorias">
  <ul>
    <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
    <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
    <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
    <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
    <li><a href="" class="btn">AUDITORIO</a></li>
  </ul>
  <span></span>
</div>

Y luego convertir todo a elementos en linea, justificarlos y luego meter una trampa para estirar la justificación.

Código CSS:

Ver original#botonesCategorias {
  text-align: justify;
}
 
#botonesCategorias * {
  display: inline;
}
 
#botonesCategorias span {
  display: inline-block;
  width: 100%;
  height: 0;
}

Por cierto faillure, lo de los enlaces es así porque necesitas tener 30 mensajes y 30 días de registro para que se queden como enlaces. Más info por aquí: http://www.forosdelweb.com/f74/polit...el-web-101485/

faillure · #13 (**permalink**) 29/08/2013, 03:59

Pzin:
yo lo de la semantica no termino de comprenderlo del todo
si pudieras explicarme por que es mas semantico meter un elemento mas en el html (el span) para hacer lo mismo que hacen en el ejemplo que puse (usan un seudo-element) me ayudarias

pzin · #14 (**permalink**) 29/08/2013, 04:47

No miré el enlace que pusiste. Lo de más semántico era en relación al código original, por la lista más que nada, no en relación al enlace.

Aunque si lo piensas, vete a saber si hay algún interés en esos menesteres.

Juandavo · #15 (**permalink**) 29/08/2013, 11:17

Cita:

Iniciado por pzin

No sé porqué pensaba que si.

Otra solución es cambiar un poco la estructura, de paso hacerla algo más semántica:

Código HTML:

Ver original<div id="botonesCategorias">
  <ul>
    <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
    <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
    <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
    <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
    <li><a href="" class="btn">AUDITORIO</a></li>
  </ul>
  <span></span>
</div>

Y luego convertir todo a elementos en linea, justificarlos y luego meter una trampa para estirar la justificación.

Código CSS:

Ver original#botonesCategorias {
  text-align: justify;
}
 
#botonesCategorias * {
  display: inline;
}
 
#botonesCategorias span {
  display: inline-block;
  width: 100%;
  height: 0;
}

Por cierto faillure, lo de los enlaces es así porque necesitas tener 30 mensajes y 30 días de registro para que se queden como enlaces. Más info por aquí: http://www.forosdelweb.com/f74/polit...el-web-101485/

Ya lo pruebo y les aviso si da resultados y logro DISTRIBUIR LOS BOTONES.... esperemos ....

Juandavo · #16 (**permalink**) 02/09/2013, 08:28

Otra solución es cambiar un poco la estructura, de paso hacerla algo más semántica:

Código HTML:

Ver original<div id="botonesCategorias">
  <ul>
    <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
    <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
    <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
    <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
    <li><a href="" class="btn">AUDITORIO</a></li>
  </ul>
  <span></span>
</div>

Y luego convertir todo a elementos en linea, justificarlos y luego meter una trampa para estirar la justificación.

Código CSS:

Ver original#botonesCategorias {
  text-align: justify;
}
 
#botonesCategorias * {
  display: inline;
}
 
#botonesCategorias span {
  display: inline-block;
  width: 100%;
  height: 0;
}

La verdad si me ha funcionado cambiando la semántica, ahora el único problema es que en nombre del botón Ejem(Línea Bar) también el nombre se amplia mucho es decir me queda algo asi:

(LÍNEA------------BAR)---------------------(APOYABRAZOS)----------------------- (PORTA----------TECLADOS-----------Y------------CPU)

Las líneas son referencia del espacio que se genera ....
Como se darán cuenta las palabras del botón también se hacen muchos espacios ... como controlo eso ???

GRACIAS !!!