Foros del Web » Creando para Internet » CSS »

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

Estas en el tema de agrandar caja a la vez que texto en FF no me va en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 22/10/2006, 11:04
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #2 (permalink)  
Antiguo 22/10/2006, 11:38
 
Fecha de Ingreso: mayo-2006
Mensajes: 38
Antigüedad: 11 años, 6 meses
Puntos: 0
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.
  #3 (permalink)  
Antiguo 22/10/2006, 12:05
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
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/10/2006 a las 12:13
  #4 (permalink)  
Antiguo 22/10/2006, 12:33
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #5 (permalink)  
Antiguo 22/10/2006, 14:58
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
lo que pasa es que te falta limpiarlo, con clear both;
__________________
Saludos
FT.
www.fernando.com.mx
  #6 (permalink)  
Antiguo 22/10/2006, 15:03
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
no entiendo, un clear both donde ??
__________________
webplan - Diseño y desarrollo de páginas webs.
Desde Andalucía - España
  #7 (permalink)  
Antiguo 22/10/2006, 15:11
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
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
  #8 (permalink)  
Antiguo 22/10/2006, 15:56
 
Fecha de Ingreso: mayo-2006
Mensajes: 64
Antigüedad: 11 años, 7 meses
Puntos: 0
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
  #9 (permalink)  
Antiguo 22/10/2006, 16:19
Avatar de fer10  
Fecha de Ingreso: octubre-2005
Ubicación: Guadalajara - Mexico
Mensajes: 905
Antigüedad: 12 años, 2 meses
Puntos: 3
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/10/2006 a las 16:30
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 19:13.