Necesito ayuda para entender esto por favor !

enridp · #1 (**permalink**) 10/03/2007, 12:51

Hola a todos!
Bueno, les comento mi problema porque la verdad es que ya estoy cansado de renegar y pelearme a muerte con CSS, el posicionamiento, etc. Que para colmo siempre queda difernete en IE que en Firefox.
Sólo espero que alguien pueda guiarme para ver en que le estoy errando, o tal vez dar algún buen consejo, ya leí bastante sobre el tema pero llevado a la práctica la cosa cambia 100%.
Dejo el ejemplo de lo que estoy desarrollando:

usuarios.arnet.com.ar/enridp/OV/

Hay varios problemas ahí que estoy solucionando de una manera muy poco elegante, más bien, a fuerza bruta. Por ejemplo, el div del medio, que representa el cuerpo de la página no se expande automáticamente con el contenido, es decir, al poner el flash este era tapado por el div de abajo (el que tiene el pasto), asique tuve que agregar algunos párrafos vacíos. Lo mismo con la tabla de al lado del flash... si se expande, el div del cuerpo no lo hace...
Por otro lado en Internet Explorer y en Firefox, la posición de esta tabla que está al lado del mapa flash es diferente y no se por qué, mucho menos como arreglarlo.
Hace poco también estuve renegando para agregar un formulario desplegable como el que aparece al apretar en Buscar (esq. sup. derecha), logre hacerlo. Pero lo que ahora no logro es que se vea bien. Si se fijan en Firefox anda perfecto, pero en el Internet Explorer se ve muy feo...
No se, son cosas que realmente no entiendo y me vuelven loco, trato de forzar siempre las ubicaciones poniendo pixeles negativos a las posiciones y demaces y ni asi anda porque siempre me arruina todo el Internet Explorer.
Necesito que alguien me diga donde está mi error o que al menos aporte algún truco para solucionar estos problemas porque creo que voy a terminar quemando algo

Saludos !
enri.

Mikmoro · #2 (**permalink**) 12/03/2007, 16:39

Hola, enridp.

Espero que esta explicación te sirva de algo al menos para la primera de tus dudas:

Una caja puede tener una altura definida o no tenerla. Con Firefox, si la tiene, su contenido no la hará crecer de ninguna manera, y si no la tiene, crecerá dependiendo del contenido: si son elementos en línea, crecerá para albergar su contenido, pero si son otras cajas flotadas o con posición absoluta, la caja principal no crecerá, porque es como si estas cajas no ocuparan espacio dentro de ella.

De esa manera, overflow se usa para decir qué ocurrirá con el contenido que desborde la caja, y tiene 4 posibles propiedades: auto, scroll, hidden o visible.

Concretamente auto, significa que aprezcan las barras de scroll cuando sea necesario, es decir, cuando el contenido rebase el tamaño del contenedor.

De tal manera, si una caja tiene un alto definido, como ya hemos comentado que ésta no crecerá, si su contenido rebasa ese tamaño aparecerán las barras de scroll. Pero si la caja no tiene tamaño, y no ha crecido debido a su contenido (cajas flotadas por ejemplo), el overflow auto le obligará a crecer tanto como lo haga su contenido en lugar de sacar las barras de scroll.

En resumen, overflow auto hace crecer a una caja sin tamaño de alto definido que no haya crecido según su contenido, tanto como crezca su contenido.

Mikel.

enridp · #3 (**permalink**) 13/03/2007, 07:02

Gracias Mikel por tu respuesta !
Creo que tengo más o menos solucionado el asunto, en otro foro me han advertido de una muy buena utilidad para firefox, es un componente extra llamado FireBug, muy bueno de verdad si no lo conocés te lo recomiendo 100%.
Asique creo que en firefox no voy a tener más problemas, ya que puedo diseñar la web desde el navegador viendo en tiempo real como quedan las cosas.
El tema es que en Internet Explorer SIEMPRE queda distinto.
La única solución que se me ocurre es crear 2 codigos, uno para Firefox y otro para IE, y que un PHP elija cual poner según el usuario.
Pero ya es doble trabajo, uff...
De todas formas estoy dispuesto a hacerlo, sin embargo tal vez me sirva una ayuda de los más más experimentados en el tema de posicionar las cosas JUSTO ahí donde se quiere, en ese recóndito rinconcito... hay alguna estrategia a seguir? porque yo me vuelvo loco cada vez que tengo que hacer eso, sobre todo porque el DreamWeaver me muestra cualquier cosa, tengo que crear un DIV y mover pixel por pixel, comparar en los navegadores e iterara estas operaciones hasta que quede bien. Tal vez hay algún "truco" que desconozco.
Por ejemplo, tengo ganas de ponerle un bordecito tipo grunge al div del cuerpo de esta pag (que si mal no recuerdo lo creaste vos en otro post de este foro

).
usuarios.arnet.com.ar/enridp/OV/
O sea, como un marco, similar al que está en el header (de hecho debería continuarse con este). Pero ni me quiero imaginar lo que voy a renegar acomodando eso... asique por ahora decidí no tocarlo.
Saludos !
enri.

Mikmoro · #4 (**permalink**) 13/03/2007, 08:26

En general no es necesario hacer dos códigos diferentes. Mi estrategia y la de mucha gente es diseñar para que se vea bien en firefox y luego acomodar las cosas que fallen en Explorer.

Para eso tienes varias maneras:
- usar una hoja de estilo especial para IE
- usar los comentarios condicionales para arreglar sus peculiaridades
- usar intensivamente el ! important para engañarle en muchos parámetros.
- etc.

Mi primera opinión, aunque habrá mucha gente que no la comparta, es que dejes de usar Dreamweaver.

Yo uso un editor de texto o NVU. Creo que DW causa más problemas de los que resuelve (por lo que puedo leer por aquí), y el código que arroja es feísimo.

Mikel.

P.D.: sí, recuerdo que te ayudé un poco con esa página al principio, pero veo que ya has avanzado mucho, con lo del flash y eso, que está muy bien.

enridp · #5 (**permalink**) 15/03/2007, 12:01

Si, estuve viendo los condicionales para el IE y demaces, pero no se, se me hace que me va a quedar un choclo enorme el código. Creo que voy a rediseñar dos veces y listo, muchos me dijeron que a veces lo que hacen es simplemente sacar todas esas cositas lindas que se ven bien en firefox y en IE no, pero no me va mucho la idea...
El DW la verdad que me desilusionó bastante... pero creo que mucho peor es el FrontPage que era el que tenía...
En firefox ahora me ayudo muchísimo con Firebug... si hubiese uno igual para IE ya estaría listo...
Voy a probar el NVU ese a ver que tal, y a seguir renegando con esto de posicionar cosas... que lenguaje pedorro el HTML y compañía la verdad....

Saludos !

enri.

Mikmoro · #6 (**permalink**) 15/03/2007, 12:47

Mira, con esto el código te queda limpito limpito:

<link rel="stylesheet" href="estilos.css" type="text/css" />


Es decir, llamar a una hoja externa de forma normal y luego usar un comentario condicinal para llamar a un hoja externa hecha especialmente para explorer

Esto es para mi la mejor manera de diseñar, y el html queda muy limpio.

Mikel.

enridp · #7 (**permalink**) 15/03/2007, 14:32

Voy a tratar de implementarlo a ver si queda.
De todas formas creo que se me va a complicar porque ahora estoy armando las páginas para firefox con firebug, que me agrega las correcciones que hago visualmente con un "style" dentro de las etiquetas... asique esos CSS no estarían dentro de un archivo, y tendría que separarlos, y toda la bola.
Cualquier solución parece ser un camino de mucho trabajo inútil pero bueno, habrá que aguantársela, solo espero que una vez diseñada no tenga que cambiar el diseño por mucho tiempo...

Saludos !
enri.

enridp · #8 (**permalink**) 16/03/2007, 10:07

Estuve viendo el NVU, está bueno en el sentido en que muestra realmente lo que se ve en Firefox, pero hay muchas cosas que no puedo tocar. De entrada no veo mi película Flash, y la mayoría de las cosas es como que no se pueden modificar, al menos no clickeando con el mouse. Por ejemplo el menú de opciones se comporta como en tiempo de ejecución, es decir, al pasar el mouse por encima se encienden los botones, etc. no puedo seleccionarlos para editarlos... lo mismo con muchas otras capas y demaces...
Ahora buscando el FrontPage vi que Microsoft lanzo uno nuevo, Expression Web Design o algo así, asique lo estoy bajando para probarlo a ver que tal...
Pero realmente no entiendo por qué no existe un programa de edicion donde simplemente uno clickee sobre la capa o tabla o imagen o lo que fuere y ARRASTRE hasta la posición justa donde quiere que esté... no entiendo...
Saludos !
enrique.

Mikmoro · #9 (**permalink**) 16/03/2007, 11:41

Bueno, es normal que se te haga raro. No creo que puedas juzgar un programa enredándolo una hora (o dos)

. Como a todo, hay que meterle unos buenos ratos para entenderlo bien y sacarle todo su jugo.

¿Te has fijado que clickando sobre cualquier elemento tienes en la parte de abajo toda la estructura DOM? Pues bien, pulsa el botón derecho sobre cualquier elemento del DOM y verás todas sus opciones. Ahí puedes hacer casi lo que quieras.

Por otro lado, ¿quieres ver tu película flash en ejecución en el modo edición? Este programa no es para eso; tú sabes bien cómo es tu película, porque la ves en otros programas, y en este programa lo que vas a hacer es posicionarlo en su lugar y con sus características.

En fin, esto y un largo etcétera de cosas. No creo que sea nada fácil encontrar un programa que satisfaga todas las necesidades o gustos de todo los usuarios, en este y en cualquier otro terreno ¿no?

Creo que hay un foro específico sobre este tema en esta misma web, y seguro que ahí hay gente que sabe mucho más y tiene opiniones con mayor criterio que nosotros.

Un saludo.

Mikel.

enridp · #10 (**permalink**) 16/03/2007, 13:22

Gracias Mikel, no había visto la DOM de abajo

Es que si, ni siquiera una hora creo que lo usé porque ya me bajoneó el hecho de que no se pueda arrastrar las cosas y ponerlas donde se quieren. Realmente no comprendo por qué ningún programa hace esto, supongo será algo complicado, pero aún programadores como los de Adobe Macromedia, Mozilla, etc?
Con respecto al Flash, no quería que me lo muestre, sino que me señale al menos sus bordes, para poder ver donde está... no se si es un problema de acá o que, pero no logro verlo, si lo clickeo (donde supongo que está) me pone en la DOM el tag embed, pero no me marca los bordes...

En fin, a seguir probando, ya caeré con numerosos problemas nuevamente

Mikmoro · #11 (**permalink**) 16/03/2007, 15:26

Si puedes coger las cosas y arrastrarlas a donde quieras, pero antes deberás picar en un icono parecido a una chincheta, justo al lado de los estilos de letra; claro, eso sí: te convertirá cualquier cosa en una capa de posición absoluta y la colocarás donde quieras. Es que si no fuera así, sería casi imposible que te colocará correctamente los márgenes y demás, y además todo con css

Mikel.

enridp · #12 (**permalink**) 16/03/2007, 17:26

Claro, eso es lo que vi... el DW también hace lo mismo. Transforma todo a absoluto, y eso por lo general trae más problemas de los que soluciona.
Traté de diseñar la web para que en el caso de tener 800x600 el usuario pueda ver igual el contenido. Con posiciones absolutas esto es casi imposible, de hecho ya con redimensionar la ventana se va todo a la...

Yo sigo sin entender por qué hicieron un lenguaje tan pobre, o en su defecto por qué los programas de diseño no implementan una solución amigable a este problema que al parecer TODO el mundo tiene (ya que en numerosos foros me han dicho que esto es así, renegar hasta que las cosas se acomoden y si se quiere que se vea en IE también, entonces renegar el doble...).

En fin... al libro de quejas supongo. Pero es una lástima...
Saludos !
enri.