Foros del Web » Creando para Internet » CSS »

Centrar Menu CSS

Estas en el tema de Centrar Menu CSS en el foro de CSS en Foros del Web. Hola que tal encontre un menu con listas y CSS el cual es el siguiente: Código: HTML: <div id="menuh"> <ul> <li><a href="#menuh" id="primero">Inicio</a></li> <li><a href="#menuh">Comentarios</a></li> ...
  #1 (permalink)  
Antiguo 18/05/2011, 12:42
 
Fecha de Ingreso: mayo-2011
Mensajes: 39
Antigüedad: 5 años, 10 meses
Puntos: 0
Centrar Menu CSS

Hola que tal encontre un menu con listas y CSS el cual es el siguiente:

Código:
HTML:

<div id="menuh">
        <ul>
                <li><a href="#menuh" id="primero">Inicio</a></li>
                <li><a href="#menuh">Comentarios</a></li>
                <li><a href="#menuh">Noticias</a></li>
                <li><a href="#menuh">Contacto</a></li>
                <li><a href="#menuh">Acerca de nosotros</a></li>
        </ul>
</div>
y el css es el siguiente:

Código:
#menuh {
        font: 80% "Trebuchet MS", Arial, Helvetica, sans-serif;
        margin-top: 20px;
}

#menuh ul, li {
        list-style-type: none;
}

#menuh ul {
        margin: 0;
        padding: 0;
}

#menuh li {
        float: left;
}

#menuh a {
        text-decoration: none;
        color: #3366CC;
        background: #F0F7FC;
        display: block;
        padding: 3px 10px;
        text-align: center;
        border: 1px solid #ACCFE8;
        border-width: 1px 1px 1px 0;
}


#menuh a#primero {
        border-left: 1px solid #ACCFE8;
}

#menuh a:hover {
        background: #DBEBF6;
}
aqui mismo encontre un proble aismilar y lo que sugerian era hacer un

width de 600px
y otro hacerle un width de 100%

pues lo hice pero no me resulto, estoy seguro que lo meti mal pero ando algo bloqueado, podrian ayudarme, gracias. Saludos
  #2 (permalink)  
Antiguo 18/05/2011, 13:35
Avatar de yonaida  
Fecha de Ingreso: marzo-2011
Ubicación: Barcelona
Mensajes: 123
Antigüedad: 6 años
Puntos: 20
Respuesta: Centrar Menu CSS

no entiendo bien tu problema, dices de centrar menu pero no con respecto a que.
si es con respecto al resto de la pagina,se puedes jugar con margin hasta que lo posiciones.
__________________
Everybody Else It's Doing It, So Why Can't We?
  #3 (permalink)  
Antiguo 18/05/2011, 13:54
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 9 meses
Puntos: 1010
Respuesta: Centrar Menu CSS

para centrar usa la propiedad margin
Cita:
margin: 0 auto; // centrado horizontal
como en el selector menuh tienes esto
Cita:
margin-top: 20px;
cambialo por
Cita:
margin: 20px auto 0 auto;
  #4 (permalink)  
Antiguo 18/05/2011, 18:02
 
Fecha de Ingreso: mayo-2011
Mensajes: 39
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Centrar Menu CSS

Cita:
Iniciado por IsaBelM Ver Mensaje
para centrar usa la propiedad margin

como en el selector menuh tienes esto

cambialo por
Gracias por responder, pero lamentablemente no me funciono tu solucion, y respondiendo la primer respuesta quiero central el menu con respecto a la pagina, probare lo que mencionas, gracias a los dos. Saludos
  #5 (permalink)  
Antiguo 19/05/2011, 07:34
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 9 meses
Puntos: 1010
Respuesta: Centrar Menu CSS

vale, es que no tiene ancho, con lo que el bloque menuh está ocupando el 100%
Cita:
margin: 20px auto 0 auto;
width: 500px; /* por poner algo, no se cuanto ocupa */
  #6 (permalink)  
Antiguo 19/05/2011, 11:34
 
Fecha de Ingreso: mayo-2011
Mensajes: 39
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Centrar Menu CSS

Hola que tal, gracias efectivamente con width a 900px se centro un poco, le cambie a 1000px y regreso a la forma original todo hacia la izquierda, no se a que se deba, otra cosa que queria preguntar es que si uso px el menu se vera bien en monitores mas grande con resoluciones de 1920 y ese tipo, gracia. Saludos
  #7 (permalink)  
Antiguo 19/05/2011, 12:43
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 8 años, 9 meses
Puntos: 1010
Respuesta: Centrar Menu CSS

en lugar de usar unidades absolutas (px, cm, etc...) puedes usar unidades relativas (%, em). los porcentajes dan sus problemas en algunos casos y los em no son fáciles de usar.

un ejemplo simple de uso de em
Cita:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Documento sin título</title>
<style type="text/css">
body {font-size: 20px;}
#bloque {font-size: 1em;} /* 20px */
.bloque2 {font-size: 1.8em;} /* 36px */
.bloque3 {font-size: 0.8em;} /* 16px */
</style>
<script type="text/javascript">
function tamEm(elm) {
alert(Number(getComputedStyle(document.getElementB yId(elm), '').fontSize.match(/(\d+)px/)[1])+'px');
}
</script>
</head>
<body>
<div id="bloque">Si se cambia el tamaño de fuente del body, cambiará el tamaño de fuente de los demás bloques
<div id="bloque2" class="bloque2">Otro tamaño</div>
<div id="bloque3" class="bloque3">Otro tamaño</div>
</div>
<input type="button" onclick="tamEm('bloque')" value="Tamaño de Inicio" />
</body>
</html>
  #8 (permalink)  
Antiguo 21/05/2011, 16:56
 
Fecha de Ingreso: mayo-2011
Mensajes: 39
Antigüedad: 5 años, 10 meses
Puntos: 0
Respuesta: Centrar Menu CSS

Hola que tal aqui de nuevo te comento que ya logre centrar el menu de un amnera ams facil, utilice lo siguente:

en la hoja de estilo quite el

float:left

y agregue el

display:inline

y la parte del texto del menu lo centre:

text-aligin:center

con eso me quedo perfectamente centrado sin importar la resolución, gracias a todos por sus comentarios y ayuda. Saludos

TEMA CERRADO!!

Etiquetas: Ninguno
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 02:09.