Tema: mi pagina se "corta" al minimizar tamaño de ventana
Ver Mensaje Individual
  #14 (permalink)  
Antiguo 04/02/2013, 17:13
aparicio007
 
Fecha de Ingreso: enero-2011
Mensajes: 18
Antigüedad: 13 años, 11 meses
Puntos: 2
Pregunta Respuesta: mi pagina se "corta" al minimizar tamaño de ventana
Cita:
Iniciado por Bonez Ver Mensaje
El problema es que un poco todo te mide 100%, pero tu menú mide 900 pixeles, entonces al hacer el navegador más pequeño .m-items en algún momento no llega a caber en la pantalla y sobresale. Luego, como está flotado a la derecha, los enlaces de la lista siguen ahí, pero como tienen el texto de color blanco no se ve al tener el fondo del mismo color. Pero ahí siguen los cabritos.

La solución pasa por darle un ancho de 100% a .m-items y usar max-width, para que no sobrepase esa medida si la ventana es más grande de 960 pixeles pero, que tampoco sea mayor cuando es inferior.

Código CSS: 
Ver original
  1. #menu .m-items{
  2.   max-width: 960px;
  3.   width: 100%;
  4.   margin: 0 auto;
  5. }

El problema está en usar medidas relativas y fijas a la vez sin usar max-width para poner cierto punto de control.
Tengo exactamente el mismo problema, tengo una plantilla en la que quiero poner el header y el footer que se extiendan siempre. Y por otro lado la parte del contenido quiero que esté centrada y con una anchura fija.

Pero al visualizar en un navegador con menor anchura me ocurre que sale cortada, he probado con la solución que dais arriba pero persiste el problema.

Código CSS:
Código CSS: 
Ver original
  1. <style type="text/css">
  2.  
  3. * { padding:0px; margin:0px;    outline: 0;
  4. }
  5.  
  6. html, body { height:100%;
  7.     font-family: verdana, arial, sans-serif;
  8.     font-size: 1em;
  9.     outline: 0;
  10. }
  11.  
  12. p { margin-top: 1em;}
  13.  
  14. #contenedor {
  15.     min-height:100%;
  16.     height: auto!important;
  17.     height:100%;
  18. }
  19. #cabecera{
  20.     height: 5em;
  21.     background-color: #399;
  22.     color: #fff;
  23.     text-align: center;
  24. }
  25. #contenido {
  26.     background:#fff;
  27.     padding: 1em;
  28.     width: 800px; /*Necesito un ancho fijo para el contenido*********/
  29.     }
  30.  
  31. #pie {
  32.     text-align: center;
  33.     background-color: #366;
  34.     color: #fff;
  35.     height: 3em;
  36.     margin-top: -3em;
  37. }
  38. .ejemplo {
  39.     position:relative; top: 0.5em;
  40.     font-size: 1.2em;
  41. }
  42. a {text-decoration: none;}
  43. a span {display: none;}
  44. a:focus, a:active { display: block;}
  45. a:focus span, a:active span {display: block;color: #000;}
  46. .corte {clear: both;padding-top: 4em;}
  47.  
  48.     </style>

Código HTML:

Código HTML: 
Ver original
  1. <body>
  2.  
  3. <div id="contenedor">
  4.        <div id="cabecera">
  5.           <span class="ejemplo">Cabecera</span>
  6.        </div>                      
  7.        
  8.        <div id="contenido">
  9.         <span class="ejemplo">Contenido</span>
  10.         <p>TEXTO...</p>
  11.        </div>
  12.    <div class="corte"></div>
  13. </div>
  14.  
  15. <div id="pie">
  16.    <span class="ejemplo">Pie</span>
  17. </div>
  18.  
  19. </body>

Cuaquier ayuda es bienvenida.