Foros del Web » Creando para Internet » CSS »

Problema al minimizar navegador

Estas en el tema de Problema al minimizar navegador en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 14/05/2010, 01:33
 
Fecha de Ingreso: abril-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Problema al minimizar navegador

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

Última edición por renteria; 14/05/2010 a las 03:01
  #2 (permalink)  
Antiguo 14/05/2010, 01:57
 
Fecha de Ingreso: abril-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema al minimizar navegador

Código CSS:
Ver original
  1. body {
  2.     margin-right: 10%;
  3.     margin-left: 10%;
  4.     margin-top: 8px;
  5.     background-image: url(file:///C|/Users/Ulises/Desktop/ejem2web/fondo.gif);
  6.     width: auto;
  7. }
  8. #encabezado {
  9.     background-color: #FF4848;
  10.     height: 133px;
  11. }
  12. #listado {
  13.     height: 30px;
  14.     margin-top: 3px;
  15.     margin-bottom: 5px;
  16.     background-color: #FFE0A3;
  17. }
  18. .menu {
  19.     padding-top: 5px;
  20.     padding-bottom: 5px;
  21.     padding-left: 15px;
  22.     padding-right: 15px;
  23.     border-right-width: 3px;
  24.     border-right-style: groove;
  25.     border-right-color: #FFD4BF;
  26.     width: 120px;
  27.     float: left;
  28.     background-color: #FFD1BB;
  29.     font-family: Georgia, "Times New Roman", Times, serif;
  30.     font-weight: bolder;
  31.     color: #036;
  32.     background-image: url(fondolistado3.gif);
  33. }
  34. #listado .menu a {
  35.     color: #423200;
  36.     text-decoration: none;
  37.     font-weight: bold;
  38. }
  39. #listado .menu a:hover {
  40.     color: #C09;
  41. }
  42. #contenidocentral {
  43.     background-color: #FFF;
  44. }
  45. #piedepagina {
  46.     background-color: #FFF5EF;
  47.     margin-top: 5px;
  48.     color: #000;
  49.     font-size: 16px;
  50. }
  51. -->
  52. </style>
  53. <!-- InstanceBeginEditable name="head" -->
  54. <style type="text/css">
  55. <!--
  56. #contenidocentral #menuizquierdo {
  57.     background-color: #FC6;
  58.     float: left;
  59.     width: 20%;
  60.     border: 1px solid #FFB415;
  61.     background-image: url(fondolistado3.gif);
  62.     height: auto;
  63. }
  64. #contenidocentral #menuizquierdo #titulomenu {
  65.     padding-top: 18px;
  66.     padding-bottom: 0px;
  67.     text-align: center;
  68.     font-size: 18px;
  69.     font-weight: bolder;
  70.     color: #000;
  71.     background-color: #FC6;
  72.     background-image: url(fondolistado3.gif);
  73. }
  74. #contenidocentral #infopresentacion {
  75.     background-color: #FC6;
  76.     float: right;
  77.     color: #000;
  78.     font-size: 18px;
  79.     font-family: "Comic Sans MS", cursive;
  80.     padding-top: 3px;
  81.     padding-left: 7px;
  82.     text-align: justify;
  83.     padding-right: 7px;
  84.     width: 78%;
  85.     border-top-width: 1px;
  86.     border-right-width: 1px;
  87.     border-top-style: solid;
  88.     border-right-style: solid;
  89.     border-top-color: #FFB415;
  90.     border-right-color: #FFB415;
  91.     background-image: url(fondolistado3.gif);
  92.     height: auto;
  93. }
  94. .menuizq {
  95.     padding-top: 3px;
  96.     padding-right: 12px;
  97.     padding-bottom: 3px;
  98.     padding-left: 12px;
  99.     background-color: #FC6;
  100.     border: 1px solid #FFB415;
  101.     background-image: url(fondolistado3.gif);
  102. }


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> 

Última edición por renteria; 14/05/2010 a las 03:00
  #3 (permalink)  
Antiguo 14/05/2010, 04:17
Avatar de linternazo  
Fecha de Ingreso: abril-2010
Mensajes: 76
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema al minimizar navegador

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.
  #4 (permalink)  
Antiguo 15/05/2010, 01:25
 
Fecha de Ingreso: abril-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema al minimizar navegador

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
  #5 (permalink)  
Antiguo 17/05/2010, 05:28
 
Fecha de Ingreso: mayo-2010
Mensajes: 1
Antigüedad: 7 años, 6 meses
Puntos: 0
Respuesta: Problema al minimizar navegador

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á.
  #6 (permalink)  
Antiguo 17/05/2010, 13:35
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: Problema al minimizar navegador

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
  1. <div id="contenedor">
  2.     <div id="encabezado"></div>
  3.     <div id="listado"></div>
  4.     <div id="contenidocentral">
  5.         ....
  6.     </div>
  7. </div>

Saludos

  #7 (permalink)  
Antiguo 23/05/2010, 16:28
 
Fecha de Ingreso: abril-2010
Mensajes: 36
Antigüedad: 7 años, 7 meses
Puntos: 0
Respuesta: Problema al minimizar navegador

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

Etiquetas: minimizar, navegadores
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:59.