Parte izquierda de la web no se ve al aumentarla.

[ccrunch]

Buenas, tengo un problema. Estoy haciendo mi propia web de presentación, la he hecho usando DIV's y tablas. Cuando reduzco el tamaño de la página se ve todo al centro como tiene que ser, sin embargo cuando la aumento la parte izquierda no se puede mover más, el scroll lo permite, pero la parte derecha sí que se puede.

Pongo una captura. Alguien me puede dar una pista o algo? No doy con el problema, incluso con F12 de firefox inspecciono los elementos y no doy con el problema.

http://i61.tinypic.com/n5m2r9.png

[basickdagger]

no entendi muy bien lo que dices...

pero si del lado derecho tienes un div con position:absolute, left negativo este nunca se vera ni en el scroll...

igual pon un poco de código sobretodo del div que mencionas q no aparece...

[alan++]

Porque tablas?

[ccrunch]

Buenas, el div está como absolute, centrado en la pantalla y tirado para la izquierda la mitad de su anchura para que esté al centro, entonces es por eso?

El CSS es el siguiente (hay un div para incluír los nombres de las banderas encima, y otro div metido en el anterior para poner la tabla con las imágenes):

Código (css) [Seleccionar] Expandir

#principal{
text-align:center;
position:absolute;
top:50%;
left:50%;
width:1300px;
margin-left:-650px;
height:400px;
margin-top:-200px;
}

#secundario{
text-align:center;
position:absolute;
top:50%;
left:50%;
width:1100px;
margin-left:-550px;
height:320px;
margin-top:-160px;
}

Si descubres el por qué, me lo puedes explicar?

Salu2

NOTA MOD: Utilizar etiquetas GeSHi en códigos ([code=css][/code])
Normas -> http://foro.elhacker.net/desarrollo_web/normas_del_subforo_de_desarrollo_web-t407889.0.html

[basickdagger]

como te digo si utilizas la propiedad left negativa los componentes se saldran y estos no se veran con scroll, a menos que esten dentro de un contenedor con scroll..
y hacia la derecha tu scroll va crecer...

hice un ejemplo a ver si te sirve ahi tu le puedes editar lo q quieres o como lo necesites.... espero te funcione... saludos

Código (css) [Seleccionar] Expandir



<style>
   
#principal{
width:100%;
}
#secundario{
width:900px;
}
@media (max-width: 900px) {
#principal{
width:900px;
}
#secundario{
width:800px;
}
}

@media (max-width: 600px) {
        #principal{   width:600px; }  
        #secundario{width:400px;}
}
   
#principal{
position:absolute;
height:200px;
border:#000 solid 1px;
background:#F60;
top:50%;
margin-top:-100px;
}

#secundario{
height:100px;
border:#000 solid 1px;
background:#666;
top:50%;
margin:50px auto;

}
</style>

<div id="principal">
   <div id="secundario">
   </div>    
</div>



Edit: le agregue el 100% al width, ya que si le ponia 1300px me daba muchisimo scroll xD saludos

[ccrunch]

Hola de nuevo,

he probado tu método y efectivamente funciona.

Me puedes decir qué hace la propiedad media y cómo funciona? En concreto, por que:

Código (css) [Seleccionar] Expandir

@media (max-width: 600px) {
        #principal{   width:600px; } 
        #secundario{width:400px;}
}

principal y secundario van dentro de @media

Salu2

[#!drvy]

Son media-queries, se usan principalmente para diseño responsivo. Lo que estas diciendo con esa media-query es que si el width del navegador es como máximo, 600px, las reglas dentro de dicho media-query deben aplicarse.

http://css-tricks.com/css-media-queries/

Saludos

[ccrunch]

Y para que en mi caso las media query funcionen, no tienen que haber posiciones negativas, o como es eso?