Ajustar Margin segun resolución

PoLiZe · #1 (**permalink**) 09/09/2011, 02:22

Holas gente, bueno tengo un div donde está el header del sitio que es de 960x300px.

Y necesito que cuando la pantalla sea de 1024, ese div tenga "margin-left:0px" y "margin-right:0px".

Y que cuando la pantalla sea mayor, como 1280, el div tenga "margin-left:auto;" y "margin-right:auto;"

Probé con este código..

Código Javascript:

Ver original<script language="javascript">
function pantalla() 
{ 
var theRules = new Array(); 
 
if (document.styleSheets[0].cssRules)    theRules=document.styleSheets[0].cssRules; 
else if (document.styleSheets[0].rules)  theRules=document.styleSheets[0].rules;  
 
var w=window.screen.widht; 
 
 
 
if(w==1024)      document.getElementById('div_header').style.margin = "0px"; 
else if(w>1024) 
{
document.getElementById('div_header').style.LeftMargin = auto; 
document.getElementById('div_header').style.RightMargin = auto; 
}
else  {
              document.getElementById('div_header').style.margin = "0px";
 
}}  
 
</script>

En el body puse "OnLoad="pantalla();"

Y el id del div es "div_header"

¿Que es lo que está fallando?

Desde ya, muchas gracias!

PoLiZe · #2 (**permalink**) 09/09/2011, 02:58

Probé con otro código:

Código Javascript:

Ver original<script language="javascript">
function reso(){
 
    if(screen.width>1280)
        {
            document.getElementById('reslu').href="centrado.css";
        } else {
            document.getElementById('reslu').href="ajustado.css";
        }
}
</script>

Y me andubo!
Mil disculpas!

zerokilled · #3 (**permalink**) 09/09/2011, 03:06

buenas,
en #9. var w=window.screen.widht;, width esta mal escrito. como detalle adicional, aunque en términos de ejecucción no produce problema, en términos logístico no tiene sentido... la primera condición if esta de más. con que revises si es mayor a 1024, seguido del esle, es suficiente. o mejor aún, asigna un valor para margin por defecto en la hoja de estilo y luego en javascript creas una sola condición. tiene la ventaja de si javascript no esta disponible, al menos se aplica lo indicado en la hoja de estilo.

PoLiZe · #4 (**permalink**) 09/09/2011, 18:41

Ahora me di cuenta que no funciona del todo perfecto, hay otra forma de hacerlo? con jquery talves? alguien me ayuda por favor?

PoLiZe · #5 (**permalink**) 10/09/2011, 16:55

Alguien me ayuda?

Panino5001 · #6 (**permalink**) 10/09/2011, 17:02

LeftMargin y RightMargin?
No deberían ser marginLeft y marginRight?
Por otro lado no se entiende qué código estás usando finalmente.

PoLiZe · #7 (**permalink**) 11/09/2011, 01:13

Si, en eso me había confundido, actualmente uso este:

Código HTML:

Ver original<script language="javascript">
function reso(){
 
    if(screen.width>1024)
        {
            document.getElementById('resolucion').href="centrado.css";
        } else {
            document.getElementById('resolucion').href="ajustado.css";
        }
}
</script>
<link rel="stylesheet" type="text/css" title="resolucion"  id="resolucion" />
</head>
 
<body onload="reso()" bgcolor="#ddd" style="text-align:center;">