Flotar capas con width 100%

[wolfmoon]

A ver si me podeis echar una mano, que ando loco con esto, quiero hacer una especie de slider de 2 capas, quiero que cada capa ocupe todo el navegador, con un width:100%; el caso es que quiero que una flote a la izquierda de la otra, pero no se exactamente como hacer eso, busco y busco y no encuentro nada o soy yo que no me aclaro.

[Urdaris_Nox]

A ver, no entiendo la idea.

Los Floats están hechos para que dos o más elementos se puedan colocar uno a continuación de otro horizontalmente.

Si un elemento tiene width 100% significa que ocupa toda la línea horizontal. ¿Cómo vas a poner dos elementos horizontalmente si cada uno ocupa toda la línea horizontal?

¿Ves que no tiene mucho sentido?

Explica tu idea, a ver!

[wolfmoon]

Hola, perdon por la demora, si claro, eso ya lo entiendo, de ahi mi duda, lo que yo trato de hacer es algo como en esta web:

http://www.europekorea-bpc.co.kr/

Cada seccion del slider ocupa el 100% del navegador, y luego desde el menu vas de una a otra, que se suponen estan colocadas todas en linea....

Pero no se como hacer eso...

[chwc]

te explico el funcionamiento de un slider, a partir de aqui los divs los llamare cajas, hay una caja de una base y altura x, por ejemplo 400 de altura y 600 de base, que adentro tiene otra caja de una altura de 400 y una base de 3000, aqui esta el truco, es que en esta caja mas grande que la primera, puedes poner 5 fotos de 600*400, y con el margin, moverla hacia mas a la izquierda para que se vea otra foto, entiendes ??

saludos

[wolfmoon]

Vamos a ver si nos aclaramos, se cual es el funcionamiento de un slider, el problema que tengo es el siguiente:

Yo quiero dividir una web en 7 secciones, cada una de ellas debe ocupar el 100% del navegador, tanto en altura como a lo ancho, y con el menu moverme entre ellas con algun easing, esto es lo que no se hacer, porque si hago algo como esto en css:

contenedor: width: 100%;
mascara: width:800%;
seccion: width:12.5%;

Al cambiar el tamaño de la pantalla se me desconfigura todo, asique imagino que hay alguna manera de poder hacer esto en javascript...

[wolfmoon]

Bueno al fin encontre la solucion para realizar el slider a pantalla completa, el tema ahora es que no se me adapta a la pantalla, es decir, si cargo la web en el navegador con cualquier tamaño de ventana, si juego con el tamaño del navegador y lo hago mas pequeño se me adapta bien, pero si lo quiero hacer mas grande no, se queda con las mismas medidas que adopto en el momento de la carga... me imagino que hay que utilizar un resize o algo asi, pero no tengo ni idea, alguna ayuda porfi

Aqui el codigo:

Código Javascript:

// JavaScript Document
$(document).ready(function() {
    
// Esperamos a la carga de la página para empezar...
 
// declaramos slider como objeto javascript...
var slider = {};
 
// Declarando el id para buscar el elemento "ul": 
slider.initQuery = '#slider';
 
// declarando variables iniciales...
slider.slider = $( slider.initQuery + " ul,ul"+slider.initQuery); // seleccionamos el "ul" con jquery
slider.slides = slider.slider.find('li'); // seleccionamos cada uno de sus "li"
slider.number = slider.slides.length; // Contamos el numero de "li" y por tanto slides que tenemos
slider.actual = 0; // marcado para saber que slide estamos viendo, actualmente la primera, o sea la 0
slider.height = 0; // altura del slider... luego la calcularemos
slider.width = 0; // anchura del slider... luego la calcularemos
 
// buscando ancho y alto de <li> máximos para calcular altura y anchura del slider...
for(i=0;i<slider.number;i++)
{
  var w = $(slider.slides[i]).width();
  var h = $(slider.slides[i]).height();
  slider.height = ( h > slider.height  ) ?  h : slider.height;  
  slider.width = ( w > slider.width  ) ? w : slider.width;  
}
 
// formateando el css del <ul> contenedor, la caja del slider...
slider.slider.css({
  overflow: "hidden",
  width: slider.width,  
  height: slider.height,
  position: 'relative'
});
 
// colocando en posicion absoluta todos los <li> del slider, para poder ir haciendo las transiciones...
for (var i=0;i<slider.number;i++)
{
  var sl = $(slider.slides[i]);
  sl.attr('class',sl.attr('class') + " slider-slide-"+i);
  sl.css({
    position : 'absolute',
    left : slider.width * i 
  });
}
 
// funcion para moverse a un slide concreto...
slider.go = function (where) {
  if (where == 'next')
  {
    slider.actual = ( slider.actual < slider.number-1) ? slider.actual*1 + 1 : 0;
  }
  else if (where == 'prev')
  {
    slider.actual = ( slider.actual > 0) ? slider.actual - 1 : slider.number-1;
  }
  else
  {
    slider.actual = where;
  }
 
  for (var i=0;i<slider.number;i++)
  {
    var sl = $(slider.slides[i]);
    sl.animate({
       left : slider.width * (i - slider.actual)
    },500);
  }
};
 
// creando botones de siguiente y anterior...
$(slider.initQuery).append("<a href='#next' class='slider-prev'>Anterior</a><a href='#next' class='slider-next'>Siguiente</a>");
 
// asignando el evento a los botones de siguiente y anterior...
$(slider.initQuery + " .slider-next").click(function () {
  slider.go('next');
  return false; 
});
$(slider.initQuery + " .slider-prev").click(function () {
  slider.go('prev');
  return false; 
});
 
// evento para el link que nos lleva al elemento 6 del slider...
$('a.ir-al-elemento-6').click(function() { 
  slider.go( 6 );
});
 
 
 
 
 
});
 

[wolfmoon]

Alguna idea? Ando desesperado con este proyecto

[wolfmoon]

Refloto, porque no soy capaz de sacarlo...