Foros del Web » Creando para Internet » HTML »

Centrar un menú horizontal!

 Estas en el tema de Centrar un menú horizontal! en el foro de HTML en Foros del Web. Hola! Tengo problemita he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil, pero el problema que se ...
  #1 (permalink)  
Antiguo 23/09/2013, 22:33
 
Fecha de Ingreso: septiembre-2011
Mensajes: 233
Antigüedad: 12 años, 7 meses
Puntos: 1
Centrar un menú horizontal!
Hola! Tengo problemita he seguido un tutorial para realizar un menú horizontal, y la verdad me ha resultado muy útil, pero el problema que se me presenta es: en centrar el texto de un menú, he intentado con la propiedad text-align:center y nada por casualidad sabrán que es lo que me falta para que el texto pueda centrarse?

Código HTML: 
Ver original
  1. <!doctype html>
  2. <html>
  3.     <head>
  4.     <title>Prueba</title>
  5.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.     <style type="text/css">
  7.   /* el menú en si mismo */
  8.   .mi-menu  {
  9.     border-radius: 5px;
  10.     list-style-type: none;
  11.     margin: 0 auto; /* si queremos centrarlo */
  12.     padding: 0
  13.     text:center;
  14.     margin-left: center;
  15.     /* la altura y su ancho dependerán de los textos */
  16.     height:40px;
  17.     width: 960px;
  18.     /* el color de fondo */
  19.     background: #555;
  20.     background: -moz-linear-gradient(#555,#222);
  21.     background: -webkit-linear-gradient(#555,#222);
  22.     background: -o-linear-gradient(#555,#222);
  23.     background: -ms-linear-gradient(#555,#222);
  24.     background: linear-gradient(#555,#222);
  25.   }
  26.  
  27.   /* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
  28.   .mi-menu  br { display:none; }
  29.  
  30.   /* cada item del menu */
  31.   .mi-menu  li {
  32.     display: block;
  33.     float: left; /* la lista se ve horizontal */
  34.     height: 40px;
  35.     list-style: none;
  36.     margin: 0;
  37.     padding: 0;
  38.     position: relative;
  39.   }
  40.   .mi-menu li a {
  41.     border-left: 1px solid #000;
  42.     border-right: 1px solid #666;
  43.     color: #EEE;
  44.     display: block;
  45.     font-family: Tahoma;
  46.     font-size: 13px;
  47.     font-weight: bold;
  48.     line-height: 28px;
  49.     padding: 0 14px;
  50.     margin: 6px 0;
  51.     text-decoration: none;
  52.     /* animamos el cambio de color de los textos */
  53.     -webkit-transition: color .2s ease-in-out;
  54.     -moz-transition: color .2s ease-in-out;
  55.     -o-transition: color .2s ease-in-out;
  56.     -ms-transition: color .2s ease-in-out;
  57.     transition: color .2s ease-in-out;
  58.   }
  59.   /* eliminamos los bordes del primer y el último */
  60.   .mi-menu li:first-child a { border-left: none; }
  61.   .mi-menu li:last-child a{ border-right: none; }
  62.   /* efecto hover cambia el color */
  63.   .mi-menu li:hover > a { color: Crimson; }
  64.  
  65.   /* los submenús */
  66.   .mi-menu ul {
  67.     border-radius: 0 0 5px 5px;
  68.     left: 0;
  69.     margin: 0;
  70.     opacity: 0; /* no son visibles */
  71.     position: absolute;
  72.     top: 40px; /* se ubican debajo del enlace principal */
  73.     /* el color de fondo */
  74.     background: #222;
  75.     background: -moz-linear-gradient(#222,#555);
  76.     background: -webkit-linear-gradient(#22,#555);
  77.     background: -o-linear-gradient(#222,#555);
  78.     background: -ms-linear-gradient(#222,#555);
  79.     background: linear-gradient(#222,#555);
  80.     /* animamos su visibildiad */
  81.     -moz-transition: opacity .25s ease .1s;
  82.     -webkit-transition: opacity .25s ease .1s;
  83.     -o-transition: opacity .25s ease .1s;
  84.     -ms-transition: opacity .25s ease .1s;
  85.     transition: opacity .25s ease .1s;
  86.   }
  87.   /* son visibes al poner el cursor encima */
  88.   .mi-menu li:hover > ul { opacity: 1; }
  89.  
  90.    /* cada un ode los items de los submenús */
  91.   .mi-menu ul li {
  92.     height: 0; /* no son visibles */
  93.     overflow: hidden;
  94.     padding: 0;
  95.     /* animamos su visibildiad */
  96.     -moz-transition: height .25s ease .1s;
  97.     -webkit-transition: height .25s ease .1s;
  98.     -o-transition: height .25s ease .1s;
  99.     -ms-transition: height .25s ease .1s;
  100.     transition: height .25s ease .1s;
  101.   }
  102.   .mi-menu li:hover > ul li {
  103.     height: 36px; /* los mostramos */
  104.     overflow: visible;
  105.     padding: 0;
  106.   }
  107.   .mi-menu ul li a {
  108.     border: none;
  109.     border-bottom: 1px solid #111;
  110.     margin: 0;
  111.     /* el ancho dependerá de los textos a utilizar */
  112.     padding: 5px 20px;
  113.     width: 100px;
  114.   }
  115.   /* el último n otiene un borde */
  116.   .mi-menu ul li:last-child a { border: none; }
  117.  
  118. </style>
  119.         </head>
  120.     <body>
  121.     <ul class="mi-menu">
  122.   <li><a href="URL_enlace_1">Inicio</a></li>
  123.   <li>
  124.     <a href="#">Item 1</a>
  125.     <ul>
  126.     <li><a href="#">Sub Item</a></li>
  127.     </ul>
  128.     <li><a href="#">Item 2</a>
  129.     <ul>
  130.       <li><a href="URL_enlace_2.1">Sub Item 1</a></li>
  131.       <li><a href="URL_enlace_2.2">Sub Item 2</a></li>
  132.       <li><a href="URL_enlace_2.3">Sub Item 3</a></li>
  133.     </ul>
  134.   </li>
  135.   <li><a href="URL_enlace_3">Item 3</a>
  136.   <ul>
  137.     <li><a href="URL_enlace_2.1">Sub Item 1</a>
  138.   </ul>
  139.   </li>
  140.   <li><a href="URL_enlace_3">Item 4</a></li>
  141.   <li><a href="URL_enlace_3">Item 5</a></li>
  142. </ul>
  143.     </body>
  144. </html>
Última edición por pzin; 24/09/2013 a las 10:00 Razón: formato código
  #2 (permalink)  
Antiguo 24/09/2013, 08:37
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 14 años, 11 meses
Puntos: 1517
Respuesta: Centrar un menú horizontal!
¿Tienes mejor imagenes que podamos ver lo que haces y lo que quieres lograr?
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #3 (permalink)  
Antiguo 24/09/2013, 09:21
 
Fecha de Ingreso: septiembre-2011
Mensajes: 233
Antigüedad: 12 años, 7 meses
Puntos: 1
Respuesta: Centrar un menú horizontal!
Si tengo, como hago para adjuntar las imagenes? es que he revisado pero no consigo la opción
  #4 (permalink)  
Antiguo 24/09/2013, 09:32
Avatar de abimaelrc
Colaborador
  
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 14 años, 11 meses
Puntos: 1517
Respuesta: Centrar un menú horizontal!
Pon el enlace de donde la publicaste la imagen
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #5 (permalink)  
Antiguo 22/10/2013, 23:09
Avatar de GusleonP  
Fecha de Ingreso: octubre-2013
Ubicación: Bogota
Mensajes: 24
Antigüedad: 10 años, 6 meses
Puntos: 2
Respuesta: Centrar un menú horizontal!
Con esto tendrás los enlaces centrados!!!


Cita:
<!doctype html>
<html>
<head>
<title>Prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
/* el menú en si mismo */
.mi-menu {
border-radius: 5px;
list-style-type: none;
margin: 0 auto; /* si queremos centrarlo */
padding: 0;
text-align:center;
/* la altura y su ancho dependerán de los textos */
height:40px;
width: 960px;
/* el color de fondo */
background: #555;
background: -moz-linear-gradient(#555,#222);
background: -webkit-linear-gradient(#555,#222);
background: -o-linear-gradient(#555,#222);
background: -ms-linear-gradient(#555,#222);
background: linear-gradient(#555,#222);
}

/* si es necesario, evitamos que Blogger de problemas con los saltos de línea cuando escribimos el HTML */
.mi-menu br { display:none; }

/* cada item del menu */
.mi-menu li {
display:inline-block;
height: 40px;
list-style: none;
margin: 0;
padding: 0;
position:relative

}
.mi-menu li a {
color: #EEE;
display: block;
font-family: Tahoma;
font-size: 13px;
font-weight: bold;
line-height: 28px;
padding: 0 14px;
margin: 6px 0;
text-decoration: none;
/* animamos el cambio de color de los textos */
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
/* eliminamos los bordes del primer y el último */
.mi-menu li:first-child a { border-left: none; }
.mi-menu li:last-child a{ border-right: none; }
/* efecto hover cambia el color */
.mi-menu li:hover > a { color: Crimson; }

/* los submenús */
.mi-menu ul {
border-radius: 0 0 5px 5px;
left: 0;
margin: 0;
opacity: 0; /* no son visibles */
position: absolute;
top: 40px; /* se ubican debajo del enlace principal */
/* el color de fondo */
background: #222;
background: -moz-linear-gradient(#222,#555);
background: -webkit-linear-gradient(#22,#555);
background: -o-linear-gradient(#222,#555);
background: -ms-linear-gradient(#222,#555);
background: linear-gradient(#222,#555);
/* animamos su visibildiad */
-moz-transition: opacity .25s ease .1s;
-webkit-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
/* son visibes al poner el cursor encima */
.mi-menu li:hover > ul { opacity: 1; }

/* cada un ode los items de los submenús */
.mi-menu ul li {
height: 0; /* no son visibles */
overflow: hidden;
padding: 0;
/* animamos su visibildiad */
-moz-transition: height .25s ease .1s;
-webkit-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.mi-menu li:hover > ul li {
height: 36px; /* los mostramos */
overflow: visible;
padding: 0;
}
.mi-menu ul li a {
border: none;
border-bottom: 1px solid #111;
margin: 0;
/* el ancho dependerá de los textos a utilizar */
padding: 5px 20px;
width: 100px;
}
/* el último n otiene un borde */
.mi-menu ul li:last-child a { border: none; }

</style>
</head>
<body>
<ul class="mi-menu">
<li><a href="URL_enlace_1">Inicio</a></li>
<li><a href="#">Item 1</a>
<ul>
<li><a href="#">Sub Item</a></li>
</ul>
<li><a href="#">Item 2</a>
<ul>
<li><a href="URL_enlace_2.1">Sub Item 1</a></li>
<li><a href="URL_enlace_2.2">Sub Item 2</a></li>
<li><a href="URL_enlace_2.3">Sub Item 3</a></li>
</ul>
</li>
<li><a href="URL_enlace_3">Item 3</a>
<ul>
<li><a href="URL_enlace_2.1">Sub Item 1</a>
</ul>
</li>
<li><a href="URL_enlace_3">Item 4</a></li>
<li><a href="URL_enlace_3">Item 5</a></li>
</ul>
</body>
</html>

Etiquetas: css, enlace, href
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 17:26.