Centrar UL aún cuando actúe overflow hidden

[pzin]

Muy buenas,

tengo un menú que necesitaría centrar en una capa. Hasta ahí no hay problema, con darle un ancho y poner un margin auto perfecto. Tiene un overflow hidden la capa. Lo que necesito es que si, UL mide 100, y la capa midiera 50, me siguiera centrando UL en la capa. Es decir, que los dos extremos son los que se dejaran de ver.
Sería un efecto parecido a centrar una imagen de fondo, cuyo centro, siempre estará en el centro.

Saludos y gracias.

[adriancitov7]

si pones el codigo con gusto te ayudo

[pzin]

Código html:

<div id="menuDias">
        <ul> 
            <li class="dias"><a id="dia1" href="http://localhost/webs/web/agenda/27-04-2009">27</a></li>
            <li class="dias"><a id="dia2" href="http://localhost/webs/web/agenda/28-04-2009">28</a></li>
            <li class="dias"><a id="dia3" href="http://localhost/webs/web/agenda/29-04-2009">29</a></li>
        </ul>
    </div>
 

Código css:

#menuDias
    {
    border-bottom:2px solid #858585;
    height:80px;
    overflow:hidden;
    width:100%;
    }
    
#menuDias ul
    {
    text-align:center;
    margin:0 auto;
    width:680px;
    padding:0;
    }
 

Digamos que el segundo enlace, o el segudo item de la lista, aunque el width sea inferior a 680 y se recorten item, siempre debe de estar en el centro. Como ya dije, el efecto que busco es como centrar una imagen de fondo horizontalmente, y que lo primero que desaparece serían los laterales de forma igual.

[Dalvenjha]

Uhmmm podría probar usando position:absolute. ¿Como es esto? pues veamos, simplemente haces lo sgte:

Código css:

consideremos que el ul es "miul"
consideremos que tiene un tamaño de 600 de ancho y 450 de alto.
 
#miul{
position:absolute;
left:50%;
top:50%;
margin-left:-300px;
margin-top:-225px;
}
 

Entonces, con relación al div contenedor, siempre estará centrado, y si sobrepasa por a o b el contenedor, lo que se esconderá serán primero los bordes y asi.

[kseso?]

Iniciado por Bonez

Como ya dije, el efecto que busco es como centrar una imagen de fondo horizontalmente, y que lo primero que desaparece serían los laterales de forma igual.

Código css:

#menudias ul li {background url(tuimagen.jpg) no-repeat center center; /*resto de propiedades*/}
 

el fondo lo posicionas con la expresión left/right, top/bottom, center, o también en tanto por ciento %

[Dalvenjha]

Tiene un overflow hidden la capa. Lo que necesito es que si, UL mide 100, y la capa midiera 50, me siguiera centrando UL en la capa. Es decir, que los dos extremos son los que se dejaran de ver.

Yo creo que su último comentario lo hizo para graficarnos más o menos como es que quería el efecto, puesto que habla de dos capas distintas en su post.

En todo caso tendremos que esperar a que venga y diga que es lo correcto.

[pzin]

Si, lo de la imagen de fondo lo decía porque el efecto que busco es ese pero aplicado a una capa.

Dalvenjha ahora mismo ceno y pruebo a ver qué tal va. Aunque tiene buena pinta.

[pzin]

Bueno, finalmente quedó así:

Código css:

#menuDias ul
    {
    position:relative;
    left:50%;
    margin-left:-370px;
    width:740px;
    }
 

Dado que la altura es fija, solamente me interesaban los atributos left y margin-left. Y tuve que usar posicionamiento relativo porque si no sale totalmente del flujo del html.

Pero bueno, como se ve, funciona perfectamente bien:


Muchas gracias Dalvenjha.

[Dalvenjha]

De nada man, por cierto, si ese es tu diseño, de lo poco que he visto, me está gustando un tanto.

Saludos!