centrar contenido al medio no me funciona

artforhum · #1 (**permalink**) 04/09/2013, 18:47

hola,

estoy intentando alinear el conteniado de mi página al centro con la propiedad margin:0 auto; en el containe o wrapper y no me lo ajusta del todo al centro..

a parte tengo un slideshow descargado de internet y este slide no me lo ajusta, supongo que es porque está en position:absolute, pero me gustaria saber como poder ajustarlo y sino tmbien intente sacarlo de position absolute, pero entonces el problema es que al pasar las imagenes, se coloca una abajo de la otra, como podria arreglar esto??

aqui os dejo el codigo

muchas gracias

Código HTML:

Ver original<body>
    <div id="container">
        <header>
            <h1> LOGO </h1>
            <nav>
                <ul>
                    <li> 
                        <a class="nav2" href="#"> Inicio </a> 
                    </li>
                    <li> 
                        <a class="nav1" href="#"> Quienes somos </a> 
                    </li>
                    <li> 
                        <a class="nav2" href="#"> Cursos </a> 
                    </li>
                    <li> 
                        <a class="nav3" href="#"> Proyectos </a> 
                    </li>
                    <li> 
                        <a class="nav2" href="#"> Galería </a> 
                    </li>
                    <li> 
                        <a class="nav3" href="#"> Contacto </a> 
                    </li>
            </nav>
        </header>
        <section>
            <div id="slideshow">
                <div class="img" id="img-0" style="z-index:0;">
                    <img src="img/img-slide1.jpg" width="900" height="350" />
                </div>
          
                <div class="img" id="img-1" style="z-index:10;">
                    <img src="img/img02.jpg" width="900" height="350" />
                </div>
          
                <div class="img" id="img-2" style="z-index:20;">
                    <img src="img/img03.jpg" width="900" height="350" />
                </div>

Código CSS:

Ver originalbody{
        width:100%;
    }
    #container{
        width:1200px;
        margin:0 auto;
    }
                        /* HEADER */
    header{
        margin:50px 10px 10px 40px;
        overflow:hidden;
    }
 
    .......
 
#slideshow {
    width:900px;
    height:350px;
    position:absolute;
    top:100px;
    left:30px;
}
 
#slideshow .img {
    width:100%;
    height:100%;
    position:absolute;
    visibility:hidden;
    top:100px;
    left:30px;
    float:left;
}

http://www.subirimagenes.net/i/130905024555870418.jpg

C2am · #2 (**permalink**) 05/09/2013, 12:18

Bueno, nada mejor que una buena lectura para aprender.
Te lo podría explicar, pero la verdad que no podría superar esto:
http://ksesocss.blogspot.com/2012/05...6-maneras.html

Saludos

artforhum · #3 (**permalink**) 09/09/2013, 08:40

gracias c2am por tu respuesta, lo voy a leer!!