Foros del Web » Creando para Internet » CSS »

botones redondeados ancho variable

Estas en el tema de botones redondeados ancho variable en el foro de CSS en Foros del Web. Hola estoy haciendo botones redondeados para cualquier tamaño. A continuación el código que estoy utilizando. CSS: @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código CSS: Ver original body {   ...
  #1 (permalink)  
Antiguo 14/01/2010, 13:28
 
Fecha de Ingreso: mayo-2008
Mensajes: 10
Antigüedad: 9 años, 7 meses
Puntos: 0
botones redondeados ancho variable

Hola estoy haciendo botones redondeados para cualquier tamaño. A continuación el código que estoy utilizando.

CSS:
Código CSS:
Ver original
  1. body { 
  2.     background-color: #3F3F3F;
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. form label {   
  7.     color: #808080;
  8.     font-size: 12px;   
  9. }
  10. .fondo {   
  11.     background-image: url(boton_fondo.gif);
  12.     background-repeat: repeat-x;               
  13. }
  14. input {
  15.     font-family: "Trebuchet MS", "Times New Roman", sans-serif;
  16.     font-size: 10px;   
  17.     background-color: transparent;
  18.     border: none;  
  19.     vertical-align: top;
  20. }
  21. .boton {
  22.     color: #C1C1C1;
  23.     vertical-align: middle;
  24. }
  25. .fondo img {       
  26.     vertical-align: top;   
  27. }

HTML:
Código HTML:
<span class="fondo">
              <img src="boton_izq.gif" width="10" height="25"/>
              <input type="submit" class="boton" name="Submit" value="Aceptar" id="aceptar_btn"/>
              <img src="boton_der.gif" width="10" height="25"/>
</span> 
[URL="http://ehrpav.260mb.com/btn_test/index.html"]http://ehrpav.260mb.com/btn_test/index.html[/URL]

El problema es que la imagen de fondo del span solo se ve correctamente en IE6. He probado manejarlo como un elemento de bloque como sigue:

Código CSS:
Ver original
  1. .fondo {   
  2.     background-image: url(boton_fondo.gif);
  3.     background-repeat: repeat-x;
  4.     display: block;
  5.     width: auto;
  6.     float: left;               
  7. }

Pero entonces no puedo centrar los elementos.
Si pudiera ser inline sería más cómodo para posicionar los elementos.

[URL="http://ehrpav.260mb.com/btn_test/index1.html"]http://ehrpav.260mb.com/btn_test/index1.html[/URL]

Helppppp.
Gracias de antemano.
salu2.
  #2 (permalink)  
Antiguo 16/01/2010, 06:46
 
Fecha de Ingreso: agosto-2008
Mensajes: 382
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: botones redondeados ancho variable

yo te recomiendo hacer 3 divs. el de la izquierda con una imagen del borde redondeado, el del medio que es el que se podra hacer todo lo ancho que quieras, y el de la derecha que llevara la otra imagen con el borde redondeado. saludos
__________________
la experiencia es la mejor de las escuelas, pero la obtienes cuando ya no la necesitas.

Yo soy aquel que mucho hace trabajar a la gente del foro, pero siempre gratifico con un karma

Etiquetas: ancho, botones, redondeados, variables
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 22:30.