Mal uso de position:relative en CSS, se necesita asesoramiento

http://imgur.com/ZzkxK ... Captura de pantalla de mi abominación

jsviolín: http://jsfiddle.net/ELZD8/

Se veía bien, hasta que necesité cambiar el tamaño del conjunto de campos: y como estaba usando position:relative literalmente para cada elemento de la página, cambiar el conjunto de campos arruinó todo, mal. Perdóname, pero soy bastante nuevo en CSS y sé que estoy usando demasiado código.

Entonces, como puedes ver en el imgur, ahora parece un infierno. ¿Cuál es la forma más rápida de arreglar esto? Sé que probablemente tenga que ver con flotantes y margin:left y margin: right, pero ¿alguien podría darme una idea antes de volverme loco?

Cualquier aporte es apreciado, saludos.

preguntado el 03 de mayo de 12 a las 17:05

No creo que haya is una forma particularmente rápida de arreglarlo si está usando position: relative; top: ?px; left: ?px para todo. -

@thirtydot, eso es lo que he estado haciendo. position:relative, y un valor superior e izquierdo. ¿Pero eso NO PUEDE ser ideal? ¿Correcto? -

Solo un pensamiento, aparte de su pregunta: ¿por qué está diseñando cada etiqueta y elemento de entrada aparte? ¿Por qué no .input{ algún CSS común aquí, como background;} . Haría esto mucho más claro. -

Bueno, esa es la cuestión, sé que no es lo ideal, pero dado que las longitudes de los formularios son diferentes en ciertas áreas de la página y la altura de las etiquetas difiere mucho, ¿no necesito hacer cada elemento por sí mismo? Perdón por las preguntas de novato. -

Solo un consejo, junto con lo que dijo @DennisHunink sobre el uso de CSS común para los elementos, también debe considerar el uso de contenedores. NUNCA es una buena idea tener que posicionar cada elemento, especialmente si todos están en relación con la misma posición. Dividiría su página en 3 contenedores diferentes al menos. Luego, si se tuvo que cambiar el tamaño de algo, solo las cosas dentro del mismo contenedor deben reposicionarse/redimensionarse. Dado que el resto de los elementos se colocan en relación con su contenedor y no con toda la página. -

1 Respuestas

Solución fácil:

Debe usar la sección div adecuada, es decir, hacer que cada sección sea un div y luego colocar elementos dentro de cada div, de lo contrario, se convierte en un desastre. También debe enumerar sus elementos en su archivo css por orden de aparición en el html, de lo contrario, es doloroso buscar cosas...

No use cantidades masivas de <br>, use reglas CSS de margen y relleno en su lugar

Sí, puede usar position:relative, pero como pidió consejo, estoy totalmente en contra, toma más tiempo construir, actualizar, arreglar, etc. Use secciones, flotantes y manténgalo simple, Simple es su amigo.

También sugiero fuertemente contra el uso fieldset, Utilizar <form> en cambio, es un importante interruptor de html/css en mi opinión.

Aquí hay un ejemplo cortado después de limpiar/ajustar el código considerablemente. Todavía quedan mil formas de limpiarlo y refinarlo, pero al menos ahora se parece más a lo que supongo que querías:

http://sotkra.com/stackoverflow/positionrelative/index.html

contestado el 18 de mayo de 12 a las 04:05

¡Gracias por la respuesta, Sotkra, y agradezco que la reescribas! Mi único amigo de Drupal también dijo que no debería tener que usar mucho más que flotadores y márgenes. Esperamos su respuesta :) - Nubtacular

debería hacerse mañana, no he estado mucho en casa estos últimos días - Capagris

ok, perdón por la demora, déjame subir el código y editaré este comentario cuando esté configurado. Capagris

es importante tener en cuenta que no amontoné algunos campos de entrada en la misma fila, pero solo es cuestión de ponerlos dentro de divs y darles a estos divs su flotador adecuado: izquierda; y ancho: px o % reglas en consecuencia - Capagris

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.