Optimizar web a IE y Firefox

Citar

Escrito el 29 Oct 2006 06:57 pm

Wenas, no sé si soy el único al que le pasa pero estoy teniendo problemas trabajando con Dreamweaver. Veamos, yo estoy creando un html, creo una capa y meto un texto para sobrexponerlo encima de una imágen. Bien, el texto está centrado y voy a previsualizar con IE y con Firefox. Con IE sale donde lo he puesto. Pero con Firefox sale desplazado algunos pixeles arriba o abajo, derecha o izquierda del punto donde lo habia colocado. Como hago para que se quede donde lo he puesto? Es algo molesto.

Gracias.

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 30 Oct 2006 06:32 am

ok... no me sorprende, he visto por lo menos dos o tres post (en otro foro) con titulo similar a ODIO A DREAM WEAVER y los veo y dicen lo mismo hago esto, y en dream se ve bien, lo pruebo y me sale todo descompuesto... jejeje, pero bueno, por que no pones el codigo asi te podemos ayudar con mas sertesa.

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 30 Oct 2006 04:36 pm

Por supuesto!

Código :

<style type="text/css">
<!--
body {
   background-color: #B5D0F2;
}
#Layer1 {
   position:absolute;
   visibility:visible;
   width:395px;
   height:41px;
   z-index:1;
   left: 292px;
   top: 540px;
}
.Estilo1 {
   font-family: Arial;
   font-size: 10px;
}
body,td,th {
   font-size: 12px;
}
#Layer2 {
   position:absolute;
   width:388px;
   height:26px;
   z-index:3;
   left: 318px;
   top: 459px;
   visibility: visible;
}
#Layer3 {
   position:absolute;
   width:200px;
   height:53px;
   z-index:2;
   left: 312px;
   top: 435px;
   visibility: visible;
}
-->
</style> <div align="center">
  <object data="http://wonddworld.ueuo.com/flash/presentacion.swf" type="application/x-shockwave-flash" width="500" height="400">
    <param name="movie" value="http://wonddworld.ueuo.com/flash/presentacion.swf" />
    <param name="quality" value="high" />
    <embed src="http://wonddworld.ueuo.com/flash/presentacion.swf" width="504" height="404" quality="high"></embed>
  </object>
</div> 
<div align="center">
  <div id="Layer2">
    <div align="justify"><span class="Estilo1">Para previsualizar el contenido de la web es necesario tener instalado Flash, una resoluci&oacute;n de 1024x768 y preferentemente navegar con Mozilla Firefox. Puedes descargar el Flash y el Mozilla Firefox clicando en la imagen correspondiente. </span></div>
  </div>
  <p>&nbsp;</p>
  <div id="Layer3"><img src="menuindex.png" width="402" height="100" /></div>
</div>

En este ejemplo, hay un flash que es un intro arriba. Luego hay una imágen pequeña abajo con un texto encima (el texto no forma parte de la imágen. Dos capas: Una que contiene el texto y otra que contiene la imágen.
El problema: La capa donde esta el texto se ve bien (es decir, la posición en dreamweaver es la misma) en Firefox. Pero en IE se ve en otro sitio. La capa donde está la imágen tengo que moverla más a la derecha de donde tiene que estar en Dreamweaver para que en Firefox se vea en el centro que es donde tiene que estar. En cambio si previsualizo con IE se ve mal, se ve donde está colocado en Dreamweaver.

Saludos y espero solución

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 30 Oct 2006 07:10 pm

ok... tu estas sentrando una pagina web, pero si lo haces de esa manera, date cuenta que en monitores de diferente resolucion se vera mal... no estara centrado es mejor usar text-align: center para body, luego en el div contenedor de todo usas margin: auto; tanto para la izquierda como para la derecha... por cierto, clicando??? no creo que esa palabra exista, mejor usa haz click aqui, creeme le dara mejor presentacion a tu trabajo. ah y deves usar position:relative para tu div contenedor de todo.

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 30 Oct 2006 08:07 pm

Que es el div contenedor de todo?

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 01 Nov 2006 08:40 pm

Lo deberia dejar asi?

Código :

<style type="text/css">
<!--
body {
   background-color: #B5D0F2;
}
#Layer1 {
   position:absolute;
   visibility:visible;
   width:395px;
   height:41px;
   z-index:1;
   left: 292px;
   top: 540px;
}
.Estilo1 {
   font-family: Arial;
   font-size: 10px;
}
body,td,th {
   font-size: 12px;
   text-align: center
}
#Layer2 {
   position:absolute;
   width:388px;
   height:26px;
   z-index:3;
   left: 318px;
   top: 459px;
   visibility: visible;
}
#Layer3 {
   position:absolute;
   width:200px;
   height:53px;
   z-index:2;
   left: 312px;
   top: 435px;
   visibility: visible;
}
-->
</style> <div align="center">
  <object data="http://wonddworld.ueuo.com/flash/presentacion.swf" type="application/x-shockwave-flash" width="500" height="400">
    <param name="movie" value="http://wonddworld.ueuo.com/flash/presentacion.swf" />
    <param name="quality" value="high" />
    <embed src="http://wonddworld.ueuo.com/flash/presentacion.swf" width="504" height="404" quality="high"></embed>
  </object>
</div> 
<div align="center">
  <div id="Layer2">
    <div align="justify"><span class="Estilo1">Para previsualizar el contenido de la web es necesario tener instalado Flash, una resoluci&oacute;n de 1024x768 y preferentemente navegar con Mozilla Firefox. Puedes descargar el Flash y el Mozilla Firefox clicando en la imagen correspondiente. </span></div>
  </div>
  <p>&nbsp;</p>
  <div id="Layer3"><img src="menuindex.png" width="402" height="100" /></div>
</div>

Lo del margin auto donde lo coloco?

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 01 Nov 2006 08:51 pm

A lo que quieras centrar. Por ejemplo:

Código :

<style>
.c1{
margin: 0 auto;
width:200px;
}
</style>
<div class="c1">
Debes poner un width con el margin, para que centre.
</div>

Saludos!

Por Lunatic Lycanthrop

Claber

1203 de clabLevel

7 tutoriales

1 ejemplo

Genero:Masculino

Envíale un mensaje privado

The dark places where wolves access internet with 46,6 kbps

Citar

Escrito el 02 Nov 2006 12:31 pm

Breath escribió:

estoy teniendo problemas trabajando con Dreamweaver.

Normal

Por Yranac

421 de clabLevel

Genero:Masculino

Envíale un mensaje privado Web

Lugo, Galicia

@yranac

Citar

Escrito el 03 Nov 2006 01:02 am

jejeje, me ausente un rato, andava de vacaciiones jijiji bueno, va eso no interesa... el div contenedor de todo es exactamente eso, el que contiene todos los elementos, p[ara entenderlo tienes que entender lo que es el modelo de caja y la forma en que unos elementeos quedan anidados dentro de otros, o bien contenidos unos dentro de otros... un ejemplos eria este:

Código :


<body>
   <div id="contendor">
       <div id="cabecra">
            <img...../>
       </div>
       <!--Mas contenido -->
    </div>

Es algo relativamente sencillo... aun que para explicarlo es mejor con imagenes jejeje

por otro lado los margenes auto como ya lo dige, ban a la derecha e izquierda de contenedor...ok???

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 03 Nov 2006 01:54 pm

Estoy comenzando a moverme en esto de los divx, que por lo que parece son mucho mejor que las capas. Espero que tengais paciencia. jejej. Vi una web (copie el codigo fuente en dreamweaver) donde todo estaba estructurado en divs y parecia un buen asunto eso por lo que me gustaria estar en eso a fondo. Me he mirado bastante los manuales de aqui y parecen buenos aunque hay que dedicarles bastante tiempo.

Entonces, lo que a mi me interesaria saber pues, seria. La estructura de html serie

Style
Divs

Y dentro de los divs las partes (head, body y foot) Cada div tiene su nombre:
<div id="nombredeldiv">

Y luego el style ponemos el nombre del div y modifcamos sus parametros.

Pero como hago que el área d un div ocupe x ejemplo x ancho y x alto?

Tengo realmente muchas dudas. Si alguien que no estuviera muy ocupada me ayudara un poco x msn le agradeceria mucho. No tardo mucho en captar las cosas.

Saludos

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 03 Nov 2006 02:29 pm

por lo que veo tienes solo una pequena nocion del css... primero entendmos algo, una hoja de estiolo no es mas que un conjuunto de reglas, cada regla se compone de un selector, una propiedad y un valor...

h1{color:black;}

aqui tenemos h1, que es nuestro selector

color, que es la propiedad y black qe es el valor que toma la propiedad...

hay una gran cantidad de selectores y de propiedades que bueno... seria mucho para explicar, para eso te recomiendo te des una buelta por el w3c solo pon asi en google "w3c" esto te enviara una pagina y ahi encontraras todo lo relacionado con css

tambien tenemos los selectores clase y de id, estos se refieren a los elementos a los que se les ha asignado un id o class, en teoria todos los elementos soportan nombre de clase y de id

para hacer un elemento con nombre clase hacemo s lo siguiente

codigo XHTML

<div id="mi_id">
contenido del div
</div>

y en el css hacemos referencia a el mediante un gato (#)

#mi_id {widht: 130 px;}

y para uno de clase es lo mismo, solo que en lugar de id ponemos class="mi_div"

Por buzu

163 de clabLevel

Envíale un mensaje privado Web

Los Angeles, California

Citar

Escrito el 03 Nov 2006 02:41 pm

Guay!! No habia descubierto lo de modificar CSS.

Otra duda: Para situar el div en un punto del html como?

gracias, tendre k mirarme todo eso con atencion. Cuando tenga mas dudas sigo en este post, muchas gracias!

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 03 Nov 2006 04:52 pm

Si lo quieres en un punto específico y asi la pantalla sea de 10000px por 10000px pero quieres que se mantenga allí, puedes usar la posición absoluta.

Código :

#div { position:absolute; width:100px; height:100px; top:200px; right:400px; }

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 12 Nov 2006 04:26 pm

NEO_JP escribió:

Si lo quieres en un punto específico y asi la pantalla sea de 10000px por 10000px pero quieres que se mantenga allí, puedes usar la posición absoluta.

Código :

#div { position:absolute; width:100px; height:100px; top:200px; right:400px; }

De nuevo lo mismo. Al poner ese codigo lo transformo en una capa y me pasa lo del principio. No puedo hacer un div y ponerlo en una posicion a mi gusto?

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Citar

Escrito el 12 Nov 2006 04:46 pm

...

ok, ok... *respira* Breath.. mi no estimado Breath, el problema PRINCIPAL de todo esto es que estas usando position:absolute para maquetar todo, lo cual no es nada malo, pero es muy dificil para los principiantes, y para usarlos se necesitan muchos conocimientos de posicionamiento y el tipo de posicionamientos relativos, absolutos y fijos.

Lo que te puedo recomendar es que migres a un maquetado con floats, del cual hay muchos articulos dentro de la sección de tutoriales de css y xhtml.

Y .... joder! Si es necesario usa imagenes como un niño de kinder para explicarte, si nadie te entiende asi, entonces eres un caso perdido.

Por NEO_JP

BOFH

5724 de clabLevel

13 tutoriales
12 articulos

Genero:Masculino Anime Bloggers Premio_Secretos Team Cristalab

Envíale un mensaje privado Web

Front-end Developer en Washington, DC

@neojp

Citar

Escrito el 12 Nov 2006 06:47 pm

Me leere lo del float, y una vez lo tenga todo en el coco lo pondre en práctica. En el caso que no lo consiga, ya sabeis donde vendre jeje. Saludos

Por Breath

110 de clabLevel

Genero:Masculino

Envíale un mensaje privado

Zpein

Optimizar web a IE y Firefox

Escribe una respuesta rapida