Problema cuand se reajusta la ventana

terbium_lt · #1 (**permalink**) 03/08/2011, 09:26

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&oacuten acerca de recaudos para tramites, Contacto con la Instituci&oacuten</title>
 <meta name="Descripcion" content="P&aacutegina 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">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Inicio&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
         <li><a href="#">&nbsp;UEMPPAT ARAGUA&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a>
         <ul class="submenu">
                    <li><a href="quienessomos.php" class="ajax">Quienes Somos</a></li>
                    <li><a href="#" class="ajax">Misi&oacuten</a></li>
                    <li><a href="#" class="ajax">Visi&oacuten</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="#">&nbsp;Servicios&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a>
                <ul class="submenu">
                    <li><a href="#">Subsido Agr&iacutecola&nbsp;&nbsp;&nbsp;</a></li>
                </ul>
         </li>
         <li><a href="#">&nbsp;Legislaci&oacuten Agraria&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
         <li><a href="#">&nbsp;Trabaja con Nosotros&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
         <li><a href="#">&nbsp;Denuncias&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</a></li>
         <li><a href="#">&nbsp;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&oacuten 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&iacutecolas en el estado Aragua, envienos su curriculum, enterese de las licitaciones vigentes y m&aacutes
                                            </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

terbium_lt · #2 (**permalink**) 03/08/2011, 09:58

listo, solucionado. Era un problema con la forma de colocar los margenes.
Con position:absolute
los margenes deben ser
margin-left: auto;
margin-top: auto;
top: 100px;
left: 100px;

y listo no se movera.... la cantidad que varia es el valor de top y left segun se necesite

terbium_lt · #3 (**permalink**) 03/08/2011, 18:25

yo nuevamente por aca.... pasa que cuando resuelvo el problema del reajuste de ventana surge otro que es cuando hago la actualizacion en ajax se mueve de lugar la div content, no se por qué exactamente pero basta conque coloque los margenes de otra manera y se soluciona pero aparece el problema del reajuste de ventana...
de verdad que estoy volviendome loco :S