Problema con vista previa en Dreamweaver

rhadamanthys_87 · #1 (**permalink**) 01/06/2009, 21:44

Hola a todos, soy nuevo por esta comunidad y pues creo que estare muy seguido por aqui ya que me estoy iniciando en este mundo del diseño web.

Me encuentro realizando mi propio website en Dreamweaver Cs4. Todavia no me acostumbro muy bien al programa pero ahi la llevamos.

Estoy usando elementos PA para darle forma al template que hice en photoshop. Estuve peleado por que no podia centrar todo y hacer que se auto ajustara a la resolucion de cada pantalla (despues de horas lo he podido lograr)

Sin embargo a la hora de que le doy vista previa para ver como va el diseño, resulta que algunos elementos me salen fueran de su lugar.

No se si me de a entender, en vista Diseño todo me aparece bien colocado donde yo lo quiero, pero a la hora de darle vista previa estos me aparecen en otras posiciones distintas.

Tengo rato viendo mi codigo pero no me doy cuenta que es lo que anda mal, espero que alguien pueda darme una ayudadita con este problema.

Les dejo mi codigo por si necesitan verlo.

De antemano gracias por la ayuda.

Código HTML:

<style type="text/css">
<!--
body {
	background-color: #000;
	text-align:center;

}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF;
}

#Template {
	position:absolute;
	width:100%;
	height:100%;
	z-index:1;
}
#BoxRightTop {
	position:absolute;
	width:121px;
	height:115px;
	z-index:2;
	left: 80%;
	top: 51%;
}
#BoxRightBottom {
	position:absolute;
	width:105px;
	height:115px;
	z-index:3;
	left: 80%;
	top: 83%;
}
#BoxLeftTop {
	position:absolute;
	width:76px;
	height:115px;
	z-index:4;
	left: 67px;
	top: 51%;
}
#BoxLeftBottom {
	position:absolute;
	width:2px;
	height:115px;
	z-index:5;
	left: 67px;
	top: 83%;
}

-->
</style></head>
<body>
<div id="Template" align="center"><img src="Imagenes/Template.jpg" width="980" height="1500" align="middle"/></div>
<div id="BoxRightTop" align="center"><img src="Imagenes/Box_Left.gif" width="160" height="195" align="middle"/></div>
<div id="BoxRightBottom" align="center"><img src="Imagenes/Box_Left.gif" width="160" height="195" align="middle"/></div>
<div id="BoxLeftTop" align="center"><img src="Imagenes/Box_right.gif" width="162" height="193" align="middle"/></div>
<div id="BoxLeftBottom" align="center"><img src="Imagenes/Box_right.gif" width="162" height="193" align="middle"/></div>
</body>
</html>

WillxD · #2 (**permalink**) 01/06/2009, 23:39

Supongo que será porque en "vista diseño" del Dreamweaver no se ve a pantalla completa.

Yo no uso mucho la "vista diseño", lo recomendable es darle vista previa en algún navegador ( te recomiendo Mozilla Firefox).

Otra recomendación más:

Código:

<div id="BoxLeftBottom" align="center">

Lo que te resalté debe ir en tu CSS. Si lo quieres centrar a tu div debes poner

Código:

#BoxLeftBottom{
         margin:auto;
}

Salu2!

hades87 · #3 (**permalink**) 02/06/2009, 02:46

Tal como te comenta WillxD, lo mejor es visualizarla en algún navegador, yo optaría por Firefox de buenas a primeras y luego con IE para retocar.

Rhadamanthys87 · #4 (**permalink**) 02/06/2009, 10:48

Gracias por sus respuestas. He hecho lo que me recomiendan en sus post, sin embargo sigo teniendo el mismo problema.

Utilizo la vista Diseño para manejar los objetos, sin embargo siempre uso la vista previa en explorador para ver el resultado todo (utilizo siempre FireFox) y es cuando veo la vista en el explorador que todo sale movido del lugar donde lo coloque y donde quiero que se encuentre.

Les dejo unas imagenes para que vean a lo que me refiero:

Asi es como deberia de quedar y asi es como me lo muestra tanto la vista Diseño como la Vista en Vivo:

img155.imageshack.us/img155/9605/asisedeberiadever.jpg

Y asi es como me lo muestra FireFox y Explorer cuando lo veo en vista previa:

img197.imageshack.us/img197/6171/asinoquieroquesevea.jpg

Si a lo que se refieren es que me guie por la vista en el explorador, no seria muy tardado? no deberia verse igual tanto en vista diseño como en el explorador?+

Asi es como quedo mi codigo con sus consejos. Saludos.

Código:

<style type="text/css">
<!--
body {
	background-color: #000;
	text-align:center;

}
body,td,th {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10px;
	color: #FFF;
}

#Template {
	position:absolute;
	margin:auto;
	align="center";
	width:100%;
	height:100%;
	z-index:1;
}
#BoxRightTop {
	position:absolute;
	margin:auto;
	align="center";
	width:121px;
	height:115px;
	z-index:2;
	left: 80%;
	top: 377px;
}
#BoxRightBottom {
	position:absolute;
	margin:auto;
	align="center";
	width:105px;
	height:115px;
	z-index:3;
	left: 80%;
	top: 83%;
}
#BoxLeftTop {
	position:absolute;
	margin:auto;
	align="center";
	width:76px;
	height:115px;
	z-index:4;
	left: 67px;
	top: 381px;
}
#BoxLeftBottom {
	position:absolute;
	margin:auto;
	align="center";
	width:2px;
	height:115px;
	z-index:5;
	left: 67px;
	top: 586px;
}

-->
</style></head>
<body>
<div id="Template"><img src="Imagenes/Template.jpg" width="980" height="1500" align="middle"/></div>
<div id="BoxRightTop"><img src="Imagenes/Box_Left.gif" width="160" height="195" align="middle"/></div>
<div id="BoxRightBottom"><img src="Imagenes/Box_Left.gif" width="160" height="195" align="middle"/></div>
<div id="BoxLeftTop"><img src="Imagenes/Box_right.gif" width="162" height="193" align="middle"/></div>
<div id="BoxLeftBottom"><img src="Imagenes/Box_right.gif" width="162" height="193" align="middle"/></div>
</body>
</html>

hades87 · #5 (**permalink**) 02/06/2009, 13:50

Es raro la verdad, has visto que no tengas algún margin, padding o algo que te las empuje fuera?

Rhadamanthys87 · #6 (**permalink**) 02/06/2009, 16:30

No "hades87", ya borre todo el codigo y lo intente volver a hacer y sucede lo mismo.

Tal cual el codigo les he puesto, tal cual lo estoy usando :(

WillxD · #7 (**permalink**) 02/06/2009, 20:09

Yo creo que es porque estas usando position:absolute; (esto hace que no se vea bien en todas las resoluciones).

Lo recomendable es que uses "float". Por ejemplo le pongas un float:left; y si lo quieres "mover" el div usas "margin".

Te recomiendo busques más sobre los float y así te evitas esos problemas que causan al poner position:absolute;

Salu2

Rhadamanthys87 · #8 (**permalink**) 02/06/2009, 21:23

Al parecer lo he solucionado, no de la manera en que deberia de haberlo hecho pero se me ocurrio.

Tuve que utilizar un antiguo programa de creacion de paginas para darle todas las propiedas a esos elementos luego guarde el archivo y lo volvi a abrir pero ahora con el Dreamweaver y a quedo como deseaba. El codigo a cambiado muchisimo a como lo tenia antes, me gustaria que el que quisiera (ya que resolvi mi problema)pudiera verlo e intentar decirme cual fue el error.

De todas formas gracias a todos por su ayuda y "WillXD" investigare lo que sugieres para darme una idea de igual forma.

Gracias a todos.

Código HTML:

<style type="text/css">
<!--
BODY {
	font-family:"Arial";
	font-size:10;
	margin:0px;
	padding:0px;
	text-align:center;
	min-width:994px;
	background-color: #000;
		  }
		  
P {
		  font-family:"Arial"; 
		  font-size:10;
		  }
		  
FORM {
		  margin:0;
		  padding:0;
		  }
		  
#Contenedor {
		  text-align:left;
		  width:994px;
		  margin-left:auto;
		  margin-right:auto;
		  }
		  
body,td,th {
	font-size: 10px;
	color: #CCC;
}
#apDiv1 {
	position:absolute;
	width:516px;
	height:515px;
	z-index:1;
	left: 233px;
	top: 422px;
}
    -->
</style>
  </head>
<body>
    <div id="Contenedor">
      <div id="root" style="position:absolute;width:994px;height:1520px;">
        <div id="Template" style="position:absolute;left:14;top:0;width:980;height:1500;"><img src="Imagenes/Template.jpg" width="980" 			height="1500" alt=""></div>        
        <div id="BoxRightBottom" style="position:absolute; left:46px; top:572px; width:160; height:195;"><img src="Imagenes/Box_right.gif" width="162" height="193" alt=""></div>       
        <div id="BoxLeftBottom" style="position:absolute; left:778px; top:577px; width:160; height:195;"><img src="Imagenes/Box_Left.gif" width="160" height="195" alt=""></div>       
        <div id="BoxRightTop" style="position:absolute; left:45px; top:365px; width:160; height:195;"><img src="Imagenes/Box_right.gif" width="162" height="193" alt=""></div>        
          <div id="BoxLeftTop" style="position:absolute; left:777px; top:366px; width:160; height:195;"><img src="Imagenes/Box_Left.gif" width="160" height="195" alt=""></div>
          <div id="apDiv1">gggggggggggggggggggggggggggggggggggggggggggggg</div>
      </div>
  </div>
</body>
</html>