Foros del Web » Creando para Internet » CSS »

Overflow hidden en UL

Estas en el tema de Overflow hidden en UL en el foro de CSS en Foros del Web. Estoy teniendo problemas con la propiedad overflow, tengo un listado al cual le di un ancho especifico y un alto especifico para las li , ...
  #1 (permalink)  
Antiguo 13/03/2011, 13:58
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Overflow hidden en UL

Estoy teniendo problemas con la propiedad overflow, tengo un listado al cual le di un ancho especifico y un alto especifico para las li , ademas del ancho y del alto tengo definido list-style con una imagen que reemplaza los tipicos puntos de los ul, y la propiedad overflow hidden para que si algun li es mayor al ancho definido no se muestre. Pero el overflow a su vez me borra las imagenes de las li que yo defini. Alguien sabe como solucionar esto?
  #2 (permalink)  
Antiguo 13/03/2011, 18:28
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

pasa el html que veamos como está montado, de lo contrario difícilmente lo adivinaremos ;)
  #3 (permalink)  
Antiguo 13/03/2011, 19:01
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

http://powerpoints.admaz.com.ar/

Esa es la web.
  #4 (permalink)  
Antiguo 13/03/2011, 19:49
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

no podrias poner el trocito de la lista y el css que le haga referencia para trabajar mas comodamente con el?
  #5 (permalink)  
Antiguo 13/03/2011, 19:53
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

Código HTML:
Ver original
  1. <ul class="left ul">
  2.                <li class='recomendadas'><span ><a href='index.php?id=16' class='orange'>asd </a></span></li><br/>
  3. <li class='recomendadas'><span ><a href='index.php?id=18' class='orange'>asd </a></span></li><br/><br/>
  4. <li class='recomendadas'><span ><a href='index.php?id=12' class='orange'>asd </a></span></li><br/>
  5. <li class='recomendadas'><span ><a href='index.php?id=11' class='orange'>asd </a></span></li><br/><br/>
  6. <li class='recomendadas'><span ><a href='index.php?id=22' class='orange'>Nuevo pps </a></span></li><br/>
  7. <li class='recomendadas'><span ><a href='index.php?id=26' class='orange'>Gold </a></span></li><br/><br/>
  8. </ul>
Código CSS:
Ver original
  1. ul.ul{
  2.     line-height:13px;
  3. }
  4. li.recomendadas{
  5. list-style-image:url(../images/rec.gif);
  6. width:70px;
  7. max-height:15px;
  8. overflow:hidden;
  9.  
  10. }
  #6 (permalink)  
Antiguo 13/03/2011, 20:02
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

ok una cosa que no entiendo
Cita:
y la propiedad overflow hidden para que si algun li es mayor al ancho definido no se muestre
no comprendo que quieres decir con que no se muestre

pero para ver los puntos el overflow y el ancho pasaselo a ul enlugar de a li
yo he probado con los puntos normales y asi se muestran
  #7 (permalink)  
Antiguo 13/03/2011, 20:08
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

Cita:
Iniciado por juanito1712 Ver Mensaje
ok una cosa que no entiendo


no comprendo que quieres decir con que no se muestre

pero para ver los puntos el overflow y el ancho pasaselo a ul enlugar de a li
yo he probado con los puntos normales y asi se muestran
Claro, porque si miras la web, tengo qeu mostrar tres listas, y cada item tiene que ser de una sola linea, y de un ancho definido para que no se superponga en las demas listas, entonces si pongo por ej. Foros del web entra justo en el espacio, pero si pongo Foros del web el mejor foro de ayuda, entonces ya no se mostraria y con el overflowhidden se muestra solo el ancho definido por ej. 50 px, por lo que al llegar a los 50px se corta la frase y quizas qeuda Foros del web la , y con eso ya no se superponen los textos.
  #8 (permalink)  
Antiguo 13/03/2011, 20:10
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

para eso le tienes que dar un ancho de 70 al ul y un ancho de 800 al li por ejemplo con el hidden al ul o te hará un salto de linea
  #9 (permalink)  
Antiguo 13/03/2011, 20:20
Avatar de ArturoGallegos
Moderador
 
Fecha de Ingreso: febrero-2008
Ubicación: Morelia, México
Mensajes: 5.821
Antigüedad: 9 años, 9 meses
Puntos: 951
Respuesta: Overflow hidden en UL

las etiquetas <li> toman el ancho de su elemento padre <ul>

en tu css tu tienes
Código CSS:
Ver original
  1. ul.ul{
  2. line-height:13px;
  3. }
  4. li.recomendadas{
  5. list-style-image:url(../images/rec.gif);
  6. width:70px;
  7. max-height:15px;
  8. overflow:hidden;
  9. }

cambialo por
Código CSS:
Ver original
  1. ul.ul{
  2. line-height:13px;
  3. list-style-image:url(../images/rec.gif);
  4. width:70px;
  5. overflow:hidden;
  6. }
  7. li.recomendadas{
  8. max-height:15px;
  9. }
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....
  #10 (permalink)  
Antiguo 13/03/2011, 20:21
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

Cita:
Iniciado por Ag666 Ver Mensaje
las etiquetas <li> toman el ancho de su elemento padre <ul>

en tu css tu tienes
Código CSS:
Ver original
  1. ul.ul{
  2. line-height:13px;
  3. }
  4. li.recomendadas{
  5. list-style-image:url(../images/rec.gif);
  6. width:70px;
  7. max-height:15px;
  8. overflow:hidden;
  9. }

cambialo por
Código CSS:
Ver original
  1. ul.ul{
  2. line-height:13px;
  3. list-style-image:url(../images/rec.gif);
  4. width:70px;
  5. overflow:hidden;
  6. }
  7. li.recomendadas{
  8. max-height:15px;
  9. }
Acabo de cambiarlo pero no me agarra la altura de las li, no se toma bien la altura maxima. Alguna idea de porque?
  #11 (permalink)  
Antiguo 13/03/2011, 20:22
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

eso es que te hace un salto de linea?
  #12 (permalink)  
Antiguo 13/03/2011, 20:23
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

Cita:
Iniciado por juanito1712 Ver Mensaje
eso es que te hace un salto de linea?
Claro, me hace un salto de linea.
  #13 (permalink)  
Antiguo 13/03/2011, 20:24
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

ul.ul{
line-height:13px;
overflow:hidden;
width:30px;
background-color:#0C3;
}
li.recomendadas{
width:200px;
}

lo que te he dicho en el post anterior
  #14 (permalink)  
Antiguo 13/03/2011, 20:25
Avatar de juanito1712  
Fecha de Ingreso: mayo-2010
Ubicación: Valencia
Mensajes: 1.108
Antigüedad: 7 años, 7 meses
Puntos: 66
Respuesta: Overflow hidden en UL

fuerzas a cada li a ser de 200 px aunque el div superior recorta en 70
de lo contrario el li recorta a 70
  #15 (permalink)  
Antiguo 13/03/2011, 20:27
Avatar de aguila_393  
Fecha de Ingreso: septiembre-2007
Ubicación: Argentina
Mensajes: 406
Antigüedad: 10 años, 2 meses
Puntos: 1
Respuesta: Overflow hidden en UL

Ahi lo logre. Muchas gracias a todos los que me ayudaron :D

Etiquetas: hidden, overflow
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 01:50.