Seguro que es una tonteria

JUANFM2009 · #1 (**permalink**) 21/04/2009, 10:02

Hola a todos, seguro que es una chorrada pero la cuestion es que no me sale. He estado mirando post donde se preguntaba con centrar una pagina a 1024
y que se vea tambien en 800*600, al final he optado por una solucion qeu lei del tamaño de la pagina con un ancho de 750px y una capa que envuelva todo el codigo donde su css quede de esta forma

#cuerpo
{
margin: 0px auto;
}

en definitiva el código que me queda es el siguiente:

<body>.........

<div id="cuerpo">

<div id="imageMenu">
<ul>
<li class="quienessomos"><a href="#">Quienes Somos</a></li>
<li class="servicios"><a href="#">Servicios</a></li>
<li class="portfolio"><a href="#">Portfolio</a></li>
<li class="descargas"><a href="#">Descargas</a></li>
<li class="soporte"><a href="#">Soporte</a></li>
</ul>
</div>

<div id="contenido">hola</div>

</div>
.......
</body>

por otra parte en el css tengo el siguiente codigo:

#imageMenu {
position: absolute;
top: 0px;
left: 0px;
width: 275px;
height: 402px;
overflow: hidden;
}

#imageMenu ul {
list-style: none;
margin: 0px;
display: block;
height: 400px;
width: 1000px;

}

#imageMenu ul li {
float: left;
}

#imageMenu ul li a {
text-indent: -1000px;
background:#FFFFFF none repeat scroll 0%;
border-left: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
border-bottom: 1px solid #CCCCCC;
cursor:pointer;
display:block;
overflow:hidden;
width:46px;
height: 400px;
}

.........

.clear {
clear: both;
}

#cuerpo { <------AQUI INTENTO QEU ME REALICE EL CENTRADO
margin: 0 auto;
}

#contenido {
position:absolute;
left:275px;
top:0px;
width:575px;
height:400px;
z-index:1;
border-bottom: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
border-top: 1px solid #CCCCCC;
background-color: #FFFFFF;
}

pero no consigo que lo haga, sin embargo si quito todas las capas
y margin:0px auto; se lo aplico a imageMenu si que lo pone donde yo quiero.

¿Aguien me podria decir porqué?

Gracias

Triby · #2 (**permalink**) 21/04/2009, 16:26

Por default los divs tienen un ancho de 100% y si lo requieres en un tamaño especifico debes definirlo:

Código css:

Ver original#cuerpo {
    width:750px;
    margin:0 auto;
}

No se puede centrar algo que ocupa el 100% del espacio.

JUANFM2009 · #3 (**permalink**) 21/04/2009, 21:10

la leche!! vaya fallo, muchas gracias, sabia que se me pasaba algo
jejejeje

JUANFM2009 · #4 (**permalink**) 23/04/2009, 17:23

una pregunta más, si ademas lo quiero que centre auntomaticamente en vertical?? he probado con margin = auto; y por supuesto el tamaño del div en alto tiene 400px y lo he especificado pero verticalment no me lo alinea. Con margin:0px auto; consigo el centrado horizontal pero el vertical no lo logro.

SetheR · #5 (**permalink**) 23/04/2009, 18:27

Para alinear vertical debes jugar con los márgenes, pues los divs no se comportan como las tablas (a no ser que les de el atributo display:table).
Por ejemplo:

Código PHP:

  .acentrar{
        left:50&#37;;
    top:50%;
    margin-top:-30px;
    margin-left:-150px;
    height:60px;
    width:300px;
}

Fijate que el margintop el menos la mitad de la altura y el left, meno la mitad de la anchura..

Saludos

JUANFM2009 · #6 (**permalink**) 23/04/2009, 21:47

Jeje gracias Sether, se me habia ocurrido esa idea minutos antes de revisar el post, lo hice y fncionó. De todas formas muchas gracias por preocuparte en resolver mi duda.

SetheR · #7 (**permalink**) 24/04/2009, 02:47

De nada