buenas, acudo aca debido a que ya me he cansado de intentar solucionarlo por mi cuenta, ante lo evidente de lo novato que soy pues no veo otra salida.
estoy haciendo una web y cuando reduzco el tamaño de la ventana algunos elementos se descuadran total mente, mas especificamente una division llamada #content que se monta sobre otra, aqui coloco tanto el codigo html como el CSS
Código HTML:
<!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>
<title>UEMPPAT Aragua - Servicios Agrarios, Planes y Misiones, Información acerca de recaudos para tramites, Contacto con la Institución</title>
<meta name="Descripcion" content="Página principal de La Unidad Estadal del Ministerio del Poder Popular para la Agricultura y Tierras. ">
<script src="js/jquery-1-2-6.js" type="text/javascript"></script>
<script src="js/ajax.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/menu.css" />
</head>
<body bgcolor=A4BC40>
<div id="contenedor">
<div id="header"><img src="imagenes/logo_gobierno.png" alt="" title="logo_gobierno" width="990" height="62" /></div>
<div id="header"><img src="imagenes/memmat.png" alt="" title="memmat" width="995" height="160" /></div>
<div id="menu">
<ul id="nav">
<li><a href="inicioUEMPPAT1.html" class="ajax"> Inicio |</a></li>
<li><a href="#"> UEMPPAT ARAGUA |</a>
<ul class="submenu">
<li><a href="quienessomos.php" class="ajax">Quienes Somos</a></li>
<li><a href="#" class="ajax">Misión</a></li>
<li><a href="#" class="ajax">Visión</a></li>
<li><a href="#" class="ajax">Organigrama Institucional</a></li>
<li><a href="#" class="ajax">Organismos Adscritos</a></li>
</ul>
</li>
<li><a href="#"> Servicios |</a>
<ul class="submenu">
<li><a href="#">Subsido Agrícola </a></li>
</ul>
</li>
<li><a href="#"> Legislación Agraria |</a></li>
<li><a href="#"> Trabaja con Nosotros |</a></li>
<li><a href="#"> Denuncias |</a></li>
<li><a href="#"> Contacto UEMPPAT</a></li>
</ul>
</div>
<div id="sidebarl">
<div>
<table width="100%" border="0" align="center" >
<tbody>
<tr>
<td align="center">
<a target="_blank" href="pdf/decreto3390.pdf">
<img width="172" height="145" border="0" alt="Decreto 3390" title="Decreto 3390" src="imagenes/SLV.png">
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="0" align="center">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="pdf/PNSB.pdf">
<img width="172" height="145" border="0" alt="PNSB" title="Proyecto Nacional Simón Bolívar" src="imagenes/proyectosimonbolivar.png">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="content">
<table width="100%" align="center" border="0" >
<tbody>
<tr>
<td>
<br>
<div>
<table width="60%" align="center" border="0">
<tbody>
<tr >
<h1 id="titulo">Bienvenidos</h1>
<div id="texto">
Este es el sitio web de la UEMPPAT Aragua, creado para mejorar nuestro servicio y dar una atención especializada al pueblo de Aragua.
Acceda a documentos de inter&eactues en formato PDF haciendo click en las imagenes a los lados, comuniquese con nosotros, conozca la entidad, enterese de las novedades
Agrícolas en el estado Aragua, envienos su curriculum, enterese de las licitaciones vigentes y más
</div>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div id="sidebarr">
<div>
<table width="100%" border="0" align="center">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="pdf/agrovenezuela.pdf">
<img width="172" height="145" border="0" alt="Agro Venezuela" title="Detalles Agro Venezuela" src="imagenes/agrovenezuela.png">
</a>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<table width="100%" border="0" align="center">
<tbody>
<tr>
<td align="center">
<a target="_blank" href="publiarchivos/Logros_del_MAT_12-04-11_V2.0.pdf">
<img width="172" height="145" border="0" alt="Nuestros Logros" title="Logros MAT" src="imagenes/asd.png">
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html> aqui el css
Código:
* { padding:0px; margin:0px; }
body { font-family: Arial, Helvetica, sans-serif; font-size:12px; color:#57585A;
padding-left: 11em;
}
table{-moz-border-radius: 15px; border: 2px; background-color : #E7E7E7;
border : 1px solid #7B7B7B;
font-family : Arial, Verdana, Helvetica, sans-serif;
font-size : 12px;
padding-left : 5px;
padding-right : 5px;}
#menu { border:1px solid #ffffff; height:30px; width:993px; background-color:#ffffff;-moz-border-radius: 15px;
margin-top: -10px;}
#nav { list-style:none; }
#nav li { float:left; background-image:url(nav_li_bg.png); background-repeat:no-repeat; background-position:right;}
#nav li a { display:block; padding:7px 10px; text-decoration:none; color:#333333; font-weight:bold; } /*177C0C*/
#nav li a:hover { color:#20B200; }
/* Submenu */
#nav ul.submenu{ border:1px solid #000000; z-index:10;float: left; padding:5px; position:absolute; list-style:none; background-color:#FFFFFF;filter: alpha(opacity=90);-moz-opacity: 0.9;
KhtmlOpacity: 0.9;opacity: 0.9;}
#nav ul.submenu li { float:none;z-index:10; background-image:none; border-bottom:1px solid #999999; width:200px; filter: alpha(opacity=90);
-moz-opacity: 0.9;
KhtmlOpacity: 0.9;
opacity: 0.9;}
#sidebarl {
background: none repeat scroll 0 0 #transparent;
background-image: linear-gradient(left, right,from(#A1D004),
to(#6B9A00));
float: left;
width: 11em;
z-index:5;
position: absolute;
}
#sidebarr {
background: none repeat scroll 0 0 #FFFFFF;
float: right;
margin-left: 810px;
width: 11em;
background-color: transparent;
z-index: 5;
position: absolute;
}
#header{
background: none repeat scroll 0 0 #FFFFFF;
width: 995px;
}
#titulo{
text-align: center;
font-weight: bold;
}
#texto{
padding: 10px 10px 10px 10px;
}
#content{
background: none repeat scroll 0 0 transparent;
text-align:justify;
line-height: 30px;
font-color:000000;
position: absolute;
width: 50em;
height: auto;
min-heigh: 100%;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
z-index:5;
}
he revisado y no se si sera el doctype inadecuado; espero puedan ayudarme, gracias de antemano