Spry menu se descoloca cuando cambio de pantalla
Buenas tardes. Estoy haciendo una web ya la tengo colgada pero ahora quiero que se me centre en todas las pantallas por eso estoy rehaciendola. Mi problema llega cuando inserto un menú spry vertical que debe aparecer dentro de la imagen. No consigo hacer que se mueva con el resto de la pagina y se me descoloca. Please ayuda. Dejo el código a ver si me pueden ayudar. Gracias.
<!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>
<link href="estilos.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv1 {
position: absolute;
width: 387px;
height: 334;
z-index: 1;
left: 708px;
top: 17px;
visibility: visible;
}
#apDiv2 {
position: absolute;
left: 81px;
top: 476px;
z-index: 2;
}
#apDiv3 {
position: absolute;
left: 81px;
top: 734px;
z-index: 2;
background-color: #000000;
visibility: visible;
color: #FFF;
font-family: Calibri;
font-size: 24px;
font-weight: bold;
}
#productos {
font-family: Calibri;
font-size: 18px;
color: #FFF;
font-weight: bold;
}
#apDiv4 {
position: absolute;
left: 78px;
top: 174px;
width: 193px;
height: 200px;
z-index: 2;
}
</style>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#apDiv5 {
position: absolute;
z-index: 2;
left: 665px;
top: 16px;
}
#apDiv6 {
position: absolute;
z-index: 3;
left: 1098px;
top: 18px;
}
#apDiv7 {
position: absolute;
width: 200px;
height: 115px;
z-index: 1;
top: 208px;
left: 79px;
float: left;
}
</style>
<link href="SpryAssets/SpryMenuBarVertical.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
</head>
<body>
<div class="container">
<div id="apDiv7">
<ul id="MenuBar2" class="MenuBarVertical">
<li><a class="MenuBarItemSubmenu" href="#">Elemento 1</a>
<ul>
<li><a href="#">Elemento 1.1</a></li>
<li><a href="#">Elemento 1.2</a></li>
<li><a href="#">Elemento 1.3</a></li>
</ul>
</li>
<li><a href="#">Elemento 2</a></li>
<li><a class="MenuBarItemSubmenu" href="#">Elemento 3</a>
<ul>
<li><a class="MenuBarItemSubmenu" href="#">Elemento 3.1</a>
<ul>
<li><a href="#">Elemento 3.1.1</a></li>
<li><a href="#">Elemento 3.1.2</a></li>
</ul>
</li>
<li><a href="#">Elemento 3.2</a></li>
<li><a href="#">Elemento 3.3</a></li>
</ul>
</li>
<li><a href="#">Elemento 4</a></li>
</ul>
</div>
<div class="header">
<div id="apDiv5"><img src="Imagenes/Empresa/casita.jpg" alt="inicio" width="41" height="41" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="rect" coords="3,1,37,48" href="index.html" />
</map>
</div>
<div id="apDiv1">
<ul id="MenuBar1" class="MenuBarHorizontal">
<li><a href="empresa">Empresa</a> </li>
<li><a href="investigacion">Investigación</a></li>
<li><a href="noticias.html">Noticias</a> </li>
<li><a href="consultascontacto.html">Consultas y Contacto</a></li>
</ul></div>
<img src="Imagenes/Empresa/cabezera copia.jpg" width="1136" height="106" alt="" />
<div id="apDiv6"><img src="Imagenes/Empresa/Boton ingles.jpg" width="40" height="38" usemap="#Map2" border="0" />
<map name="Map2" id="Map2">
<area shape="rect" coords="1,2,41,36" href="enfruferkolor.html" />
</map>
</div>
<img src="Imagenes/2 fructi/fructificacion.jpg" width="1136" height="334" alt="fructificacion" />
</div>
<div class="sidebar1">
<div id="sello"><img src="Imagenes/2 fructi/sello fruc.jpg" width="89" height="92" /></div><p></p>
<p> </p>
<div id="productos"><img src="Imagenes/Empresa/Productos.jpg" width="117" height="31" alt="productos" />
<p></p>
</div>
<ul class="nav">
<li><a href="#">Fertraz Fruit</a></li>
<li><a href="#">Ferkolor</a></li>
</ul>
<p> </p>
<!-- end .sidebar1 --></div>
<div class="content">
<h1><img src="Imagenes/2 fructi/FERKOLOR.jpg" width="557" height="63" alt="Ferkolor" /></h1>
<p>Para quitar los estilos en línea, asegúrese de que el panel Estilos CSS está configurado como Actual. Seleccione la imagen y, en la sección Propiedades del panel Estilos CSS, haga clic con el botón derecho del ratón y elimine las propiedades de visualización y de fondo. (Por supuesto que siempre...
