Foros del Web » Creando para Internet » CSS »

Centrar UL aún cuando actúe overflow hidden

Estas en el tema de Centrar UL aún cuando actúe overflow hidden en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 25/04/2009, 19:05
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Centrar UL aún cuando actúe overflow hidden

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.
  #2 (permalink)  
Antiguo 26/04/2009, 03:57
Avatar de adriancitov7  
Fecha de Ingreso: abril-2009
Ubicación: New York
Mensajes: 75
Antigüedad: 8 años, 7 meses
Puntos: 4
Respuesta: Centrar UL aún cuando actúe overflow hidden

si pones el codigo con gusto te ayudo
  #3 (permalink)  
Antiguo 26/04/2009, 09:39
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: Centrar UL aún cuando actúe overflow hidden

Código html:
Ver original
  1. <div id="menuDias">
  2.         <ul>
  3.             <li class="dias"><a id="dia1" href="http://localhost/webs/web/agenda/27-04-2009">27</a></li>
  4.             <li class="dias"><a id="dia2" href="http://localhost/webs/web/agenda/28-04-2009">28</a></li>
  5.             <li class="dias"><a id="dia3" href="http://localhost/webs/web/agenda/29-04-2009">29</a></li>
  6.         </ul>
  7.     </div>

Código css:
Ver original
  1. #menuDias
  2.     {
  3.     border-bottom:2px solid #858585;
  4.     height:80px;
  5.     overflow:hidden;
  6.     width:100&#37;;
  7.     }
  8.    
  9. #menuDias ul
  10.     {
  11.     text-align:center;
  12.     margin:0 auto;
  13.     width:680px;
  14.     padding:0;
  15.     }

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.
  #4 (permalink)  
Antiguo 26/04/2009, 09:53
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Centrar UL aún cuando actúe overflow hidden

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

Código css:
Ver original
  1. consideremos que el ul es "miul"
  2. consideremos que tiene un tama&#241;o de 600 de ancho y 450 de alto.
  3.  
  4. #miul{
  5. position:absolute;
  6. left:50&#37;;
  7. top:50%;
  8. margin-left:-300px;
  9. margin-top:-225px;
  10. }


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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #5 (permalink)  
Antiguo 26/04/2009, 12:40
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Centrar UL aún cuando actúe overflow hidden

Cita:
Iniciado por Bonez Ver Mensaje
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:
Ver original
  1. #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 %
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #6 (permalink)  
Antiguo 26/04/2009, 15:08
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Centrar UL aún cuando actúe overflow hidden

Cita:
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.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #7 (permalink)  
Antiguo 26/04/2009, 15:58
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: Centrar UL aún cuando actúe overflow hidden

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.
  #8 (permalink)  
Antiguo 26/04/2009, 16:25
Avatar de pzin
Moderata 😈
 
Fecha de Ingreso: julio-2002
Ubicación: Islas Canarias
Mensajes: 10.462
Antigüedad: 15 años, 4 meses
Puntos: 2098
Respuesta: Centrar UL aún cuando actúe overflow hidden

Bueno, finalmente quedó así:

Código css:
Ver original
  1. #menuDias ul
  2.     {
  3.     position:relative;
  4.     left:50&#37;;
  5.     margin-left:-370px;
  6.     width:740px;
  7.     }

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.
  #9 (permalink)  
Antiguo 26/04/2009, 17:53
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Centrar UL aún cuando actúe overflow hidden

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

Saludos!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 21:57.