Problema al minimizar navegador

renteria · #1 (**permalink**) 14/05/2010, 00:33

hola tengo un problema, cuando minimizo mi navegador se me descuadra toda la web, el menu horizontal sehace a doble fila y mi menu vertical se me va para abajo descuadrandome la etiqueta que tengo al lado, osea se entremezclan las distintas capas. alguien sabe que puede ser, muchisimas gracias de antemano por la ayuda

renteria · #2 (**permalink**) 14/05/2010, 00:57

Código CSS:

Ver originalbody {
    margin-right: 10&#37;;
    margin-left: 10%;
    margin-top: 8px;
    background-image: url(file:///C|/Users/Ulises/Desktop/ejem2web/fondo.gif);
    width: auto;
}
#encabezado {
    background-color: #FF4848;
    height: 133px;
}
#listado {
    height: 30px;
    margin-top: 3px;
    margin-bottom: 5px;
    background-color: #FFE0A3;
}
.menu {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 15px;
    padding-right: 15px;
    border-right-width: 3px;
    border-right-style: groove;
    border-right-color: #FFD4BF;
    width: 120px;
    float: left;
    background-color: #FFD1BB;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-weight: bolder;
    color: #036;
    background-image: url(fondolistado3.gif);
}
#listado .menu a {
    color: #423200;
    text-decoration: none;
    font-weight: bold;
}
#listado .menu a:hover {
    color: #C09;
}
#contenidocentral {
    background-color: #FFF;
}
#piedepagina {
    background-color: #FFF5EF;
    margin-top: 5px;
    color: #000;
    font-size: 16px;
}
-->
</style>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
#contenidocentral #menuizquierdo {
    background-color: #FC6;
    float: left;
    width: 20%;
    border: 1px solid #FFB415;
    background-image: url(fondolistado3.gif);
    height: auto;
}
#contenidocentral #menuizquierdo #titulomenu {
    padding-top: 18px;
    padding-bottom: 0px;
    text-align: center;
    font-size: 18px;
    font-weight: bolder;
    color: #000;
    background-color: #FC6;
    background-image: url(fondolistado3.gif);
}
#contenidocentral #infopresentacion {
    background-color: #FC6;
    float: right;
    color: #000;
    font-size: 18px;
    font-family: "Comic Sans MS", cursive;
    padding-top: 3px;
    padding-left: 7px;
    text-align: justify;
    padding-right: 7px;
    width: 78%;
    border-top-width: 1px;
    border-right-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-top-color: #FFB415;
    border-right-color: #FFB415;
    background-image: url(fondolistado3.gif);
    height: auto;
}
.menuizq {
    padding-top: 3px;
    padding-right: 12px;
    padding-bottom: 3px;
    padding-left: 12px;
    background-color: #FC6;
    border: 1px solid #FFB415;
    background-image: url(fondolistado3.gif);
}

Código HTML:

</head>

<body>
<div id="encabezado"></div>
<div id="listado">
  <div class="menu"><a href="index.html">Inicio</a></div>
  <div class="menu"><a href="bonus.html">Bonus</a></div>
  <div class="menu"><a href="banca.html">Banca</a></div>
  <div class="menu"><a href="ligaperu.html">Liga Perú</a></div>
  <div class="menu"><a href="contactenos.html">Contactenos</a></div>
</div>
<!-- InstanceBeginEditable name="imagen" -->

  <div id="contenidocentral">
  
    <div id="menuizquierdo">
      <div id="titulomenu">XXXXXXX XX XXXXXXXX</div>
      <br />
      
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
      <div class="menuiz">XXXXXXXXXXXXXXX</div>
      <div class="menuizq">XXXXXXXXXXXXXXX</div>
    </div>
    <div id="infopresentacion">bla bla bla bla bla bla bla bla bla bla bla bla bal lab XXXXXXXXXXXXXXX bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.<br />
      <br />
      bla bla bla bla bla bla bla bla bla bla bla bla bal lab XXXXXXXXXXXXXXX bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla..<br />
      bla bla bla bla bla bla bla bla bla bla bla bla bal lab XXXXXXXXXXXXXXX bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla..<br />
      <br />
      bla bla bla bla bla bla bla bla bla bla bla bla bal lab XXXXXXXXXXXXXXX bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla..<br />
      <br />
      bla bla bla bla bla bla bla bla bla bla bla bla bal lab XXXXXXXXXXXXXXX bla bla  bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.<br />
    </div>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  
</div>
<!-- InstanceEndEditable -->
<div id="piedepagina"><img src="fondopie3.gif" width="1000" height="20" border="0" usemap="#Map" /><br />
 
    <map name="Map" id="Map">
      <area shape="rect" coords="239,2,337,18" href="contactenos.html" /><area shape="rect" coords="74,2,129,18" href="banca.html" alt="banca" />
      <area shape="rect" coords="15,2,70,18" href="bonus.html" alt="bonus" />
      <area shape="rect" coords="139,2,222,17" href="ligaperu.html" />
    </map>
  
</div>
</body>

linternazo · #3 (**permalink**) 14/05/2010, 03:17

Ocurre al usar medidas de porcentaje.

width: 78%;

Al ser la ventana mas pequeña el div tambien se hace mas pequeño.

width: 600px;

Al tener una medida exacta, esta no cambia al reducir el navegador.

renteria · #4 (**permalink**) 15/05/2010, 00:25

hola amigo, pues nada he hecho lo que me dijiste pero igual se me sigue descuadrando los menues, el horizontal se hace a doble linea, una cosita sobre lo que dices de no usar porcentajes, me extraña lo que me dices porque mucha gente usa porcentajes y normal no les pasa esto, gracias por tu ayuda, a ver si alguien mas puede echarme un cable.

saludos

omarmb · #5 (**permalink**) 17/05/2010, 04:28

A mi también me pasa lo mismo. Además, tengo unas capas que, al minimizar la página, no se ajustan,sino que se quedan en el tamaño original. Si alguien puede ayudar se agradecerá.

jomaruro · #6 (**permalink**) 17/05/2010, 12:35

Hola:

Añade un div con tamaño fijo (el que necesites) que englobe el total de la página.

Código HTML:

Ver original<div id="contenedor">
    <div id="encabezado"></div>
    <div id="listado"></div>
    <div id="contenidocentral">
        ....
    </div>
</div>

Saludos

renteria · #7 (**permalink**) 23/05/2010, 15:28

gracias jomaruro, si ya lo habia solucionado hace dias justamente haciendo lo mismo q tu me dices, poniendo un div contenedor y centrando bien para firefox y explorer

gracias de nuevo