Divs que se mueven

Gabiboss · #1 (**permalink**) 22/08/2011, 12:35

Hola a todos, el problema que tengo es el siguiente he creado mi web a base de divs, en mi pc se ve todo centrado pero cuando cojo los archivos y los paso al portatil los divs no estan en el mismo sitio. Esto porque pasa?? y como lo puedo solucionar???.

Gracias

Batan · #2 (**permalink**) 22/08/2011, 17:02

Seguramente no este bien maquetado ni bien definidos los estilos.
Problemas como el tuyo pueden deberse a que dejas que los DIV esten sueltos, osea sin una capa padre que los contenga.
Tambien puede deberse a que usas las propiedades position: absolute ya que esta posiciona los elemento en relación al cuerpo HTML, y produce errores.

En tal caso podrias poner tu código para más ayuda.
Saludos

Gabiboss · #3 (**permalink**) 23/08/2011, 14:51

Gracias x contestar Batan, tal como dices he dejado los divs sueltos , sin capa padre..
Hay alguna manera de integrarla ahora, o alguna manera de solucionarlo sin tener que empezar de nuevo??? Y en el caso de tener que hacerlo como debo hacerlo adecuadamente..

Gracias.

Codigo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>

<style type="text/css">
body {
background-color: #c90000;
}
#apDiv1 {
position:absolute;
left:208px;
top:7px;
width:1025px;
height:766px;
z-index:1;

}
#apDiv3 { position:absolute;
left:595px;
top:645px;
width:66px;
height:20px;
z-index:2;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
color: #FFF;
font-size: 13px;
}
#apDiv4 { position:absolute;
left:696px;
top:645px;
width:146px;
height:20px;
z-index:3;
color: #FFF;
font-size: 13px;
font-weight: bold;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
#apDiv5 { position:absolute;
left:852px;
top:645px;
width:66px;
height:20px;
z-index:4;
color: #FFF;
font-size: 13px;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
}
#apDiv2 {
position:absolute;
left:511px;
top:645px;
width:66px;
height:20px;
z-index:2;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight: bold;
color: #FFF;
font-size: 13px;
}
#apDiv6 {
position:absolute;
left:109px;
top:14px;
width:220px;
height:1px;
z-index:5;
}
#apDiv7 {
position:absolute;
left:139px;
top:1px;
width:1140px;
height:1749px;
z-index:5;
}
#apDiv8 {
position:absolute;
left:208px;
top:4px;
width:1050px;
height:800px;
z-index:5;
}
a:link {
color: #FFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
#apDiv9 {
position:absolute;
left:210px;
top:8px;
width:20px;
height:25px;
z-index:6;
}
</style>
<script src="js/jquery.js" type="text/javascript"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
</head>

<body>

<div id="apDiv1"><img src="images/untitled.jpg" width="1025" height="766" /></div>
<div id="apDiv3"><a href="productos.html">PRODUCTOS</a></div>
<div id="apDiv4">COMERCIAL IBENSE</div>
<div id="apDiv5"><a href="contacto2.html">CONTACTA</a></div>
<div id="apDiv2"><a href="trayectoria.html">EMPRESA</a></div>

<div id="apDiv8">
<object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1050" height="800">
<param name="movie" value="images/Dicar.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="images/Dicar.swf" width="1050" height="800">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
</div>

</object>

</object>
</div>
<div id="apDiv9">
<object id="FlashID2" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="143" height="99">
<param name="movie" value="images/boton_sonido_simple.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="8.0.35.0" />

<param name="expressinstall" value="Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="images/boton_sonido_simple.swf" width="143" height="99">

<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<param name="swfversion" value="8.0.35.0" />
<param name="expressinstall" value="Scripts/expressInstall.swf" />

<div>
<h4>El contenido de esta página requiere una versión más reciente de Adobe Flash Player.</h4>
<p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Obtener Adobe Flash Player" width="112" height="33" /></a></p>
</div>

</object>

</object>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#apDiv8").delay(30000).fadeOut("slow");
});
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID2");
</script>
</body>
</html>

Batan · #4 (**permalink**) 24/08/2011, 00:47

Hay mucha desorden, conseguir lo que pides será un poco complicado, pero para empezar

Cita:

<div id="apDiv1"><img src="images/untitled.jpg" width="1025" height="766" /></div>
<div id="apDiv3"><a href="productos.html">PRODUCTOS</a></div>
<div id="apDiv4">COMERCIAL IBENSE</div>
<div id="apDiv5"><a href="contacto2.html">CONTACTA</a></div>
<div id="apDiv2"><a href="trayectoria.html">EMPRESA</a></div>

Este "menu" no deberias posicionarlo con position:absolute.
Metelo en una div y dale valores como float:left a cada div de dentro para que se alineen a la izquierda, por supuesto respeta el ancho que le des tanto al div general como a los div de dentro.

Código HTML:

Ver original<div id="apgeneral">
<div id="apDiv1"><img src="images/untitled.jpg" width="1025" height="766" /></div>
<div id="apDiv3"><a href="productos.html">PRODUCTOS</a></div>
<div id="apDiv4">COMERCIAL IBENSE</div>
<div id="apDiv5"><a href="contacto2.html">CONTACTA</a></div>
<div id="apDiv2"><a href="trayectoria.html">EMPRESA</a></div>
</div>

Para los demás seria mas o menos como eso. Crear un DIV contenedor y alinear los div de dentro con float.
Si fuera tu me creo otro fichero claro para hacer pruebas.

Pero yo lo haria desde el principio, maquetarlo bien y darle los estilos adecuados.
Saludos

Gabiboss · #5 (**permalink**) 24/08/2011, 12:17

Gracias Batan voy probando lo que me dices a ver que tal