Sólo 3 capas (Divs PA) móviles dependiendo de la resolución

PedroGM · #1 (**permalink**) 28/10/2011, 13:44

Hola amigos.
Soy nuevo en el foro, aunque llevo bastante tiempo consultándolo para solucionar varios "marrones" ya que estoy empezando con el diseño web.
He buscado por los FAQ´s y varios "hilos" y no encuentro la solución a un problema que me lleva de cabeza.
Estoy haciendo una página con html y tengo incrustado el código CSS en el head, y hay tres capas (Divs PA), que dependiendo de la resolución con que vea la página se "mueven" del lugar donde las puse. Y eso que está todo dentro de una "capa contenedor".
Entendería que se moviera todo o nada, pero no entiendo por qué se "mueven" sólo estas tres.
Os adjunto todo el código del html con el CSS incrustado (en varias y cómodas entregas porque todo no me cabe en un mensaje

) para ver si podéis ayudarme con ambos problemas. Aunque el que más me importa es el de las "capas móviles".

Muchas gracias de antemano.

PedroGM · #2 (**permalink**) 28/10/2011, 13:45

Cita:

Iniciado por PedroGM

<!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>Pedro González Web: Portada</title>
<style type="text/css">

body {
background-image: url(../Im%C3%A1genes/FONDOS/fondo%20web%202%20gris.png);
background-repeat: no-repeat;

}
#contenedor {
position: relative;
width: 800px;
margin: 0 auto;
}

#diseño {
position:absolute;
width:861px;
height:602px;
z-index:2;
left: 0px;
top: 25px;
}

#menu {
position:absolute;
width:200px;
height:60px;
z-index:3;
left:391px;
top:30px;
}

#flash {
position:absolute;
width:367px;
height:257px;
z-index:4;
left: 28px;
top: 144px;
}

#contenido {
position:absolute;
width:397px;
height:303px;
z-index:5;
left: 423px;
top: 132px;
font-family: Verdana, Geneva, sans-serif;
font-weight: normal;
text-align: justify;
font-size: 12px;
}

#contverde {
position:absolute;
width:234px;
height:124px;
z-index:6;
left:137px;
top:475px;
text-align:justify;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
}

#contazul {
position:absolute;
width:234px;
height:124px;
z-index:7;
left:421px;
top:475px;
text-align:justify;
font-family:Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
}

#contfuxia {
position:absolute;
width:234px;
height:146px;
z-index:8;
left:703px;
top:475px;
text-align:justify;
font-family: Verdana, Geneva, sans-serif;
font-size:13px;
color:#FFF;
}

#copirrait {
position:absolute;
width:147px;
height:15px;
z-index:9;
left:635px;
top:624px;
font-family: Verdana, Geneva, sans-serif;
font-size: 9px;

}

a:link {
color: #FFF;
}
a:visited {
color: #b71a5d;
}
a:hover {
color: #000;
}
a:active {
color: #9F0;
}
</style>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
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];}}
}

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];}
}
</script>
</head>

<body onload="MM_preloadImages('../Imágenes/BOTONES/quien soy verde.png','../Imágenes/BOTONES/que hago verde.png','../Imágenes/BOTONES/contacta verde.png','../Imágenes/BOTONES/enlaces verde.png')">
<div id="contenedor">

<div id="copirrait">© Pedro González Web 2011</div>
<div id="flash">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="370" height="255" hspace="0" vspace="0" id="FlashID" title="presentación de imágenes de Index">
<param name="movie" value="../FLASH/pres index.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.0" />

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


<object data="../FLASH/pres index.swf" type="application/x-shockwave-flash" width="370" height="255" hspace="0" vspace="0">

<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="6.0.65.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" /></a></p>
</div>

</object>

</object>
</div>
<div id="diseño">
<img src="../Imágenes/FONDOS/diseño web index sin cuadro.png" alt="cuadro blanco, con el título de la página en la esquina superior izquierda y que tiene el borde naranja y las esquinas redondeadas" width="861" height="599" /></div>
<div id="menu"> <table width="447px" height="110px" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td width="82" height="58px" valign="bottom"><img src="../Imágenes/BOTONES/portada negrita.png" alt="estás en la página Portada" width="66" height="21" /></td>
<td width="95" valign="bottom"><a href="QUIEN SOY.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image18','','../Imágenes/BOTONES/quien soy verde.png',1)"><img src="../Imágenes/BOTONES/quien soy.png" alt="enlace a la página Quién soy" name="Image18"
width="75" height="19" vspace="1" border="0" id="Image18"quién="quién" soy="soy"></a></td>
<td width="98" valign="bottom"><a href="QUE HAGO.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image9','','../Imágenes/BOTONES/que hago verde.png',1)"><img src="../Imágenes/BOTONES/que hago.png" alt="Enlace a la página Qué hago" name="Image9" width="78" height="19" vspace="1" border="0" id="Image9" /></a><a href="QUÉ HAGO PLANTILLA.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage
('Image10','','../Imágenes/BOTONES/que hago verde.png',1)"></td>
<td width="94" valign="bottom"><a href="CONTACTA.html" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image8','','../Imágenes/BOTONES/contacta verde.png',1)"><img src="../Imágenes/BOTONES/contacta.png"
alt="enlace a la página Contacta" name="Image8" width="74" height="19" vspace="1" border="0" id="Image8"contacta="contacta"></a></td>
<td width="78" valign="bottom"><a href="ENLACES.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image10','','../Imágenes/BOTONES/enlaces verde.png',1)"><img src="../Imágenes/BOTONES/enlaces.png" alt="Enlace a la página Enlaces" name="Image10" width="58" height="19" border="0" id="Image10" /></a></td>
</tr>
<tr>
<td height="19" colspan="5" > </td>
</tr>
<tr align="center">
<td valign="top" ><img src="../Imágenes/BOTONES/flecha menu2.png" alt="esta flecha indica que estamos en la página portada" width="60" height="11" /></td>
<td > </td>
<td > </td>
<td > </td>
<td valign="top" > </td>
</tr>
</table>
</div>
<div id="contenido"><p class="contenido">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean aliquam condimentum dui quis suscipit. Sed egestas rutrum magna, vel molestie eros eleifend non. Mauris a iaculis nulla. In lobortis, diam a mattis vehicula, libero neque rutrum orci, et interdum nisl eros dictum dui. <br />
</p>
<p class="contenido">Maecenas ullamcorper, arcu sed auctor fermentum, justo sem tempus ante, id egestas magna neque sit amet tortor. Praesent posuere, nisi vel imperdiet molestie, massa velit lobortis magna, vel pharetra tortor libero sed leo. <br />
</p>
<p class="contenido">Nulla consequat imperdiet nibh, a porttitor leo scelerisque non. Proin nec ligula sodales erat volutpat semper eu ut dolor. Quisque luctus risus vel ante fringilla quis faucibus risus suscipit.</p>
<p class="contenido">Mauris vel velit orci, vitae consectetur arcu. </p>
</div></td>
</tr>
</table>
</div>
<div id="contverde">Sed dui augue, iaculis a mollis nec, elementum vitae dui. Nulla facilisi. Proin blandit scelerisque ante, vel congue mauris gravida et. Nam et sodales lectus. Etiam eget interdum tortor.<br /></div>
<div id="contazul">Vivamus nec nibh quis lacus auctor dictum quis et nunc. Integer tristique sodales gravida. Proin tempus fringilla augue, at imperdiet nunc volutpat eget. In sapien nibh, congue quis rhoncus eget, sodales sit amet quam.</div>
<div id="contfuxia"><table width="230" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">Donec nunc nulla, bibendum dapibus laoreet non, viverra et risus. Mauris viverra convallis dolor</td>
</tr>
<tr>
<td colspan="3" align="center"> </td>
</tr>
<tr>
<td align="center" width="90px"> </td>
<td colspan="2" align="center"><a href="mailto:[email protected]"><img src="../Imágenes/BOTONES/correo.png" alt="Símbolo de e-mail. Enlace al programa de correo electrónico" width="50" height="50" align="left" /></a></td>
</tr>
</table></div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</div>
</body>
</html>

PedroGM · #3 (**permalink**) 29/10/2011, 04:19

Cita:

Iniciado por PedroGM

Hola amigos.
Soy nuevo en el foro, aunque llevo bastante tiempo consultándolo para solucionar varios "marrones" ya que estoy empezando con el diseño web.
He buscado por los FAQ´s y varios "hilos" y no encuentro la solución a un problema que me lleva de cabeza.
Estoy haciendo una página con html y tengo incrustado el código CSS en el head, y hay tres capas (Divs PA), que dependiendo de la resolución con que vea la página se "mueven" del lugar donde las puse. Y eso que está todo dentro de una "capa contenedor".
Entendería que se moviera todo o nada, pero no entiendo por qué se "mueven" sólo estas tres.
Os adjunto todo el código del html con el CSS incrustado (en varias y cómodas entregas porque todo no me cabe en un mensaje

) para ver si podéis ayudarme.

Muchas gracias de antemano.

Perdón, que no lo había aclarado. Las tres capas que me dan problemas son:

div id="contverde", div id="contazul" y div id="contfuxia".

PedroGM · #4 (**permalink**) 29/10/2011, 05:44

Vaaaaaleeeee...
Ya lo he solucionado.
Revisando el código me he dado cuenta de "un pequeño error sin importancia". Simplemente los famosos tres DIVS "móviles" no estaban dentro del "contenedor". Qué hábil soy.

Ahora sólo me falta desincrustar el CSS y ponerlo en un documento a parte, que no lo consigo. Cuando lo hago así, hay elementos que no respetan el CSS. Ese es mi otro problema que os comentaba.