Foros del Web » Creando para Internet » CSS »

Quitar espacios entre elemento <button>?

Estas en el tema de Quitar espacios entre elemento <button>? en el foro de CSS en Foros del Web. Hola Tengo 3 botones generados con <button> y no puedo quitar el espacios que se ve entre ellos (deberían estar juntos sin espacios): Se ve ...
  #1 (permalink)  
Antiguo 30/06/2009, 04:09
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Quitar espacios entre elemento <button>?

Hola
Tengo 3 botones generados con <button> y no puedo quitar el espacios que se ve entre ellos (deberían estar juntos sin espacios):
Se ve así:


Este es el código:
Código HTML:
<html>
<head>
<style>
button {
background:transparent;
border:0px;
padding:0px;
margin:0px;
}
img{
border:0px;
padding:0px;
margin:0px;
}
</style>
</head>
<body>
<button class="prev"><img src="bt-semana-anterior.png" alt="image"  /></button>
<button class="today"><img src="bt-semana-actual.png" alt="image"  /></button>
<button class="next"><img src="bt-semana-siguiente.png" alt="image" /></button>
</body>
</html> 
Le he puesto margin, padding, border con valor 0. Pero no funciona.
Que me está faltando?
Gracias
  #2 (permalink)  
Antiguo 30/06/2009, 08:20
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Quitar espacios entre elemento <button>?

Añadiendo unos márgenes negativos corregirás la separación de "button"
Código css:
Ver original
  1. .prev {margin-right:-5px;}
  2. .today {margin: 0 -5px;}
  3. .next {margin-left: -5px;}
ajusta los valores para que sean exactos.

Sin entrar en el error que es colocar de esa forma el elemento "button".
Cita:
document type does not allow element "button" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag
Cita:
<button class="prev"><img src="izq.jpg" alt="image" /></button>
The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element.
Si no fuese realmente un botón y sí un menú, sería mejor que hicieses eso con una lista

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 30/06/2009 a las 08:26
  #3 (permalink)  
Antiguo 30/06/2009, 08:24
Avatar de moNTeZIon  
Fecha de Ingreso: enero-2005
Ubicación: Lliçà de Munt - BCN
Mensajes: 1.625
Antigüedad: 12 años, 11 meses
Puntos: 9
Respuesta: Quitar espacios entre elemento <button>?

Qué tal chefnelone.
La verdad es que he notado lo siguiente, no sé si te servirá de ayuda, puesto que desconozco por qué usas esa etiqueta llamada "button".
Si sustituyes los controles "button" por controles "span", modificando también la etiqueta de cierre, claro, consigues reducir ese espacio, que no sé por qué motivo, te lo pone al usar las etiquetas button.
Con este cambio, se reduce el espacio de separación, aunque no del todo, puesto que te falta ponerlo todo en la misma línea. Te en cuenta que el escribir el control en la siguiente línea, te está poniendo un espacio en blanco. Si lo pones todo junto, problema resuelto.
Código:
<span class="prev"><img src="bt-semana-anterior.png" alt="image" /></span><span class="today"><img src="bt-semana-actual.png" alt="image" /></span><span class="next"><img src="bt-semana-siguiente.png" alt="image"/></span>
Espero haberte ayudado, algo..
Saludos.
__________________
..:: moNTeZIon ::..
  #4 (permalink)  
Antiguo 30/06/2009, 08:56
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Quitar espacios entre elemento <button>?

Gracias por las ideas

Cita:
Iniciado por kseso? Ver Mensaje
Si no fuese realmente un botón y sí un menú, sería mejor que hicieses eso con una lista
No suelo usar <button>, pero es código generado por javascript y cuando lo cambio por <ul> el script deja de funcionar.

Buena idea la del margen negativo.
  #5 (permalink)  
Antiguo 30/06/2009, 09:07
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Quitar espacios entre elemento <button>?

Cita:
Iniciado por chefnelone Ver Mensaje
Gracias por las ideas

No suelo usar <button>, pero es código generado por javascript y cuando lo cambio por <ul> el script deja de funcionar.

Buena idea la del margen negativo.
Nah, no se merecen.

Sobre el script, ya puestos, ahí al lado están los "chicos de los js en su cueva" . Quizás te convenga investigar y cambiarlo.

Suerte.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 30/06/2009, 09:18
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Quitar espacios entre elemento <button>?

Cita:
Iniciado por kseso? Ver Mensaje
Añadiendo unos márgenes negativos corregirás la separación de "button"
Código css:
Ver original
  1. .prev {margin-right:-5px;}
  2. .today {margin: 0 -5px;}
  3. .next {margin-left: -5px;}
No funciona en IE, me había olvidado de chekearlo.
existe algun truco para IE ?
  #7 (permalink)  
Antiguo 30/06/2009, 09:32
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Quitar espacios entre elemento <button>?

p****** ie
dale a button {position: absolute;}
y a cada una de las clases
Cita:
.prev {left:0;}
.today {left:150px;}
.next {left:300px;}
Los valores de px dependerán del tamaño de cada imagen.

Esto lo puedes hacer en un comentario condicional para que los navegadores sigan con las anteriores.

Pero sopesa la sugerencia de modificar el js.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #8 (permalink)  
Antiguo 06/07/2009, 01:51
 
Fecha de Ingreso: julio-2009
Ubicación: La Plata
Mensajes: 233
Antigüedad: 8 años, 5 meses
Puntos: 8
Respuesta: Quitar espacios entre elemento <button>?

Fijate usando en la hoja en cascada:

Código:
.prev{float:left}
.today{float:left}
.next{float:left} 
Amì el tema de float: me causò muchos dolores de cabeza,fijate sino float:right; el ùnico problema es que seguramente te va a quedar a la izquierda o a la derecha de la pàgina.
  #9 (permalink)  
Antiguo 06/07/2009, 03:30
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Quitar espacios entre elemento <button>?

pon tu javascript y le torcemos la mano hasta que en lugar de decir <button></button> diga <span></span> o lo que quieras que diga.
__________________
twitter: @imbuzu
  #10 (permalink)  
Antiguo 06/07/2009, 10:08
 
Fecha de Ingreso: diciembre-2005
Ubicación: Barcelona
Mensajes: 1.428
Antigüedad: 12 años
Puntos: 15
Respuesta: Quitar espacios entre elemento <button>?

habia olvidado este tema.
El unico que me da problemas es IE6, y así se quedara (el problema no es grave) por el momento
gracias por las ideas.
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 13:34.