Foros del web, para los que viven de bits

imnotinsane · 22-oct-2006, 10:04

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-oct-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-oct-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-oct-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,

Lo que me sale si uso float,

Lo que me sale si uso display:inline,

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-oct-2006, 13:58

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

imnotinsane · 22-oct-2006, 14:03

no entiendo, un clear both donde ??

fer10 · 22-oct-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-oct-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-oct-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..

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 =)

22-oct-2006, 10:04	#1 (permalink)
imnotinsane Fecha de Ingreso: mayo-2006 Mensajes: 64	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 __________________ webplan - Diseño y desarrollo de páginas webs. Desde Andalucía - España

22-oct-2006, 11:05	#3 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	yo tengo una pregunta Cita: <input type='submit' name='borrar' value='Borrar' style='width:80px;' /><input type='submit' name='editar' value='Editar' style='width:80px; margin-left:4px;' /> 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 __________________ Saludos FT. www.fernando.com.mx Última edición por fer10; 22-oct-2006 a las 11:13.

22-oct-2006, 11:33	#4 (permalink)
imnotinsane Fecha de Ingreso: mayo-2006 Mensajes: 64	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, Lo que me sale si uso float, Lo que me sale si uso display:inline, 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> __________________ webplan - Diseño y desarrollo de páginas webs. Desde Andalucía - España

22-oct-2006, 13:58	#5 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	lo que pasa es que te falta limpiarlo, con clear both; __________________ Saludos FT. www.fernando.com.mx

22-oct-2006, 14:03	#6 (permalink)
imnotinsane Fecha de Ingreso: mayo-2006 Mensajes: 64	no entiendo, un clear both donde ?? __________________ webplan - Diseño y desarrollo de páginas webs. Desde Andalucía - España

22-oct-2006, 10:38	#2 (permalink)
1000i1 Fecha de Ingreso: mayo-2006 Mensajes: 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.

22-oct-2006, 14:11	#7 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	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> __________________ Saludos FT. www.fernando.com.mx

22-oct-2006, 14:56	#8 (permalink)
imnotinsane Fecha de Ingreso: mayo-2006 Mensajes: 64	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 __________________ webplan - Diseño y desarrollo de páginas webs. Desde Andalucía - España

22-oct-2006, 15:19	#9 (permalink)
fer10 Fecha de Ingreso: octubre-2005 Ubicación: Guadalajara - Mexico Mensajes: 902	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.. 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 =) __________________ Saludos FT. www.fernando.com.mx Última edición por fer10; 22-oct-2006 a las 15:30.

Herramientas
Mostrar Versión Imprimible Enviar por Correo
Desplegado
Mode Lineal Cambiar a Modo Hibrido Cambiar a Modo Hilado