Salen movidos los elementos

rafazed2 · #1 (**permalink**) 09/08/2009, 17:23

Hola a todos, les comento que en mi web h t t p://vende-ebooks.netii.net cuando la veo en firefox y en google chrome me salen movidos algunos elementos, en IE8 sale todo bien, en IE7 no lo he probado, pero cuando veo la página en web page maker y en dreamweaver sale todo bien, que puede ser? La página la hice con web page maker 3.

Si quieren ver el código se los pongo en este archivo de texto: h t t p://mediafire.com/?sharekey=ffc9152f20f7b5fdaf924764f9977b1de04e75f6 e8ebb871

Dice en dreamweaver que tiene un z-index bug, que es eso?

zerokilled · #2 (**permalink**) 09/08/2009, 20:23

primero tienes que comprender que no todos los navegadores lo fabrica una sola persona, sino diferentes compañias. eso significa que cada navegador se comporta manera diferente, algunos haciendo mas caso al estandar W3C, y otros ignorando detalles del estandar. me parece que lo mismo sucede con los preview de dreamweaver, frontpage y programas similares. mi consejo es que nunca te confies en ellos y siempre haz la previsualización en algun navegador.

por otro lado, el diseño de tu codigo me parece un desorden. no hay razón de porque hacer muchos de los contenidos con posición absoluta. o sea, estas diseñando como si estuvieras usando un editor gráfico y es un error grave porque el navegador tiene su característica particular de como mostrar el contenido. sin tener que llevarte muy extremo a los lenguajes, te recomiendo que aprendas al menos algo básico de CSS. y por el momento, para solucionar tu caso, remueve todas las posiciones absoluta y ubica las imagenes entre cada contenido. algo como la siguiente estructura.

Código:

<div id="container">
<div>contenido</div>
<img ... />
<div>contenido</div>
<img ... />
...
</div>

Corneja · #3 (**permalink**) 10/08/2009, 01:23

Siempre que quieras hacer algo estandar hazlo previsualizando en FF nunca en IE ni en el preview de los editores ya que usan IE como motor.

rafazed2 · #4 (**permalink**) 10/08/2009, 08:30

gracias a los dos, voy a intentar usar su solucion, mi problema es que la web la estoy haciendo en web page maker, por eso se genera el codigo asi, pero creo que la solucion va a ser empezar desde cero y hacerlo con css. Ya habia aplicado una solucion temporal que era publicar el texto como imagen.
Gracias

kseso? · #5 (**permalink**) 10/08/2009, 18:16

Cita:

Iniciado por rafazed2

... pero creo que la solucion va a ser empezar desde cero y hacerlo con css...

Hola Rafazed2.
Sinceramente, creo que es la mejor decisión que podrías haber tomado.
Es tal el cúmulo de errores y mal uso/abuso de algunos elementos/propiedades/valores que te supondrá menos trabajo una nueva que corregirlos.

Sólo un apunte, si dices que ese código te lo ha generado "web page maker", no vuelvas a utilizarlo de esa manera. El código actual se podría poner como ejemplo de un ataque de "divitis" crónica y de qué no hay que hacer.

Quizás te interese pasar por www.librosweb.es y tener a mano sus .pdf´s sobre css y html.
También, si no las conoces, pueden serte de utilidad páginas como http://cssmania.com - www.araudi.net y todas las que tienes en el foro de css, especialmente las "guías de migración sin dolor" de Mikmoro.

Suerte, y para cualquier duda por acá andaremos.

rafazed2 · #6 (**permalink**) 10/08/2009, 19:53

Gracias por la respuesta kseso, y si estoy diciendo la verdad, el web page maker 3 me generó asi el codigo, y yo no elegí si las quería hacer divs o no, el programa solito lo hacía. Por ahora solo corregiré el problema de los elementos en dreamweaver (ya se como: volviendo a hacer esas partes) y después migro el website entero a css. Por cierto, me recomiendan crear una css aparte o incluir el css en head? o no tengo idea de lo que estoy diciendo!!????

Gracias

PD: No usen web page maker!! cuando le daba enter para un nuevo parrafo en el codigo me crea otro div!!

kseso? · #7 (**permalink**) 11/08/2009, 05:18

Si el css es pequeño y sólo lo vas a utilizar en una página, puede ir en el head. Pero si es un css algo extenso y utilizado en 2 ó mas html, hoja aparte y llamado con el

Cita:

Según lo veo yo.

Un saludo

rafazed2 · #8 (**permalink**) 11/08/2009, 09:34

gracias por la sugerencia kseso, yo creo que lo voy a usar en head porque solo es una página y es muy corto el css. A propósito, el código que me pusiste para llamar a la css va en head?

Gracias

kseso? · #9 (**permalink**) 11/08/2009, 09:37

Cita:

Iniciado por rafazed2

gracias por la sugerencia kseso, yo creo que lo voy a usar en head porque solo es una página y es muy corto el css. A propósito, el código que me pusiste para llamar a la css va en head?

Gracias

Efectivamente, Rafa, de cabeza en la cabeza

Un saludo

rafazed2 · #10 (**permalink**) 11/08/2009, 20:58

Tengo otro problema! Ya le puse un índice con position:fixed, pero en las pantallas chicas tapa la demás información, que puedo hacer? Aquí incluyo el código

Código HTML:

<div id="indice" class="wpmd" style="position:fixed; overflow:oculto; left:100px; top:220px; z-index:35; visibility: visible; width:170px; height:196px; background:url(images/indice.png); background-repeat:no-repeat; font-family: Arial, Helvetica, sans-serif; font-size: 13.5pt;"> 
<font style="font-size:7pt;"><br></font> 
<font class="ws72"> 
<center><b>Índice</b></center>

Básicamente ese es el código de la div en que lo tengo, que me sugieren?