Foros del Web » Creando para Internet » CSS »

Problema con float y clear

Estas en el tema de Problema con float y clear en el foro de CSS en Foros del Web. Saludos a todos en el foro. Estoy peleandome con un estilo y me creerán que me cuesta más crear un estilo que programar,diablos Tengo un ...
  #1 (permalink)  
Antiguo 20/08/2009, 13:04
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 9 años, 1 mes
Puntos: 0
Problema con float y clear

Saludos a todos en el foro.
Estoy peleandome con un estilo y me creerán que me cuesta más crear un estilo que programar,diablos

Tengo un formulario para subir archivos el cual tiene un link para dar la opción de subir más de un archivo, crando un nuevo nodo.
Hasta aquí todo bien pero llegué a los problemas con ie y firefox , pues cuando creo un nuevo nodo no lo inserta debajo del primer campo file.
Es decir deja un espacio y agrega el nuevo nodo y después de agregar unos 4 nodos más rellena el espacio dejado.

Quería saber si alguien sabe como puedo manejar esto??

Aquí mi código:

Código css:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Documento sin t&iacute;tulo</title>
  6. <style type="text/css">
  7. /*#form1{
  8. margin:10px auto auto;
  9. padding:5px 250px 5px 10px;
  10. width:280px;
  11. overflow: hidden;
  12. */
  13. }
  14. </style>
  15. <script type="text/javascript">
  16.  
  17. var upload_number = 2;
  18. function addNode() {
  19.     var d = document.createElement("div");
  20.     var file = document.createElement("input");
  21.     file.setAttribute("type", "file");
  22.     file.setAttribute("name", "attachment"+upload_number);
  23.     d.appendChild(file);
  24.     document.getElementById("moreUploads").appendChild(d);
  25.     upload_number++;
  26. }
  27.  
  28. function delNode(){
  29.  
  30. }
  31.  
  32.  
  33.  
  34.  
  35. //-->
  36.  
  37. </script>
  38.  
  39. </head>
  40.  
  41. <body>
  42.  
  43.  
  44. <h1>DOM Insert and Append</h1>
  45.  
  46.  
  47. <form id="form1" name="form1" action="" method="post" enctype="multipart/form-data" >
  48.  <div style=" float:left;">
  49.  <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" /></div>
  50.  
  51. <div id="moreUploadsLink" style="display:block; float:left;  "><a href="javascript:addNode();">Agregar otro archivo</a></div>
  52. <div id="moreUploads" style="clear:both"></div>
  53. <input type="submit" />
  54. </form>
  55.  
  56. </body>
  57. </html>

Yo quiero que aparezca debajo del primer nodo pero no lo hace.
Como referencia trabaja algo parecido a subir archivos como gmail.

Ojalá alguien me pueda ayudar!!!
  #2 (permalink)  
Antiguo 20/08/2009, 14:58
Avatar de alexk
Colaborador
 
Fecha de Ingreso: julio-2009
Ubicación: De vuelta al trono
Mensajes: 1.697
Antigüedad: 8 años, 4 meses
Puntos: 137
Respuesta: Problema con float y clear

mmm puedes dar la URL del problema?... solo asi me cuesta dibujarlo en mi mente... y como los elementos se crean dinamicamente (segun entendi) en el codigo que pegaste no estan (supongo) perdona pero solo asi yo no puedo jeje... chao y suerte!...

PD: Agrega un "display:block;" a los elementos que aparecen a ver k pasa
  #3 (permalink)  
Antiguo 20/08/2009, 16:10
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema con float y clear

No puedo pegar url por que no tengo servidor para subirlos salvo el de mí trabajo...
Y como estamos detrás de un firewall pues nos bloquean todo entonces no puedo subir ni una imagen.

Tratare de explicar mejor:
Al cargar la página solo hay un elemento para subir archivos y si tu quieres subir más pues das click en el link que te crea un nuevo nodo.

Tal vez puedas probar esta págiana: http://htmledit.squarefree.com/, es un editor en línea.
  #4 (permalink)  
Antiguo 20/08/2009, 16:33
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con float y clear

Hola 0le0
Al reproducir tu código, a mi el segundo imput se coloca ya bajo el primero (bajo= en la vertical)
Lo que he podido ver es que hay 1 ó 2 px de distancia en la vertical entre cada uno de los imput (los bordes que aparecen con firefox en los campos de texto).
¿Supongo bien si supongo que son esos 2px los que quieres que desaparezcan?
Siendo así, deberías añadir en tus estilos lo siguiente:
Cita:
input {
font-size:13px;
height:21px;
}
Para otro tamaño tamaño de fuente tendrás que corregir la altura.

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #5 (permalink)  
Antiguo 20/08/2009, 21:58
 
Fecha de Ingreso: octubre-2008
Mensajes: 109
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: Problema con float y clear

Aquí hay una imagen de como se ve el archivo:



Lo que esta en azul es lo que aparece con ie y si le doy click a agregar un nuevo archivo el div sube y rellena el espacio.
Como puedo evitar eso?

Y lo que esta señalado con rojo quiero que aparezca a la derecha de agregar archivo pero no lo consigo,será también confloat y clear??
  #6 (permalink)  
Antiguo 21/08/2009, 06:48
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Problema con float y clear

¡Anda, co**! lo pillé "alverres"
¿Habré acertado ahora:
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>kseso? jugando con css</title>
  4. <meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
  5. <style type="text/css">
  6. * {margin: 0; padding: 0; border: 0; outline: none; position: relative;}
  7. /*#form1{
  8. margin:10px auto auto;
  9. padding:5px 250px 5px 10px;
  10. width:280px;
  11. overflow: hidden;
  12.  
  13. }*/
  14. input {float: left;}
  15. form .moreUploads {float: left;}
  16. form a {float: left;, margin-bottom: 5px;}
  17. .corte {display:block; float: none; clear: both;}
  18. <script type="text/javascript">
  19. var upload_number = 2;
  20. function addNode() {
  21.     var d = document.createElement("div");
  22.     var file = document.createElement("input");
  23.     file.setAttribute("type", "file");
  24.     file.setAttribute("name", "attachment"+upload_number);
  25.     d.appendChild(file);
  26.     document.getElementById("moreUploads").appendChild(d);
  27.     upload_number++;
  28. }
  29.  
  30. function delNode(){
  31.  
  32. }
  33. //-->
  34. </head>
  35. <h1>DOM Insert and Append</h1>
  36. <form id="form1" name="form1" action="" method="post" enctype="multipart/form-data" >
  37.  <input type="file" name="attachment" id="attachment" onchange="document.getElementById('moreUploadsLink').style.display = 'block';" />
  38. <div id="moreUploadsLink" style="float:left;">
  39. <a href="javascript:addNode();">Agregar otro archivo</a>
  40. </div>
  41. <div id="moreUploads">
  42. </div>
  43. <div class="corte"></div>
  44. <input type="submit" />
  45. </form>
  46. </body>
  47. </html>
Pero lo que no tenemos en el código que pusiste al abrir el tema es el "eliminar archivo".
Ya dirás, 0le0
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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 00:37.