Foros del Web - agrandar caja a la vez que texto en FF no me va

Foros del Web (http://www.forosdelweb.com/)

- CSS (http://www.forosdelweb.com/f53/)

- - agrandar caja a la vez que texto en FF no me va (http://www.forosdelweb.com/f53/agrandar-caja-vez-que-texto-ff-no-436516/)

imnotinsane

22/10/2006 10:04

agrandar caja a la vez que texto en FF no me va

Hola, tengo este sencillo codigo CSS que no consigo hacer funcionar como me gustaría.

Lo que hago con esto es consultar una base de datos e ir haciendo una lista con el código que adjunto.
El problema es que cuando $datos[titular] es mas grande de una línea, en FF el tamaño del ul queda constante (aunque ponga height:100%), y en IE funciona bien, el ul se agranda a la vez que el texto coje más líneas.

Código:

<ul class='verdana10' style='height:30px; background-color:#ECEEF2;  padding-left:8px; list-style:none; clear:both;'>

                                

        <li style='float:left; width:280px; padding-top:8px; padding-bottom:8px;'>$datos[titular]</li>

        <li style='padding-top:3px;'><input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' /></li>                                

</ul>

a ver si alguien me echa una mano, saludos

1000i1

22/10/2006 10:38

Hola, he probado tu codigo en mi pc, y he hecho un par de pruebas, y asi sin saber muy bien que es lo que tienes que conseguir con este codigo( exactamente como quieres que se muestre), lo que veo es que el problema que tienes, es debido a 2 cosas.

1- No se porque, alguien que lo sepa que te lo explique, pero cuando usas float el div contenedor no se adapta al tamaño de lo que esta "flotando". Prueba de poner en vez de float "display:inline;"

2- Si pones al "ul" una altura determinada esta claro que a la que el contenido sea mas grande que esta altura, pues el contenido se saldra de la caja contenedora, no pongas height en el ul;

Asi conseguiras que todo lo que hay dentro del ul este dentro de tu div, otra cosa es si queda como tu quieres, que eso ya no lo se.

Recuerda que en la mayoria de casos si se ve en explorer como tu quieres y en Firefox no, por muy bonito que lo deje, el que lo hace mal es explorer.

Espero haberte ayudado. Un saludo.

fer10

22/10/2006 11:05

yo tengo una pregunta

Cita:

com sabes cual boton presiono el usuario, si en ambos casos son submit ? y te llegan en el post ? y postean a la misma pagina

imnotinsane

22/10/2006 11:33

He estado probando y es verdad que con los float dentro sale mal, pero con display no consigo hacer lo que quiero, lo pongo en imágnes para que se vea mas claro:

Lo que quiero conseguir,
http://www.webplan.es/1.jpg

Lo que me sale si uso float,
http://www.webplan.es/2.jpg

Lo que me sale si uso display:inline,
http://www.webplan.es/3.jpg

fer10, se cual presiona el usuario porque tienen distintos nombres los botones, de todas formas el código lo recorte un poco, era asi (con un boton oculto para sabe que noticia de la lista quiere borrar)

Código:

<ul class='verdana10' style='background-color:#ECEEF2;  padding-left:8px; list-style:none; clear:both;'>

                                <form method='post' name='loggin' action='adminnoticias.php' enctype='multipart/form-data'>

                                <li style=' display:inline; width:280px; padding-top:8px; padding-bottom:8px;'>$datos[titular]</li>

                                <li style='padding-top:3px; '><input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' /><input name='bid' type='hidden' value='$datos[id]' /></li>                                

                                </form>

                        </ul>

fer10

22/10/2006 13:58

lo que pasa es que te falta limpiarlo, con clear both;

imnotinsane

22/10/2006 14:03

no entiendo, un clear both donde ??

fer10

22/10/2006 14:11

no, mira ya te lo implemente de otra manera:

css:

Cita:

*{
margin:0px;
padding:0px;
}
ul{
background-color:#ECEEF2;
padding:2px 0px 2px 8px;
list-style:none;
clear:both;
width:460px;
font:normal 10px verdana,arial;
}
ul li span{
display:block;
float:right;
width:140px;
}
ul li span input{
margin:5px;
}

html

Cita:

<ul>
<li>
<form method='post' name='loggin' action='adminnoticias.php' enctype='multipart/form-data'>
<span><input type='submit' name='borrar' value='Borrar'/><input type='submit' name='editar' value='Editar'/><input name='bid' type='hidden' value='$datos[id]' /></span>
texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto texto
</form>
</li>
</ul>

es incorrecto poner el form entre <ul> y <li>

imnotinsane

22/10/2006 14:56

muchisimas gracias fer10, quedó perfecto.
Solo una duda: ¿porqué con el span flotando en la derecha funcionó? ¿qué diferencia hay de poner span y li ol ó ul ?

gracias, un saludo

fer10

22/10/2006 15:19

Cita:

¿porqué con el span flotando en la derecha funcionó?

jejej pues creo que te estabas complicando la vida supongo que li es un list-item osea un cuadro.. no avia necesidad de dividir un cuadro en 2 list-item.. :no:

Cita:

¿qué diferencia hay de poner span y li ol ó ul ?

cada elemento esta echo para algo tiene su fin, a veces ahy maneras para lograr mimas cosas con diferentes elementos, pero semanticamente no es correcto, por lo cual es necesario conocer un poco para que sirve cada elemento y de ahy jugar un poco

ol, ul son listas, tu queires hacer una lista no ? lista de noticias..
li = list item es un item de la lista.. osea una noticia..
entocnes no tenias que divir 2 listas ahy ..

a veces las cosas son mas simples de lo que parecen..

sobre el span la verdad aun desconsco su fin como tal, pero lo uso cuando quiero diferencias elementos dentro de contenidos en linea como <p> y <a>

pero tambien pusite aver usado <div> en vez de <span> y es mas correcto ya que es un bloque =)

La zona horaria es GMT -6. Ahora son las 07:51.