Problemas con Div PA

GatNegre · #1 (**permalink**) 15/06/2009, 11:04

Buenas, primero enhorabuena por el foro, es un referente.

estoy creando una web y primero hice el diseño en Fireworks. Bien, ahora esouy trabajando con Dreamweaver en él. Tengo un apartado donde quiero que halla un texto sobre el cuadrado que diseñé en Fw. Pues se me han presentado dos problemas.

el primero es que si hago una tabla para poner el texto automaticamente se me pone el texto de color gris y yo quiero que se vea el diseño que hice y aunque ponga que la celda no tenga color siempre me sale en ese color gris. Así que decidí hacer un Div Pa que siempre esté visible y punto.
El caso es que aquí esta el problema, la página esta diseñada para que el recuadro donde estará el texto (el Div Pa) esté centrada. Entonces a la hora de comprobar distintos tamaños de pantalla del navegador veo que el div pa esta quieto y toda la pagina se mueve lo que hace que se vea el texto por un lado y el resto por otro.

La pregunta es, ¿Cómo hago para que se quede en su sitio?, hago bien en hacer el div o era mejor con una tabla, si es asi como consigo que no tenga color de fondo y asi se vea el diseño?

Muchas gracias.

Pd. Uso el Dw Cs4

Saludos

Edito: Lo mismo me pasa a la hora de insertar un mapa de google

juaniquillo · #2 (**permalink**) 15/06/2009, 16:52

vamos por partes. Primero, puedes cambiar el color del texto con css. Segundo, para lo de las imagenes lo mejor es usar imágenes de fondo. Aquí explico como hacerlo en una tabla:

http://www.forosdelweb.com/f17/image...la-cs4-699317/

de igual modo se puede hacer en un div.

GatNegre · #3 (**permalink**) 16/06/2009, 05:06

Gracias por el enlace, ahi me has resueltos algunas dudas, pero se me presentan algunos problemas. Antes me confundi y no era el color de texto lo que no podia cambiar, sino el color de fondo para que sea trasparente.

Te explico la pagina como es:
Tengo un color de fondo, gris. Y en medio de la pagina hay un recuadro negro que sera donde poga el texto, el recuadro es un diseño de Fw, con un degradado y uno detalles segun la metafora de la pagina.
Entonces, hice lo de poner ese cuadro como imagen de fondo y bien, no queda mal pero se me sigue presentando el proble de que cuando muevo la pantalla ( haciendola grande, pequeña...) se me mueve todo y queda muy mal.
En otro apartado de la pagina se me presenta el mismo cuadro pero este es para contacto donde estara un formulario y un mapa de google, pongo el mapa de google y se ve bien y tal pero el div se queda fuera del cuadro negro, si tuviera la pagina posicionada a la izquierda no se ve el fallo pero es que tiene que ir en el centro. No se se me habre explicado bien.

Gracias por adelantado.

juaniquillo · #4 (**permalink**) 16/06/2009, 14:34

Pues puede ser que tienes un problema de centrado. ¿Puedes dejar un enlace a tu página para poder revisar el código? En su defecto coloca tu código aquí usando el botón HTML o el de HIGHLIGHT.

GatNegre · #5 (**permalink**) 16/06/2009, 15:27

Código HTML:

aqui tienes, gracias por echarle un ojo.

<head>
<title>gatnegrehistorial.jpg</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
td img {display: block;}#apDiv1 {
	position:absolute;
	width:660px;
	height:416px;
	z-index:1;
	left: 252px;
	top: 177px;
	visibility: visible;
}
#apDiv1 {
	color: #FFF;
}
#apDiv2 {
	position:absolute;
	width:673px;
	height:425px;
	z-index:2;
	left: 256px;
	top: 173px;
}
#apDiv3 {
	position:absolute;
	width:699px;
	height:448px;
	z-index:1;
	left: 238px;
	top: 162px;
}
body,td,th {
	color: #FFF;
}
.historial {
	background-attachment: fixed;
	background-image: url(imghisto/gatnegrehistorial_r3_c3.jpg);
	background-repeat: no-repeat;
	background-position: center center;
}
#apDiv4 {
	position:absolute;
	width:704px;
	height:453px;
	z-index:1;
	left: 240px;
	top: 163px;
}
</style>
<!--Fireworks CS3 Dreamweaver CS3 target.  Created Mon Jun 15 17:27:35 GMT+0200 2009-->
<script language="JavaScript1.2" type="text/javascript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->
</script>
</head>
<body bgcolor="#333333" onload="MM_preloadImages('imghisto/gatnegrehistorial_r5_c4_f2.jpg','imghisto/gatnegrehistorial_r5_c6_f2.jpg','imghisto/gatnegrehistorial_r5_c9_f2.jpg');">
<table width="900" border="0" align="center" cellpadding="0" cellspacing="0">
  <!-- fwtable fwsrc="historial.png" fwpage="Página 1" fwbase="gatnegrehistorial.jpg" fwstyle="Dreamweaver" fwdocid = "1968968003" fwnested="1" -->
  <tr>
    <td colspan="3"><strong><img name="gatnegrehistorial_r1_c1" src="imghisto/gatnegrehistorial_r1_c1.jpg" width="900" height="17" border="0" id="gatnegrehistorial_r1_c1" alt="" /></strong></td>
  </tr>
  <tr>
    <td rowspan="4"><strong><img name="gatnegrehistorial_r2_c1" src="imghisto/gatnegrehistorial_r2_c1.jpg" width="78" height="683" border="0" id="gatnegrehistorial_r2_c1" alt="" /></strong></td>
    <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="729">
      <tr>
        <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="729">
          <tr>
            <td><img name="gatnegrehistorial_r2_c2" src="imghisto/gatnegrehistorial_r2_c2.jpg" width="433" height="127" border="0" id="gatnegrehistorial_r2_c2" alt="" /></td>
            <td><img name="gatnegrehistorial_r2_c8" src="imghisto/gatnegrehistorial_r2_c8.jpg" width="296" height="127" border="0" id="gatnegrehistorial_r2_c8" alt="" /></td>
          </tr>
        </table></td>
      </tr>
      <tr>
        <td><table width="729" border="0" align="left" cellpadding="0" cellspacing="0" class="historial">
          <tr>
            <td><img name="gatnegrehistorial_r3_c2" src="imghisto/gatnegrehistorial_r3_c2.jpg" width="22" height="458" border="0" id="gatnegrehistorial_r3_c2" alt="" /></td>
            <td><div>
              <p>texto</p>
            </div></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
    <td rowspan="4"><img name="gatnegrehistorial_r2_c11" src="imghisto/gatnegrehistorial_r2_c11.jpg" width="93" height="683" border="0" id="gatnegrehistorial_r2_c11" alt="" /></td>
  </tr>
  <tr>
    <td height="24">&nbsp;</td>
  </tr>
  <tr>
    <td><table align="left" border="0" cellpadding="0" cellspacing="0" width="729">
      <tr>
        <td><img name="gatnegrehistorial_r5_c2" src="imghisto/gatnegrehistorial_r5_c2.jpg" width="95" height="34" border="0" id="gatnegrehistorial_r5_c2" alt="" /></td>
        <td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gatnegrehistorial_r5_c4','','imghisto/gatnegrehistorial_r5_c4_f2.jpg',1);"><img name="gatnegrehistorial_r5_c4" src="imghisto/gatnegrehistorial_r5_c4.jpg" width="119" height="34" border="0" id="gatnegrehistorial_r5_c4" alt="" /></a></td>
        <td><img name="gatnegrehistorial_r5_c5" src="imghisto/gatnegrehistorial_r5_c5.jpg" width="79" height="34" border="0" id="gatnegrehistorial_r5_c5" alt="" /></td>
        <td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gatnegrehistorial_r5_c6','','imghisto/gatnegrehistorial_r5_c6_f2.jpg',1);"><img name="gatnegrehistorial_r5_c6" src="imghisto/gatnegrehistorial_r5_c6.jpg" width="122" height="34" border="0" id="gatnegrehistorial_r5_c6" alt="" /></a></td>
        <td><img name="gatnegrehistorial_r5_c7" src="imghisto/gatnegrehistorial_r5_c7.jpg" width="76" height="34" border="0" id="gatnegrehistorial_r5_c7" alt="" /></td>
        <td><a href="javascript:;" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('gatnegrehistorial_r5_c9','','imghisto/gatnegrehistorial_r5_c9_f2.jpg',1);"><img name="gatnegrehistorial_r5_c9" src="imghisto/gatnegrehistorial_r5_c9.jpg" width="120" height="34" border="0" id="gatnegrehistorial_r5_c9" alt="" /></a></td>
        <td><img name="gatnegrehistorial_r5_c10" src="imghisto/gatnegrehistorial_r5_c10.jpg" width="118" height="34" border="0" id="gatnegrehistorial_r5_c10" alt="" /></td>
      </tr>
    </table></td>
  </tr>
  <tr>
    <td><img name="gatnegrehistorial_r6_c2" src="imghisto/gatnegrehistorial_r6_c2.jpg" width="729" height="47" border="0" id="gatnegrehistorial_r6_c2" alt="" /></td>
  </tr>
</table>
</body>
</html>

juaniquillo · #6 (**permalink**) 16/06/2009, 15:41

pues el problema ahora es que no puedo ver las imágenes. Deja una captura de pantalla y describe el problema con eso. Se nota que esta página fue hecha en FW y no en DW ya que le falta el DOCTYPE,