Slider y propiedad bottom

[conotrocolor]

Hola, que tal, es mi primer tema, y mi primer posteo, pero como muchos, he usado y probado muchas de las aplicaciones y temas que en estos foros se debaten.

mi consulta es la siguiente:


quiero hacer algo como tiene [URL="http://www.adidas.com.ar"]adidas[/URL]

yo tengo un encabezado y un slider, pero me es dificil indicarle al slider que tiene q ser lo suficientemente alto como para tapar la primer "impresion" de la pagina hasta que le hagan "scroll". (funcionando con cualquier resolucion de pantalla)
El ancho lo solucioné dandole la propiedad "width=100%", pero aca la cuestión es el alto.



mi slider

Código HTML:

<div id="black-box">
<div class="slider-wrapper theme-default">
        <div id="slider" class="nivoSlider rounded">
            <img src="library/images/slider/01-wireless.jpg" alt="" title="holaaa" />
            <img src="library/images/slider/02-wireless.jpg" alt="" title="chau"/>
            <img src="library/images/slider/03-wireless.jpg" alt="" title="como estas"/>
        </div>
    </div>
</div>
 

mi css

Código CSS:

/*
 * jQuery Nivo Slider v3.0.1
 * http://nivo.dev7studios.com
 *
 * Copyright 2012, Dev7studios
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 */
 
/* The Nivo Slider styles */
.nivoSlider {
    position:absolute;
    width:100%;
    overflow: hidden;
    height:780px;
    
}
.nivoSlider img {
    position:absolute;
    top:0px;
    left:0px;
}
.nivo-main-image {
    display: block !important;
    position: relative !important; 
    width: 100% !important;
 
 
 
}
 
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    border:0;
    padding:0;
    margin:0;
    z-index:6;
    display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
    display:block;
    position:absolute;
    z-index:5;
    height:100%;
    top:0;
}
.nivo-box {
    display:block;
    position:absolute;
    z-index:5;
    overflow:hidden;
}
.nivo-box img { display:block; }
 
/* Caption styles */
.nivo-caption {
    position:absolute;
    right:0px;
    bottom:0px;
    background:#000;
    color:#fff;
    width:600px;
    z-index:8;
    padding: 5px 10px;
    opacity: 0.8;
    overflow: hidden;
    display: none;
    -moz-opacity: 0.8;
    filter:alpha(opacity=8);
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
.nivo-caption p {
    padding:5px;
    margin:0;
}
.nivo-caption a {
    display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
    position:absolute;
    top:45%;
    z-index:9;
    cursor:pointer;
}
.nivo-prevNav {
    left:0px;
}
.nivo-nextNav {
    right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
    text-align:center;
    padding: 15px 0;
}
.nivo-controlNav a {
    cursor:pointer;
}
.nivo-controlNav a.active {
    font-weight:bold;
}
 

como veran el height= le puse "780px" por son los pixeles para q yo con la pagina maximizada lo vea bien, pero ese alto es el que tiene q se el resultado del total de la primer impresion de la pantalla menos el encabezado q sera de uno "300px" aprox.

[ArturoGallegos]

ya probaste aplicando

Código CSS:

html,body,.IdSlideShow{height:100%;}
 

muestra tu sitio o tu codigo para saber orientarte, de lo contrario solo jugaremos adivinanzas.

[conotrocolor]

ya subi el codigo de la pagina en el primer posteo, como se pasaria, eso que me pasaste a mi codigo?

[ArturoGallegos]

perdón no había visto el código supongo que lo agregaste mientras escribía la respuesta o ando tan ciego que no lo vi pero bueno....

en cuanto lo que agregue hace que desde el inicio el html, body y tu slide tome el alto al 100% de la pantalla.

ya viendo tu código prueba con

Código CSS:

html,body,#black-box,.slider-wrapper,.nivoSlider {min-height:100%}
 

esta linea de codigo indica que todos estos elementos tomen como minimo el 100% de la altura

[conotrocolor]

no funciona, mira, las imagenes del slider son de 3000px por 3000px osea son de alta resolucion y mas grandes, cuando pongo ese codigo q me pasaste, no me limita el slider a la pantalla, sino que me muestra las imagenes en tamaño real, y sobrepasa por mucho el alto de la primer impresion de la página.

para ver bien lo que quiero, tendrias q entrar a www.adidas.com.ar y luego rezizear la ventana, ponerla mas chica y mas grande, y ver como se acomoda el slider al total de la primer impresion de la pagina, hasta q hagas scroll y se pierda con el encabezado.


Muchas Gracias igual.

[conotrocolor]

además de medir toda la pantalla, el slider de adidas, se acomoda en el bottom (abajo) de la ventana y se ajusta siempre para tener la mejor resolución de la imagen, eso quiero hacer con mi slider, ¿es muy complicado?