[Dreamweaver 8] Problema plantilla

rhdbiondi · #1 (**permalink**) 03/05/2010, 11:08

Hola, buenas tardes comunidad, recien encontre este foro para poder explayar sobre mi error que vengo acarriando al crear la plantilla sobre photoshop y exportandola a dreamweaver.
Antes que nada disculpen si este tema ya esta explicado es que recien encontre el foro y me lo pondre a leer mas tarde cuando tenga un poco de tiempo.

Bueno mi error es el siguiente:

Creo un template en photoshop cs3 de 0 para usarlo en dreamweaver, despues hago los sectores y lo guardo. Cuando lo monto en el dreamweaver, Centro la imagen osea mi template. le pongo fondo, le creo una capa donde iria el contenido y dentro de ella una region editable para hacerlo directamente un TEMPLATE.
Pero cosa que cuando escribo sobre la region editable y lo previsualizo, la capa se me corre y nunca esta en el centro, osea no se cual es mi error y lo vengo trayendo desde hace tiempo y siempre tengo que alinear todo a la izquierda y no me gusta para nada.
Aca dejo unas fotos del problemita.

Abro dream, coloco imagen, centro, creo capa y region editable

Contenido

Y asi se ve.

Desde ya muchas gracias.!

pcexpansion · #2 (**permalink**) 04/05/2010, 02:34

El problema es de la capa, si la tienes en posición absoluta, se pone en esa posición. Cambialá a relativa y crea un contenedor con la posición que quieras, pones la capa dentro del contenedor y esta estará por encima pero ajustada al mismo.

juaniquillo · #3 (**permalink**) 04/05/2010, 06:56

Necesitas entender un poco el concepto de divs posicionados absolutamente. Ese div está posicionado con relación al body. Puedes crear un contenedor del mismo tamaño de la imagen como dice pcexpansion y darle posición relativa y centrarlo usando CSS (magin: 0 auto;). Una vez haces esto puedes posicionar tu div absoluto con relación a ese contenedor.

Otra cosa, no te dejes llevar mucho por la vista de diseño en DW, y menos usando divs absolutamente posicionados.

rhdbiondi · #4 (**permalink**) 04/05/2010, 09:09

Cita:

Iniciado por pcexpansion

El problema es de la capa, si la tienes en posición absoluta, se pone en esa posición. Cambialá a relativa y crea un contenedor con la posición que quieras, pones la capa dentro del contenedor y esta estará por encima pero ajustada al mismo.

Ok, vere eso

Cita:

Iniciado por juaniquillo

Necesitas entender un poco el concepto de divs posicionados absolutamente. Ese div está posicionado con relación al body. Puedes crear un contenedor del mismo tamaño de la imagen como dice pcexpansion y darle posición relativa y centrarlo usando CSS (magin: 0 auto;). Una vez haces esto puedes posicionar tu div absoluto con relación a ese contenedor.

Otra cosa, no te dejes llevar mucho por la vista de diseño en DW, y menos usando divs absolutamente posicionados.

muchas gracias.

Poruq esinceramente eso no me lo enseñaron ahora me ponde a ver manuales conrespecto a eso porque sinceramente no se como hacerlo.
Pero ya se como buscar y se los agradesco.

Muchas gracias.
Atte. Lucas.

juaniquillo · #5 (**permalink**) 04/05/2010, 09:40

si dejas un enlace a tu página o el código html/css te podremos ayudar mejor.

rhdbiondi · #6 (**permalink**) 04/05/2010, 09:48

Cita:

Iniciado por juaniquillo

si dejas un enlace a tu página o el código html/css te podremos ayudar mejor.

www.lbiondi.tk

sin dominio es http://lbiondi.zxq.net/

la codificacion del template es

Cita:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html>
<head>

<title>NegroSAMA Porfolio</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

</style>

</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">

<div id="Layer1"></div>
<table id="Tabla_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../images/index_01.gif" width="1024" height="178" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/index_02.gif" alt="" width="1024" height="61" border="0" usemap="#Map"></td>
</tr>
<tr>
<td>
<img src="../images/index_03.gif" width="1024" height="529" alt=""></td>
</tr>
</table>


<map name="Map"><area shape="rect" coords="48,15,145,50" href="../index.html">
<area shape="rect" coords="160,15,280,48" href="../firmas.html">
<area shape="rect" coords="294,17,425,49" href="../fondos.html">
<area shape="rect" coords="452,13,628,51" href="../contacto.html">
</map></body>
</html>

porque yo le intente mandar una tabla y es lo mismo, porque es algo que nunca me enseñaron y sinceramente no sabia como resolverlo ahora es cuestion de investigar y empesar a tocar.

Gracias.
Atte. Lucas.

juaniquillo · #7 (**permalink**) 04/05/2010, 11:24

La forma mas fácil de arreglarlo sería hacer poner un contenedor div fuera de tu tabla:

Código HTML:

Ver original<div class="contenedor">
  <table id="Tabla_01" width="1024" height="768" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td><img src="http://www.forosdelweb.com/f17/images/index_01.gif" width="1024" height="178" alt=""></td>
    </tr>
    <tr>
      <td><img src="http://www.forosdelweb.com/f17/images/index_02.gif" alt="" width="1024" height="61" border="0" usemap="#Map"></td>
    </tr>
    <tr>
      <td><img src="http://www.forosdelweb.com/f17/images/index_03.gif" width="1024" height="529" alt=""></td>
    </tr>
  </table>
</div>

Le he puesto la clase de contenedor para poder añadirle CSS. Ahora en tu CSS puedes agregar esta nueva regla:

Código CSS:

Ver original.contenedor{
  width:1024 px;
  margin:0 auto;
  position:relative;
}

Una vez hagas esto podrás acomodar el layer donde quieras. Como te dije arriba, no uses la vista de diseño de DW, usa un navegador o varios como referencia.

Espero que te funcione.

rhdbiondi · #8 (**permalink**) 04/05/2010, 16:43

muchisimas gracias, ahora me tengo que meter de lleno a lectura de codigo, siempre me base en lo que se vehia pero no por dentro. Gracias.!