[SOLUCIONADO] mi pagina se "corta" al minimizar tamaño de ventana

catpaw · #1 (**permalink**) 30/01/2013, 19:36

hola foreros les pido apoyo con esta duda, tengo un div que en el css lo declaro con width al 100% y me percate que cuando tengo la ventana normal mi pagina se ve ok:

pero si minimizo el tamaño de la ventana, al no caber la pagina en la misma, se activa el scroll y al recorrerlo mi pagina como que se "corta":

me causa mucho ruido, entonces probe poniendole al width un tamaño con pixeles, ej. width: 900px y caso curioso que asi ya no pasa eso, pero yo necesito que el div se extienda a lo ancho de la pantalla por eso no puedo manejar un ancho fijo.

alguien sabe porque sucede esto?

este el mi css:

Código CSS:

Ver original#menu{
background:#696969 url(../images_fondo/patron_menu.png) repeat-x;
width:100%;
height:35px;
margin:0 auto;
}

gracias!

si no se ven las imagenes me avisan xfas.

cmansillahorna3 · #2 (**permalink**) 31/01/2013, 06:28

¿Probaste actualizando la página?

alyciashape · #3 (**permalink**) 31/01/2013, 07:00

Prueba con max-widht:100%

a mi me pasaba también y creo recordar que lo arreglé así

catpaw · #4 (**permalink**) 31/01/2013, 08:30

hola alyciashape probe con max-width pero sigue el mismo problema.

Mi preocupacion con esto es que si un usuario tiene una pantalla pequeña y se le habilita el scroll no van a visualizar mas que lo que cabe en pantalla, porque cuando se recorre el scroll en lugar que se vea lo que falta de la pagina se ve en blanco.

no se porque sucede esto parece que es por el uso de porcentajes pero no estoy segura.

catpaw · #5 (**permalink**) 31/01/2013, 10:16

Volvi a subir las imagenes y tratare de explicarme mejor, mi pagina en pantalla maximizada se ve bien, mi menu (barra gris de arriba) se ve completo:

o http://www.subeimagenes.com/img/a2-529169.html

pero al hacer pequeña la ventana, al no caber la pagina obviamente aparece el scroll, el problema es que al recorrerlo no veo lo que me falta de mi pagina, se corta, queda en blanco.

o http://www.subeimagenes.com/img/a1-529185.html

tengo el width de ese div al 100% (codigo al principio del post)

y tengo estas reglas no se si afectan:

Código CSS:

Ver originalhtml, body{
margin:0 auto;
padding:0;
background:#fefefe;
background-attachment:fixed;
background-position:top center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}

Espero que alguien me pueda ayudar

pzin · #6 (**permalink**) 31/01/2013, 18:55

Aporta más código.

No sabemos qué tipo de elemento es #menu, o qué otros hay involucrados ni qué estilos puedan tener.

Por otro lado, no tiene sentido que elementos de un ancho de 100% tengan un margen lateral automático. Tampoco tiene sentido ponerlo un color de fondo a html y a body u otras propiedades.

C2am · #7 (**permalink**) 31/01/2013, 18:56

Hola
¿Tienes online la página?

madman_18 · #8 (**permalink**) 01/02/2013, 05:56

Creo que el problema sería, que estas metiendo (no sé si lo tienes así o no porque no se ve en el código que muestras) que el menú lo estés metiendo sin ningún div que te sirva de contenedor...

Podrías probar algo como esto:

Código HTML:

Ver original<div id="contenedor">
 
       <div id="menu">
          todos tus elementos del menú.
        </div>
</div>

Y ahora el css, todo lo del margin, el width, la posicion...aplicarlo al contenedor.

De todas formas, ¿podrías poner más código?

catpaw · #9 (**permalink**) 01/02/2013, 08:32

Hola gracias a todos por contestar, disculpen si me falto especificar mas el codigo, pero ahi les va, este es mi html:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
......
</head>
<body>
<div id="menu">
        <div class="m-items">
                       <ul class="m-ul">
                              <li class="m-li"><a href="#">Opcion 1</a></li>
                              <li class="m-li"><a href="#">Opcion 2</a></li>
                              <li class="m-li"><a href="#">Opcion 3</a></li>
                              <li class="m-li"><a href="#">Opcion 4</a></li>
                       </ul>
                </div> 
</div>
.....
</body>
</html>

Ahora el css:

Código CSS:

Ver originalhtml, body{
margin:0;
padding:0;
background:#fefefe;
background-attachment:fixed;
background-position:top center;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#000;
}
#menu{
background:#696969 url(../images_fondo/patron_menu.png) repeat-x;
width:100%;
height:35px;
margin:0;
padding:0;
}
#menu .m-items{
width:900px;
margin:0 auto;
}
#menu .m-items .m-ul{
/*border:1px solid #F00;*/
float:right;
margin:0;
padding:0 10px 0 10px;
list-style:none;
list-style-image:none;
}
#menu .m-items .m-li{
/*border:1px solid;*/
margin:3px 5px;
padding:5px;
list-style:none;
list-style-image:none;
display:inline-block;
float:left;
}
#menu .m-items .m-li a{
font-size:13px;
font-weight:bold;
color:#FFFAF0;
filter: alpha(opacity=70);
opacity:.7;
-moz-opacity:0.7;
text-decoration:none;
}
#menu .m-items .m-li a:hover{
text-decoration:none;
}

se supone que el div menu debe ocupar todo lo ancho de la pantalla, cosa que hace bien, y la clase m-items delimita que las opciones esten en un contenedor de un ancho fijo de 900px y que este centrado.

Lo raro es lo que pasa cuando sale el scroll...que es lo que ya les he comentado.

Y de hecho ya probe en varios navegadores (ie9, ie8, chrome, mozilla) en todos pasa lo mismo.

Lamentablemente estoy en probando en local y no tengo el ejemplo el linea.

Gracias por su ayuda :)

catpaw · #10 (**permalink**) 01/02/2013, 08:54

Ya probe poniendo un contenedor principal pero aun persiste el problema, probe asi:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
......
</head>
<body>
<div id="contenedor">
    <div id="menu">
        <div class="m-items">
                       <ul class="m-ul">
                              <li class="m-li"><a href="#">Opcion 1</a></li>
                              <li class="m-li"><a href="#">Opcion 2</a></li>
                              <li class="m-li"><a href="#">Opcion 3</a></li>
                              <li class="m-li"><a href="#">Opcion 4</a></li>
                       </ul>
                </div> 
   </div>
.....
</div>
</body>
</html>

y modifique en el css solo:

Código CSS:

Ver original...
#contenedor{
width:100%;
background:#fefefe;
}
#menu{
background:#696969 url(../images_fondo/patron_menu.png) repeat-x;
height:35px;
margin:0;
padding:0;
}
...

Hice una captura de pantalla para que vean, que sigue el problema, pero note algo, sombré la parte de la pagina que se supone que se corta y vi que en realidad no se "corta" la pagina, si no que los background-color y background-image no se pintan, pero los elementos ahi siguen porque el enlace "opcion 4" ahi sigue no se veia porque son letras blancas.

o http://www.subeimagenes.com/img/aa-530131.html

como ven? que puede ser lo que esta pasando?

madman_18 · #11 (**permalink**) 01/02/2013, 09:03

¿Has probado añadiendo al css esto?

Código CSS:

Ver originalhtml,body{width:100%;height:100%}

Pruébalo a ver qué tal :)

pzin · #12 (**permalink**) 01/02/2013, 09:14

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#menu .m-items{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

El problema está en usar medidas relativas y fijas a la vez sin usar max-width para poner cierto punto de control.

catpaw · #13 (**permalink**) 01/02/2013, 11:08

Hola chicos, ya quedo solucionado, en efecto a la conclusion que llegaste Bonez era lo que estaba causando ese problema.

probe tu solucion y me a funcionado a la perfeccion.

muchas gracias a todos por sus respuestas.

aparicio007 · #14 (**permalink**) 04/02/2013, 17:13

Cita:

Iniciado por Bonez

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#menu .m-items{
  max-width: 960px;
  width: 100%;
  margin: 0 auto;
}

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<style type="text/css">
 
* { padding:0px; margin:0px;    outline: 0;
}
 
html, body { height:100%;
    font-family: verdana, arial, sans-serif;
    font-size: 1em;
    outline: 0;
}
 
p { margin-top: 1em;}
 
#contenedor {
    min-height:100%;
    height: auto!important;
    height:100%;
}
#cabecera{
    height: 5em;
    background-color: #399;
    color: #fff;
    text-align: center;
}
#contenido {
    background:#fff;
    padding: 1em;
    width: 800px; /*Necesito un ancho fijo para el contenido*********/
    }
 
#pie {
    text-align: center;
    background-color: #366;
    color: #fff;
    height: 3em;
    margin-top: -3em;
}
.ejemplo {
    position:relative; top: 0.5em;
    font-size: 1.2em;
}
a {text-decoration: none;}
a span {display: none;}
a:focus, a:active { display: block;}
a:focus span, a:active span {display: block;color: #000;}
.corte {clear: both;padding-top: 4em;}
 
    </style>

Código HTML:

Ver original<body>
 
<div id="contenedor">
       <div id="cabecera">
          <span class="ejemplo">Cabecera</span>
       </div>                      
       
       <div id="contenido">
        <span class="ejemplo">Contenido</span>
        <p>TEXTO...</p>
       </div>
   <div class="corte"></div>
</div>
 
<div id="pie">
   <span class="ejemplo">Pie</span>
</div>
 
</body>

Cuaquier ayuda es bienvenida.

catpaw · #15 (**permalink**) 04/02/2013, 20:42

Hola

No se mucho la verdad, pero al ver tu codigo me causa ruido estas lineas:

Código CSS:

Ver original#contenedor {
    min-height:100%;
    height: auto!important;
    height:100%;
}

No es recomendable (para mi) declarar dos veces height, ademas con el important estas diciendo que el height al 100% no será tomado en cuenta para nada.

Por otro lado deberias agregar esto:

Código CSS:

Ver original#contenido {
    background:#fff;
    padding: 1em;
    max-width: 800px; /*Estableces un ancho maximo*/
    width: 100%;
    }

Esto es lo que me recomendaron y lo que me funciono.

Cita:

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.

Saludos

pzin · #16 (**permalink**) 04/02/2013, 21:05

Ahí catpaw te da la solución.

Y las declaraciones de #contenedor sobre la altura que te comenta, es como si realmente no declarases nada, ya que al usar !important priorizas el valor auto para height, que es el valor que tiene cualquier elemento por defecto.