Foros del Web » Creando para Internet » CSS »

Menu con UL centrado y en una misma linea

Estas en el tema de Menu con UL centrado y en una misma linea en el foro de CSS en Foros del Web. Estoy haciendo un menú en una página. Hace poco leí que es mejor poner los menús en listas por accesibilidad, manejo y no recuerdo que ...
  #1 (permalink)  
Antiguo 25/06/2008, 12:31
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Menu con UL centrado y en una misma linea

Estoy haciendo un menú en una página. Hace poco leí que es mejor poner los menús en listas por accesibilidad, manejo y no recuerdo que tanto, por tanto, lo estoy poniendo así:
Código HTML:
<ul>
<li><a href="pagina1.html">página1</a></li>
<li><a href="pagina2.html">página2</a></li>
<li><a href="pagina3.html">página3</a></li>
</ul> 
La idea que tenía, era poner el clásico sencillo menú de tipo

página1 | página2 | página3

Centrado. Para ello, lo puse dentro de un div clase menú que lo centra, y luego estas dos líneas para ponerlo en la línea:
Código:
#menu{list-style:none;}
#menu li{float:left;}
Por supuesto, el "float:left" hace que por tanto, el menú se ponga a la izquierda, y se pierda el centrado. ¿Cómo puedo hacer para lograr el efecto que deseo? Gracias de antemano
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #2 (permalink)  
Antiguo 25/06/2008, 12:40
 
Fecha de Ingreso: junio-2008
Mensajes: 14
Antigüedad: 9 años, 6 meses
Puntos: 0
Respuesta: Menu con UL centrado y en una misma linea

Prueba con esto, la estructura cambia un poco pero básicamente es lo mismo:

Código HTML:
<div id="miMenu">
     <ul class="menu">
    	<li>Menú 1</li>
    </ul>
    <ul class="menu">
    	<li>Menú 2</li>
	</ul>
    <ul class="menu">
    	<li>Menú 3</li>
    </ul>
</div> 
Código PHP:
#miMenu {
    
background-color#CCCCCC;    
    
overflowhidden;
}

#miMenu ul.menu {
    
font-familyGenevaArialHelveticasans-serif;
    
font-size12px;
    list-
stylenone;
    
floatleft;
    
margin0px 0px 0px 0px;
    
padding-left5px;
    
padding-right5px;
    
padding-top2px;
    
padding-bottom2px;
    
displayblock;

y para añadir submenús:

Código HTML:
<ul class="menu">
    	<li>Menú 3
        	<ul>
            	  <li>Primer elemento</li>
                  <li>Segundo elemento</li>
                  <li>Tercer elemento</li>
                </ul>
        </li>
</ul> 
  #3 (permalink)  
Antiguo 25/06/2008, 12:48
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Menu con UL centrado y en una misma linea

Gracias. El overflow:hidden me ayudó con un problema que hacía que la siguiente línea se pusiera a continuación (Detalle que noté después), pero el menú sigue sin centrar. ¿Alguna idea? .~.
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #4 (permalink)  
Antiguo 25/06/2008, 13:16
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Menu con UL centrado y en una misma linea

Hola, daPhyre

¿Recuerdas el ejemplo de ayer del menú con cambio de ID en el body?

Le he hecho un pequeño retoque, y te sirve si tienes definido el tamaño de los botones. Si no también lo puedes adaptar.
La jugada es hacer una caja con el tamaño final de la suma de los botones y centrar esa caja.

A ver si te sirve.

Mikel.
  #5 (permalink)  
Antiguo 25/06/2008, 14:01
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Menu con UL centrado y en una misma linea

Tienes razón, se debe poner un ancho específico al menú, pues lo que me centra es el ul estando los li como flotantes. El punto negativo es que no se adaptará dinámicamente (Dentro de un mes que lo olvide, pelearé una hora con el maligno "salto de linea" en mi menú ), pero al menos funciona perfecto y cumple su misión. ¡Gracias de nuevo Sensei Mikel!
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
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 08:50.