Foros del Web » Creando para Internet » Diseño web »

Distribuir varios botones en div

Estas en el tema de Distribuir varios botones en div en el foro de Diseño web en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/08/2013, 09:48
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Distribuir varios botones en div

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 ....
__________________
Juan David V.
Diseñador Multimedia
  #2 (permalink)  
Antiguo 27/08/2013, 10:49
Avatar de Rafael
Modegráfico
 
Fecha de Ingreso: marzo-2003
Mensajes: 9.028
Antigüedad: 21 años
Puntos: 1826
Respuesta: Distribuir varios botones en div

Cita:
Dentro del foro la solución es
¿Dentro de qué foro?

Bueno, la cosa es que pongas
Código CSS:
Ver original
  1. div.Contenedor a {
  2. text-align: center;
  3. display: inline-block;
  4. width: 10%;}

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

Ni siquiera necesitas ponerle btn a los a.
  #3 (permalink)  
Antiguo 27/08/2013, 11:34
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Distribuir varios botones en div

Cita:
Iniciado por Rafael Ver Mensaje
¿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
__________________
Juan David V.
Diseñador Multimedia
  #4 (permalink)  
Antiguo 27/08/2013, 14:24
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Distribuir varios botones en div

Podrías hacer algo así:

Código CSS:
Ver original
  1. a.btn {
  2.   width: calc(100% / 8)
  3. }

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.
  #5 (permalink)  
Antiguo 27/08/2013, 17:17
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 15 años, 2 meses
Puntos: 306
Respuesta: Distribuir varios botones en div

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
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 28/08/2013, 06:54
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 10 años, 7 meses
Puntos: 12
Respuesta: Distribuir varios botones en div

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?
  #7 (permalink)  
Antiguo 28/08/2013, 11:28
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Distribuir varios botones en div

Cita:
Iniciado por C2am Ver Mensaje
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 !!
__________________
Juan David V.
Diseñador Multimedia

Última edición por Juandavo; 28/08/2013 a las 11:42 Razón: Faltaba información
  #8 (permalink)  
Antiguo 28/08/2013, 12:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Distribuir varios botones en div

Cita:
Iniciado por pzin Ver Mensaje
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 Ver Mensaje
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á.
  #9 (permalink)  
Antiguo 28/08/2013, 12:49
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Distribuir varios botones en div

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
__________________
Juan David V.
Diseñador Multimedia
  #10 (permalink)  
Antiguo 28/08/2013, 13:09
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Distribuir varios botones en div

Código CSS:
Ver original
  1. a.btn {
  2.   display: table-cell;
  3. }
  #11 (permalink)  
Antiguo 28/08/2013, 13:54
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 10 años, 7 meses
Puntos: 12
Respuesta: Distribuir varios botones en div

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
  #12 (permalink)  
Antiguo 28/08/2013, 14:26
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Distribuir varios botones en div

Cita:
Iniciado por faillure Ver Mensaje
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
  1. <div id="botonesCategorias">
  2.   <ul>
  3.     <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
  4.     <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
  5.     <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
  6.     <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
  7.     <li><a href="" class="btn">AUDITORIO</a></li>
  8.   </ul>
  9.   <span></span>
  10. </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
  1. #botonesCategorias {
  2.   text-align: justify;
  3. }
  4.  
  5. #botonesCategorias * {
  6.   display: inline;
  7. }
  8.  
  9. #botonesCategorias span {
  10.   display: inline-block;
  11.   width: 100%;
  12.   height: 0;
  13. }

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/

Última edición por pzin; 28/08/2013 a las 14:31
  #13 (permalink)  
Antiguo 29/08/2013, 03:59
 
Fecha de Ingreso: agosto-2013
Mensajes: 46
Antigüedad: 10 años, 7 meses
Puntos: 12
Respuesta: Distribuir varios botones en div

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
  #14 (permalink)  
Antiguo 29/08/2013, 04:47
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.488
Antigüedad: 21 años, 7 meses
Puntos: 2114
Respuesta: Distribuir varios botones en div

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.
  #15 (permalink)  
Antiguo 29/08/2013, 11:17
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Distribuir varios botones en div

Cita:
Iniciado por pzin Ver Mensaje
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
  1. <div id="botonesCategorias">
  2.   <ul>
  3.     <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
  4.     <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
  5.     <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
  6.     <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
  7.     <li><a href="" class="btn">AUDITORIO</a></li>
  8.   </ul>
  9.   <span></span>
  10. </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
  1. #botonesCategorias {
  2.   text-align: justify;
  3. }
  4.  
  5. #botonesCategorias * {
  6.   display: inline;
  7. }
  8.  
  9. #botonesCategorias span {
  10.   display: inline-block;
  11.   width: 100%;
  12.   height: 0;
  13. }

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 ....
__________________
Juan David V.
Diseñador Multimedia
  #16 (permalink)  
Antiguo 02/09/2013, 08:28
Avatar de Juandavo  
Fecha de Ingreso: octubre-2011
Ubicación: Quito
Mensajes: 85
Antigüedad: 12 años, 5 meses
Puntos: 0
Respuesta: Distribuir varios botones en div

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

Código HTML:
Ver original
  1. <div id="botonesCategorias">
  2.   <ul>
  3.     <li><a href="" class="btn">SILLONES GERENCIALES</a></li>
  4.     <li><a href="" class="btn">SILLAS EJECUTIVAS</a></li>
  5.     <li><a href="" class="btn">SILLAS OPERATIVAS</a></li>
  6.     <li><a href="" class="btn">SILLAS GIRATORIAS PLÁSTICAS</a></li>
  7.     <li><a href="" class="btn">AUDITORIO</a></li>
  8.   </ul>
  9.   <span></span>
  10. </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
  1. #botonesCategorias {
  2.   text-align: justify;
  3. }
  4.  
  5. #botonesCategorias * {
  6.   display: inline;
  7. }
  8.  
  9. #botonesCategorias span {
  10.   display: inline-block;
  11.   width: 100%;
  12.   height: 0;
  13. }

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 !!!
__________________
Juan David V.
Diseñador Multimedia

Última edición por Juandavo; 02/09/2013 a las 09:09

Etiquetas: botones
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 07:36.