Foros del Web » Creando para Internet » CSS »

Lograr que la anchura de mi ul se adapte al texto

Estas en el tema de Lograr que la anchura de mi ul se adapte al texto en el foro de CSS en Foros del Web. Hola, tengo una ul dentro de otra ul en mi página. La ul secundaria necesito que adapte su anchura a la anchura del a tag ...
  #1 (permalink)  
Antiguo 11/05/2011, 17:19
 
Fecha de Ingreso: mayo-2011
Mensajes: 72
Antigüedad: 6 años, 7 meses
Puntos: 1
Lograr que la anchura de mi ul se adapte al texto

Hola, tengo una ul dentro de otra ul en mi página.

La ul secundaria necesito que adapte su anchura a la anchura del a tag con más carácteres, para que me queden todos los caracteres de los li en la misma línea.

¿Cómo puedo hacerlo?
  #2 (permalink)  
Antiguo 11/05/2011, 18:14
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 6 años, 7 meses
Puntos: 236
Respuesta: Lograr que la anchura de mi ul se adapte al texto

Hola!,

Siempre es necesario el código fuente para saber que es exactamente lo que quieres.
Necesito el código fuente y una mejor explicación.

Saludos!
  #3 (permalink)  
Antiguo 11/05/2011, 22:18
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Lograr que la anchura de mi ul se adapte al texto

float left or right según aplique a tu caso... y como ya dijeron sin código no hay forma de decirte o aconsejarte algo mas
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #4 (permalink)  
Antiguo 12/05/2011, 01:26
 
Fecha de Ingreso: mayo-2011
Mensajes: 72
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Lograr que la anchura de mi ul se adapte al texto

Os adjunto el código html y el css.

La ul principal de mi código se llama navigationmenu, la ul que me da problemas es la contenida desntro de navigationmenu, porque cuando se despliegan los li lo hacen en forma de columna como yo quiero, pero alguno li cuyo tag a tiene demasiados caracteres digamos se muestran en dos líneas de la columna y yo quiero que aparezcan en una sola línea

Código PHP:
<ul id="navigationmenu">
          <
li><a href="#">Seguros de Coche</a>
                  <
ul>
                    <
li><a href="#">Póliza Básica</a></li>
                    <
li><a href="#">Póliza 7</a></li>
                    <
li><a href="#">Nueva Póliza 10</a></li>
                    <
li><a href="#">Póliza Líder</a></li>
                    <
li><a href="#">Póliza Todo Riesgo 100</a></li>
                </
ul><!--end Seguros de Coche list--->
      </
li><!--end Seguros de Coche-->
      
      
       <
li><a href="#">Seguros de Moto</a>
               <
ul>
                <
li><a href="#">Moto Básica</a></li>
                <
li><a href="#">Moto Diez</a></li>
                <
li><a href="#">Moto Líder</a></li>
            </
ul><!--end Seguros de Moto ul-->
       </
li>
                 
               
               
          <
li><a href="#">Seguros Generales</a>
                  <
ul>
                    <
li><a href="#">Hogar Básico</a></li>
                    <
li><a href="#">Hogar Familiar</a></li>
                    <
li><a href="#">Hogar Total</a></li>
                    <
li><a href="#">Hogar Platino</a></li>
                    <
li><a href="#">Seguro de Comercios</a></li>
                    <
li><a href="#">Seguro de Decesos</a></li>
                    <
li><a href="#">Seguro de Viajes</a></li>
                    <
li><a href="#">Responsabilidad Civil</a></li>
                    <
li><a href="#">Seguro de Comunidades</a></li>
                    <
li><a href="#">Seguro de Accidentes Personales</a></li>
                </
ul><!--end ul seguros generales-->
           </
li><!--end Seguros Generales li-->  
           
              
             <
li><a href="#">Seguros de Salud</a>
                  <
ul>
                    <
li><a href="#">Reembolso de Gastos</a></li>
                    <
li><a href="#">Asistencia Sanitaria</a></li>
                    <
li><a href="#">Seguros Indemnización por Baja</a></li>
                    <
li><a href="#">Salud Dental</a></li>
                </
ul><!--end ul Seguros de Salud-->    
          </
li><!--end li Seguros de Salud-->
          
          
             <
li>Seguros de Vida
                  
<ul>
                     <
li><a href="#">Planes de Pensiones</a></li>
                     <
li><a href="#">Seguro de Vida</a></li>
                     <
li><a href="#">Fondos de Inversión</a></li>
                     <
li><a href="#">PIAS</a></li>
                </
ul><!--end Seguros de Vida ul-->
          </
li><!--end Seguros de Vida li-->
             
          
          <
li>Productos Bancarios
              
<ul>
                <
li><a href="#">Hipotecas</a></li>
                <
li><a href="#">Consumo</a></li>
                <
li><a href="#">Cuenta Corriente</a></li>
                <
li><a href="#">Depósitos</a></li>
                <
li><a href="#">Líneas ICO</a></li>
            </
ul><!--end Productos Bancarios ul-->    
          </
li><!--end Productos Bancario li-->
    </
ul><!--navigationmenu end--> 
Y el css:

Código PHP:
#navigationmenu{
    
margin:0px;
    
padding:0px;
    
height:30px;
    
background-color:#3F0;
    
border-bottom:#999 solid;
    
display:block;
}

#navigationmenu a{
    
text-decoration:none;
    
color:#000;
    
text-align:center;
}



#navigationmenu li{
    
position:relative;
    
height:inherit;
    
float:left;
    list-
style:none;
    
margin:0px;
    
padding:0px;
    
display:block;
    
width:150px;
    
text-align:center;
}

#navigationmenu li:hover{
    
background-color:#999;
}




#navigationmenu ul li a{
    
text-align:left;
    
height:30px
    
width:150px;
    
display:block;
    
color:#000;
}




#navigationmenu ul{
    
position:absolute;
    
visibility:hidden;
    
top:30px;
 }
 

 
 
#navigationmenu li:hover ul{
    
visibility:visible;
    
background-color:#999;

  #5 (permalink)  
Antiguo 12/05/2011, 19:12
(Desactivado)
 
Fecha de Ingreso: abril-2011
Mensajes: 153
Antigüedad: 6 años, 7 meses
Puntos: 236
Respuesta: Lograr que la anchura de mi ul se adapte al texto

Hola!,
Agrega ésto al css:

Código CSS:
Ver original
  1. #navigationmenu ul li, #navigationmenu ul li a{
  2.    width:210px;
  3. }

Con eso ya se mostrará completo el texto.

Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.

Saludos!.

Atención: si quieres que siga tu mensaje, agradéce mis mensajes (karma), ya que así puedo ver rápidamente si ya respondíste mi mensaje.
  #6 (permalink)  
Antiguo 12/05/2011, 19:29
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.826
Antigüedad: 9 años, 9 meses
Puntos: 953
Respuesta: Lograr que la anchura de mi ul se adapte al texto

para que se mantenga en una sola linea procura evitar darle un ancho fijo a la lista, de igual forma puedes aplicar un white-space:nowrap; para los li con lo que los forzaras a que no se produzcan saltos de linea
Código CSS:
Ver original
  1. #navigationmenu li{white-space:nowrap;}

Cita:
Iniciado por angelfcm Ver Mensaje
Hola!,
Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.

Saludos!.

Atención: si quieres que siga tu mensaje, agradéce mis mensajes (karma), ya que así puedo ver rápidamente si ya respondíste mi mensaje.
compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace para funcionar lo único con lo que me lo puedo explicar es que usted esta creando sus sitios sin validar omitiendo el doctype por lo que los navegadores trabajan en modo quirks por lo que no interpretan adecuadamente el código.

Nota: si su comentario se refiere a que el menú no funcionara en IE6 debería empezar a olvidarse de el ya esta en el olvido, si pretende dar soporte a este navegador puede visitar este link con ejemplos de como hacerlo -> clic aquí

Nota2: compañeros por favor absténganse de pedir karma a cambio de su ayuda, si su respuesta es grata y/o de ayuda para los usuarios estos darán karma sin que sea solicitado.
Siempre que un usuario responde al tema usted recibe un mensaje en su correo electrónico así que no necesita el karma para darse cuenta.
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Última edición por ArturoGallegos; 12/05/2011 a las 19:37
  #7 (permalink)  
Antiguo 13/05/2011, 09:59
 
Fecha de Ingreso: mayo-2011
Mensajes: 72
Antigüedad: 6 años, 7 meses
Puntos: 1
Respuesta: Lograr que la anchura de mi ul se adapte al texto

Cita:
Iniciado por Ag666 Ver Mensaje
para que se mantenga en una sola linea procura evitar darle un ancho fijo a la lista, de igual forma puedes aplicar un white-space:nowrap; para los li con lo que los forzaras a que no se produzcan saltos de linea
Código CSS:
Ver original
  1. #navigationmenu li{white-space:nowrap;}



compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace para funcionar lo único con lo que me lo puedo explicar es que usted esta creando sus sitios sin validar omitiendo el doctype por lo que los navegadores trabajan en modo quirks por lo que no interpretan adecuadamente el código.

Nota: si su comentario se refiere a que el menú no funcionara en IE6 debería empezar a olvidarse de el ya esta en el olvido, si pretende dar soporte a este navegador puede visitar este link con ejemplos de como hacerlo[URL="http://www.araudi.net/ejemplos/menus_desplegables_CSS.html"] -> clic aquí[/URL]

Nota2: compañeros por favor absténganse de pedir karma a cambio de su ayuda, si su respuesta es grata y/o de ayuda para los usuarios estos darán karma sin que sea solicitado.
Siempre que un usuario responde al tema usted recibe un mensaje en su correo electrónico así que no necesita el karma para darse cuenta.
He probado poniendo white-space:nowrap; pero el resultado es que todos los li aparecen en una linea y lo que yo busco es que cada li esté en una línea pero evitando que aquellos li que tienen muchos caracteres aparezcan presentados en dos lineas.

Al final lo solucioné con esto:

#navigationmenu li li{
white-space:nowrap;
}

ahora se presentan en una línea sin problema, pero el problema que tengo es que el fondo de los li de la segunda ul no adapta su anchura a la del texto del li como se puede ver en la imagen que adjunto

Última edición por Jor1980; 13/05/2011 a las 12:08
  #8 (permalink)  
Antiguo 15/05/2011, 03:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Lograr que la anchura de mi ul se adapte al texto

Hola:

Cita:
Iniciado por angelfcm Ver Mensaje
Una cosa, en IE el hover sólo funcióna con <a>, por lo que tu menu no se mostrará completo en IE.
Cita:
Iniciado por Ag666 Ver Mensaje
compañero @angelfcm no puede estar usted mas equivocado el efecto hover no requiere que sea un enlace
Vamos a puntualizar un poco, las dos respuestas son a la vez ciertas y falsas. Para que las pseudoclases funcionen en IE6 deben ser enlaces, en los navegadores posteriores esta condición no es necesaria.

Con lo cual la afirmación de angelfcm sería totalmente cierta si hubiera especificado que el IE al que se refiere fuera la versión 6. Con lo cual la afirmación de Ag666 sería también cierta en el resto de las versiones de IE.

Saludos.


Etiquetas: Ninguno
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:16.