Foros del Web » Creando para Internet » HTML »

multiple css

Estas en el tema de multiple css en el foro de HTML en Foros del Web. 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....
  #1 (permalink)  
Antiguo 11/03/2008, 14:28
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
multiple css

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.
  #2 (permalink)  
Antiguo 11/03/2008, 14:34
Avatar de GatorV
$this->role('moderador');
 
Fecha de Ingreso: mayo-2006
Ubicación: /home/ams/
Mensajes: 38.567
Antigüedad: 11 años, 6 meses
Puntos: 2122
Re: multiple css

Trasladado a HTML
  #3 (permalink)  
Antiguo 11/03/2008, 14:49
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: multiple css

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> 
  #4 (permalink)  
Antiguo 11/03/2008, 14:59
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Re: multiple css

Eso decia yo, html...

Muchas gracias. Voy a probarlo
  #5 (permalink)  
Antiguo 11/03/2008, 15:18
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Re: multiple css

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> 
  #6 (permalink)  
Antiguo 11/03/2008, 19:06
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Re: multiple css

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.
  #7 (permalink)  
Antiguo 12/03/2008, 13:24
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: multiple css

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(){.
  #8 (permalink)  
Antiguo 12/03/2008, 13:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Re: multiple css

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.
  #9 (permalink)  
Antiguo 12/03/2008, 13:48
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Re: multiple css

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> 
  #10 (permalink)  
Antiguo 13/03/2008, 10:32
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Re: multiple css

Gracias a los 2. Voy a probar todo lo que decis a ver que funciona y que no
  #11 (permalink)  
Antiguo 13/03/2008, 12:38
 
Fecha de Ingreso: enero-2008
Mensajes: 97
Antigüedad: 9 años, 10 meses
Puntos: 3
Re: multiple css

.right {
display: none;
}


a funcionado ;)

Muchas gracias
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 03:22.