Problema con maquetacion urgente

GidHarvey · #1 (**permalink**) 09/05/2009, 11:31

Buenas Tardes.
Soy nuevo en el foro, y ya eh visto varios post en los que dan ayuda, pues ahora me gustaria que me ayudaran, porfavor.

Mi problema es el siguiente, estoy maquetando una pagina web en dreamweaver cs4, el problema que tengo es que al momento de poner imagen en un Div PA se ve bien con las posiciones que le doy en el dreamweaver, pero al momento de visualizarla en el navegador, no se ajusta en donde tiene que quedar, es decir queda donde se veia en el dreamweaver, y asi me pasa con todos los Div PA que pongo, alguien me puede decir que solucion le puedo dar a estos Div PA, aqui pongo las capturas de lo que digo mas el codigo, alomejor tengo alguna configuracion mala, o me falta darle alguna para que esto quede bien, espero alguna respuesta amigos. saludos ATTe GidHarvey

CAPTURA DREAMWEAVER PANTALLA DISE~O

img8.imageshack.us/img8/3115/capdw.jpg

CAPTURA VISUALIZADA EN EL NAVEGADOR

img24.imageshack.us/img24/3698/capnav.jpg

EDITADO PARA TEXTO:

CAPTURA DREAMWEAVER

img368.imageshack.us/img368/3115/capdw.jpg

CAPTURA NAVEGADOR

img154.imageshack.us/img154/3698/capnav.jpg

Código:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AMW: American Woods</title>
<style type="text/css">
<!--
#contenido {
	background-color: #FFF;
	margin-right: auto;
	margin-left: auto;
	width: 980px;
	height: 800px;
}
#contenido #barraheader {
	background-color: #3a4f6c;
	height: 12px;
	width: 980px;
}
#contenido #header #col1 {
	float: left;
	height: 73px;
	width: 192px;
	padding-left: 42px;
	padding-top: 5px;
}
#contenido #header #col2 {
	height: 45px;
	width: 680px;
	float: right;
	padding-right: 45px;
	padding-bottom: 33px;
}
#informacion {
	background-image: url(Images/mainbackground.jpg);
	background-repeat: no-repeat;
	clear: both;
	height: 255px;
}
#contenido #texto {
	height: 345px;
}
#contenido #texto #col3 {
	float: left;
	width: 506px;
	padding-left: 42px;
	padding-top: 41px;
}
.estilo2 {
	font-family: "Myriad Pro";
	font-size: 29px;
	color: #3a4f6c;
}
#contenido #texto #col3 #loremipsu {
	font-family: "standard 07_53";
	font-size: 8px;
	color: #000;
	height: 55px;
	width: 506px;
	background-color: #e0e9f0;
}
.estilo1 {
	margin-left: 17px;
}
#contenido #texto #col3 #loremipsu #welcome {
	height: 79px;
}
#contenido #texto #col4 {
	float: right;
}
#contenido #informacion #foto1 {
	float: left;
	height: 225px;
	width: 893px;
	margin-left: 42px;
	margin-top: 10px;
}
#contenido #footer {
	background-color: #3a4f6c;
	font-family: "standard 07_53";
	font-size: xx-small;
	color: #FFF;
	height: 107px;
	clear: both;
	width: 980px;
}
#contenido #footer #contact {
	padding-top: 23px;
	padding-left: 45px;
	padding-bottom: 25px;
	font-family: "standard 07_53";
	font-size: 8px;
	color: #FFF;
}
#contenido #footer #privacidad {
	text-align: center;
	font-family: "standard 07_53";
	font-size: 8px;
	color: #FFF;
}
-->
</style>
<script type="text/javascript">
<!--
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];}}
}

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_nbGroup(event, grpName) { //v6.0
  var i,img,nbArr,args=MM_nbGroup.arguments;
  if (event == "init" && args.length > 2) {
    if ((img = MM_findObj(args[2])) != null && !img.MM_init) {
      img.MM_init = true; img.MM_up = args[3]; img.MM_dn = img.src;
      if ((nbArr = document[grpName]) == null) nbArr = document[grpName] = new Array();
      nbArr[nbArr.length] = img;
      for (i=4; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
        if (!img.MM_up) img.MM_up = img.src;
        img.src = img.MM_dn = args[i+1];
        nbArr[nbArr.length] = img;
    } }
  } else if (event == "over") {
    document.MM_nbOver = nbArr = new Array();
    for (i=1; i < args.length-1; i+=3) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = (img.MM_dn && args[i+2]) ? args[i+2] : ((args[i+1])? args[i+1] : img.MM_up);
      nbArr[nbArr.length] = img;
    }
  } else if (event == "out" ) {
    for (i=0; i < document.MM_nbOver.length; i++) {
      img = document.MM_nbOver[i]; img.src = (img.MM_dn) ? img.MM_dn : img.MM_up; }
  } else if (event == "down") {
    nbArr = document[grpName];
    if (nbArr)
      for (i=0; i < nbArr.length; i++) { img=nbArr[i]; img.src = img.MM_up; img.MM_dn = 0; }
    document[grpName] = nbArr = new Array();
    for (i=2; i < args.length-1; i+=2) if ((img = MM_findObj(args[i])) != null) {
      if (!img.MM_up) img.MM_up = img.src;
      img.src = img.MM_dn = (args[i+1])? args[i+1] : img.MM_up;
      nbArr[nbArr.length] = img;
  } }
}
//-->
</script>
</head>

<body onload="MM_preloadImages('Images/boton_1_off.jpg','Images/boton_1_on.jpg','Images/boton_2_off.jpg','Images/boton_2_on.jpg','Images/boton_3_off.jpg','Images/boton_3_on.jpg','Images/boton_4_off.jpg','Images/boton_4_on.jpg','Images/boton_5_off.jpg','Images/boton_5_on.jpg')">
<div id="contenido">
  <div id="barraheader"></div>
  <div id="header">
<div id="col1"><img src="Images/logo_amw.png" width="192" height="73" /></div>
    <div id="col2"><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','boton1','Images/boton_1_off.jpg',1)" onmouseover="MM_nbGroup('over','boton1','Images/boton_1_on.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/boton_1_off.jpg" alt="" name="boton1" width="136" height="45" border="0" id="boton1" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','boton2','Images/boton_2_off.jpg',1)" onmouseover="MM_nbGroup('over','boton2','Images/boton_2_on.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/boton_2_off.jpg" alt="" name="boton2" width="136" height="45" border="0" id="boton2" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','boton3','Images/boton_3_off.jpg',1)" onmouseover="MM_nbGroup('over','boton3','Images/boton_3_on.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/boton_3_off.jpg" alt="" name="boton3" width="136" height="45" border="0" id="boton3" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','boton4','Images/boton_4_off.jpg',1)" onmouseover="MM_nbGroup('over','boton4','Images/boton_4_on.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/boton_4_off.jpg" alt="" name="boton4" width="136" height="45" border="0" id="boton4" onload="" /></a><a href="javascript:;" target="_top" onclick="MM_nbGroup('down','group1','boton5','Images/boton_5_off.jpg',1)" onmouseover="MM_nbGroup('over','boton5','Images/boton_5_on.jpg','',1)" onmouseout="MM_nbGroup('out')"><img src="Images/boton_5_off.jpg" alt="" name="boton5" width="136" height="45" border="0" id="boton5" onload="" /></a></div>
  </div>
  <div id="informacion">
    <div id="foto1"><img src="Images/Galeria1.jpg" width="278" height="225" /><img src="Images/Galeria2.jpg" width="277" height="225" hspace="30" /><img src="Images/Galeria3.jpg" width="278" height="225" /></div>
  </div>
  <div id="texto">
<div id="col3"><span class="estilo2">BIENVENIDOS</span>
<div id="loremipsu">
  <p class="estilo1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam posuere enim vel eros. Etiam
       <br />mauris metus, dignissim vitae, pharetra et, vestibulum id.</p>
    <div id="welcome">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla libero. Curabitur nec nisl non ipsum porttitor dapibus. Cras gravida tincidunt nibh. Mauris bibendum. Maecenas vel neque. Proin mi enim, porttitor quis, imperdiet in, sollicitudin ut, nisi. Morbi leo sapien, pellentesque non, pharetra at, scelerisque vel, libero. Vestibulum lorem purus, sagittis a, laoreet non, porttitor at, eros. Donec lacinia auctor eros. Nullam vel neque eu augue porta lobortis. Quisque tristique bibendum lorem. In sit amet purus. Nam enim lorem, auctor eu, accumsan id, molestie vitae, lacus.</div>
    <p>Leer más &gt;&gt;</p>
  </div>
</div>
    <div id="col4">Colocar aquí el contenido para  id "col4"</div>
    <p>&nbsp;</p>
  </div>
<div id="footer">
  <div id="contact">Americanwoods S.A, de C.V.<br />
    TEL:(52) 55 5575 2750 (MEXICO) / (562) 206 1619 (CHILE)<br />
    amw.cl - [email protected] - triplay.com.mx</div>
  <div id="privacidad">AMERICANWOODS © 2009.  -  PRIVACIDAD</div>
</div>
</div>
</body>
</html>

pateketrueke · #2 (**permalink**) 09/05/2009, 12:15

mmm... creo que estas equivocándote de foro

este es el foro de programación PHP, y por ningún motivo se hacen trabajos, para eso esta el foro de ofertas de empleo (perdón si me equivoco)

lo que tu necesitas es mas HTML y CSS, ya que no tienes un problema de programación PHP ... ¿o me equivoco??

si estas de acuerdo, espera a que muevan tu tema al foro correcto, suerte!

GidHarvey · #3 (**permalink**) 09/05/2009, 12:33

necesito que me ayuden con los problemas que tengo que dice hay, no estoy pidiendo que me hagan el trabajo, solo necesito que me den alguna ayuda, de por que me ocurre lo que explico, que seria, en que al poner imagenes, y darle los valores de posicion, no quedan donde las doy al verlas en el navegador, ya que como la pagina esta centrada no queda donde yo lo pongo, si no que como se ve en la venta dise~o de DW, es decir le doy los valores a mis imagenes se ven bien en dreamweaver pero al momento de visualizarla en el navegador (firefox) no se ven donde tienen que quedar, quiero saber si esto es por que la pagina esta centrada, si es asi que tengo que hacer para que no me pase eso al momento de poner imagenes, o como lo tendria que hacer para que no se muevan, esto lo puedo hacer con Div PA? si es que se puede tambien me pasa lo mismo, alomejor estoy haciendo algo mal en la configuracion de la pagina? ayuda porfavor.

pateketrueke · #4 (**permalink**) 09/05/2009, 12:41

el problema, es depender mucho de los programas de diseño.... seguramente algún gurú de HTML y CSS, haría este trabajo en 5 mins. sin usar mas que el Bloc de Notas

me imagino que tu código es bastante, y creeme, esta difícil que alguien se tome la libertad de leerlo, e irte diciendo paso-a-paso como repararlo, ya que son muchos factores, la clara dependencia de tablas, o una posible divitis...

lo mejor, es que lo comiences a hacer de nuevo, y de preferencia sin usar DW ... así, controlas al 100% el HTML generado, o también, maqueta tu HTML ... y solo dedicate a la hoja de estilos

de verdad, no es fácil, digo... vienes diciendo tengo "estos problemas" y supongo que quieres que adivinemos el HTML/CSS al respecto, cierto??

(no dejo de pensar que este no es el foro adecuado para tu problema)

GidHarvey · #5 (**permalink**) 09/05/2009, 13:01

muchas gracias por tus palabras, creo que no me explique, lo que necesito saber, es por que al poner un Div PA en el dreamweaver se ve bien con las posiciones que le doy, pero al momento de visualizarlo en el navegador aparece en otro lugar nada que ver como se veia en el dreamweaver, esto pasa por que la apgina esta centrada, cuales serian los problemas, yo creo que alguien ya abra pasado por esto, pondre el codigo para que lo verifiquen alomejor tengo algun problema saludos.

GatorV · #6 (**permalink**) 09/05/2009, 13:13

Tema trasladado desde PHP

GidHarvey · #7 (**permalink**) 10/05/2009, 06:06

edite mi problema que tenia para que fuera mas al grano, espero que alguien me ayude, tambien puse algunas capturas para que vieran lo que sucede, estare esperando alguna respuesta, saludos.

juaniquillo · #8 (**permalink**) 10/05/2009, 08:36

Creo que tu problema tiene que ver con el hecho de que estás usando un layer (divs posicionados absolutamente) para la segunda foto. Lo mejor es que uses un float como con las otras.

GidHarvey · #9 (**permalink**) 10/05/2009, 09:10

y que valores le tendria que dar para que me quede al centro de esas 2, ya que a la de la izquierda le tengo float: left y a la de la derecha float: right como le doy un float a esa imagen que esta en el centro? saludos estare esperando alguna respuesta, muchas gracias de antemano

juaniquillo · #10 (**permalink**) 10/05/2009, 10:36

en tu css, en la regla que dice:

Código css:

Ver original#contenido #informacion #foto2 {
    height: 225px;
    width: 277px;
    left: 331px;
    position: absolute;
    padding-top: 9px;
    padding-left: 31px;
}

cambialo por:

Código css:

Ver original#contenido #informacion #foto2 {
    height: 225px;
    width: 277px;
    left: 331px;
    float: left;
    padding-top: 9px;
    padding-left: 31px;
}

DW es muy bueno para tratar el CSS, pero yo te aconsejo que aprendas lo básico de CSS porque así estás más en control de tus layouts.

Saludos.

GidHarvey · #11 (**permalink**) 11/05/2009, 03:27

Hola Juaniquillo, ya lo arregle todo, ya termine la maquetacion, era solo cosa de el orden que estaba llevando con los las etiqueta div, era solo eso, sin desmerecer lo que hiciste con el codigo que tambien me sirvio, muchas gracias, espero que a alguien le sirva la ayuda que pedi, saludos.