Overflow hidden en UL

[aguila_393]

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?

[juanito1712]

pasa el html que veamos como está montado, de lo contrario difícilmente lo adivinaremos ;)

[aguila_393]

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

Esa es la web.

[juanito1712]

no podrias poner el trocito de la lista y el css que le haga referencia para trabajar mas comodamente con el?

[aguila_393]

Código HTML:

<ul class="left ul"> 
               <li class='recomendadas'><span ><a href='index.php?id=16' class='orange'>asd </a></span></li><br/>
<li class='recomendadas'><span ><a href='index.php?id=18' class='orange'>asd </a></span></li><br/><br/>
<li class='recomendadas'><span ><a href='index.php?id=12' class='orange'>asd </a></span></li><br/>
<li class='recomendadas'><span ><a href='index.php?id=11' class='orange'>asd </a></span></li><br/><br/>
<li class='recomendadas'><span ><a href='index.php?id=22' class='orange'>Nuevo pps </a></span></li><br/>
<li class='recomendadas'><span ><a href='index.php?id=26' class='orange'>Gold </a></span></li><br/><br/>
</ul>
 

Código CSS:

ul.ul{
    line-height:13px;
}
li.recomendadas{
list-style-image:url(../images/rec.gif);
width:70px;
max-height:15px;
overflow:hidden;
 
}
 

[juanito1712]

ok una cosa que no entiendo

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

[aguila_393]

Iniciado por juanito1712

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.

[juanito1712]

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

[ArturoGallegos]

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

en tu css tu tienes

Código CSS:

ul.ul{
line-height:13px;
}
li.recomendadas{
list-style-image:url(../images/rec.gif);
width:70px;
max-height:15px;
overflow:hidden;
}
 

cambialo por

Código CSS:

ul.ul{
line-height:13px;
list-style-image:url(../images/rec.gif);
width:70px;
overflow:hidden;
}
li.recomendadas{
max-height:15px;
}
 

[aguila_393]

Iniciado por Ag666

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

en tu css tu tienes

Código CSS:

ul.ul{
line-height:13px;
}
li.recomendadas{
list-style-image:url(../images/rec.gif);
width:70px;
max-height:15px;
overflow:hidden;
}
 

cambialo por

Código CSS:

ul.ul{
line-height:13px;
list-style-image:url(../images/rec.gif);
width:70px;
overflow:hidden;
}
li.recomendadas{
max-height:15px;
}
 

Acabo de cambiarlo pero no me agarra la altura de las li, no se toma bien la altura maxima. Alguna idea de porque?

[juanito1712]

eso es que te hace un salto de linea?

[aguila_393]

Iniciado por juanito1712

eso es que te hace un salto de linea?

Claro, me hace un salto de linea.

[juanito1712]

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

[juanito1712]

fuerzas a cada li a ser de 200 px aunque el div superior recorta en 70
de lo contrario el li recorta a 70

[aguila_393]

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