multiple css

neojordan · #1 (**permalink**) 11/03/2008, 13:28

Hola, me gustaría saber cómo hacer que si entras con una resolución de 800x600 cargue un css y si es mayor otro.

GatorV · #2 (**permalink**) 11/03/2008, 13:34

Trasladado a HTML

Raulmmmm · #3 (**permalink**) 11/03/2008, 13:49

No se hace con HTML, se hace con Javascript:

Código HTML:

<script language="javascript">
<!--
if(screen.width > 800){
document.write('<link rel="stylesheet" type="text/css" href="masde800.css" />');
}else{
document.write('<link rel="stylesheet" type="text/css" href="menosde800.css" />');
}
-->
</script>

neojordan · #4 (**permalink**) 11/03/2008, 13:59

Eso decia yo, html...

Muchas gracias. Voy a probarlo

neojordan · #5 (**permalink**) 11/03/2008, 14:18

La cosa se ha complicado. Estoy usando joomla y lo que intento es borrar la columna de la derecha si la resolución es de 800x600. Si es mayor dejarlo como está.

La columna derecha se carga desde el index con este código:

Código HTML:

<div class="right">
     <?php mosLoadModules( 'right' ); ?>
      </div>

Y el css lo coloca asi:

Código:

.right {
  float: right;
  width: 20%;
  margin-top: 0pt;
  margin-right: 0;
  margin-bottom: 10px;
  margin-left: 0;

He probado a borrar eso del css y lo que hace es irse al centro.

También he probado a cambiar el width de 20% a 0% y se sale de la web.

Mi pregunta es: Puedo quitar la columna desde el css?

Si no se puede la cosa se complica. Tendria que hacer que el código que carga esa columna en el index solo aparezca si la resolución es mayor de 800x600.

He pensado que modificando tu código podría usarse en el index. A podria ser esto?:

Código HTML:

<script language="javascript">
<!--
if(screen.width > 800){
<div class="right">
     <?php mosLoadModules( 'right' ); ?>
      </div>);
}else{
);
}
-->
</script>

neojordan · #6 (**permalink**) 11/03/2008, 18:06

Creo que le falta algo a mi código...

Básicamente sería que si la resolución es mayor de 800 cargue este código:

Código HTML:

 <div class="right">
<?php mosLoadModules( 'right' ); ?>;
        </div>

y si es 800 o menos que no cargue nada.

Raulmmmm · #7 (**permalink**) 12/03/2008, 12:24

Se puede cargar siempre, pero ocultarlo:

Código HTML:

<script language="javascript">
<!--
function ocultar(){
var moz = (document.getElementById && !document.all) ? 1 : 0;
function winWid(){ return (moz) ? window.innerWidth : document.body.clientWidth; }
if(winWid() <= 800){
document.getElementById('right').style.display = 'none';
}
}
-->
</script>

Tendrás que sustituir <body> por:

Código HTML:

<body onload="ocultar()">

Y cambiarle de class a id:

Código HTML:

<div id="right"></div>

Siento que tengas que cambiar cosas, pero he probado de otras formas y no va

.

PD: Si ya tienes alguna función en el onload, cópiala y pégala debajo de function ocultar(){.

Mikmoro · #8 (**permalink**) 12/03/2008, 12:38

Yo creo que también podrías usar el primer script que te apuntaba raulmmmm para cargar una u otra hoja de estilo según la resolución, y en una poner el selector como lo tienes:

.right {
float: right;
width: 20%;
margin-top: 0pt;
margin-right: 0;
margin-bottom: 10px;
margin-left: 0;
}

y en la otra:

.right {
display: none;
}

de manera que según la css que cargue, tu parte derecha se verá o no.

Mikel.

Raulmmmm · #9 (**permalink**) 12/03/2008, 12:48

Sí (gracias MikMoro, no se me había ocurrido, de tanto programar

), o directamente poner un style:

Código HTML:

<script language="javascript">
<!--
if(screen.width <= 800){
document.write('<style type="text/css">.right{ display: none; }</style>');
}
-->
</script>

neojordan · #10 (**permalink**) 13/03/2008, 09:32

Gracias a los 2. Voy a probar todo lo que decis a ver que funciona y que no

neojordan · #11 (**permalink**) 13/03/2008, 11:38

.right {
display: none;
}

a funcionado ;)

Muchas gracias