Foros del Web » Creando para Internet » CSS »

Menu de select con distinto ancho

Estas en el tema de Menu de select con distinto ancho en el foro de CSS en Foros del Web. Hola, tengo un select con un ancho determinado. Lo que necesito es que el menú desplegable de ese select tenga más ancho. No se si ...
  #1 (permalink)  
Antiguo 04/09/2009, 15:54
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Menu de select con distinto ancho

Hola, tengo un select con un ancho determinado. Lo que necesito es que el menú desplegable de ese select tenga más ancho. No se si me explico, sería algo así:



El menú que se desplega es más grande que el campo select donde uno hace click.
Firefox me lo genera automaticamente pero explorer no lo hace.

¿Alguien tiene idea de como se puede solucionar?

Muchas gracias!

Última edición por FantasmaFito; 05/09/2009 a las 09:23
  #2 (permalink)  
Antiguo 05/09/2009, 01:54
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Menu de select con distinto ancho

Pues yo lo que haría es simplemente ponerle el atributo style="width: 200px" al select y cambiarle el número hasta que te quede ajustado.

Pruébalo y nos cuentas .
  #3 (permalink)  
Antiguo 05/09/2009, 09:20
Avatar de FantasmaFito  
Fecha de Ingreso: junio-2007
Ubicación: Buenos Aires, Argentina
Mensajes: 118
Antigüedad: 10 años, 6 meses
Puntos: 0
Respuesta: Menu de select con distinto ancho

Claro, pero eso me cambia todo, el select y el menu. Yo quiero que el botón del select quede con un ancho fijo y el menu que sea más grande que ese ancho.
  #4 (permalink)  
Antiguo 05/09/2009, 10:53
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Menu de select con distinto ancho

Prueba lo siguiente:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" lang="es-es">
  3. <title>Kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding:0; outline: none; border: 0;}
  7. #seleccion {
  8. margin: 15px 50px;
  9. }
  10. #clientes {
  11. Font-family: verdana;
  12. font-size:1em;
  13. width: 8em;
  14. background: #FF6600;
  15. color: #ffc;
  16. }
  17. option {
  18. font-size: 1em;
  19. font-family: monospace;
  20. background: #CCCC00;
  21. color: #600;
  22. width: 15em!
  23. </head>
  24. <body>
  25. <div id="seleccion">              
  26.                   <select id="clientes" name="clientes" >
  27.                   <option selected="selected">&darr;Clientes...</option>
  28.                   <option value="">&nbsp;</option>
  29.  
  30.                   <option value='#'>&rarr; El Banco del Parque</option>
  31.                     <option value='#'>&rarr; El Parque del Banco</option>
  32.                     <option value='#'>&rarr; El Fondo de la Botella</option>
  33.                    
  34.                     <option value='#'>&rarr; La Botella del Fondo</option>
  35.                     <option value='#'>&rarr; I-tunes del Regato</option>
  36.                     <option value='#'>&rarr; Perro Flaco</option>
  37.                    
  38.                     <option value='#'>&rarr; Orejas al Viento</option>                
  39.                     <option value='#'>&rarr; Valjarinas</option>
  40.                     <option value='#'>&rarr; Los Chirrinchales</option>
  41.                    
  42.                     <option value='#'>&rarr; Barrocal Gordo</option>
  43.                     <option value='#'>&rarr; El Punt&oacute;n</option>
  44.                     <option value='#'>&rarr; La Palomba</option>
  45.                    
  46.                     <option value='#'>&rarr; La Palombina</option>                                     
  47.                     <option value='#'>&rarr; &laquo;&laquo;&laquo;&raquo;&raquo;&raquo; &larr;</option>
  48.                       </select>
  49. </div>
  50. </body>
  51. </html>
En FF 3.5 pero en ie7 corta las opciones.
No lo probé en más.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 05/09/2009, 12:18
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 5 meses
Puntos: 137
Respuesta: Menu de select con distinto ancho

mi se me ocurre usar divs y jquery... para dar el efecto de "<select>" se dice facil pero da pereza... jeje... ya que siempre te va a cortar con IE si usas select... ya que este elemento cambia segun el explorador-S/O y no es muy flexible con el CSS...
eh visto algo parecido en "megaupload.com" pero usa tablas :S mira en donde se cambia el idioma nose si te sirva chao y suerte!:..
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 21:04.