Centrar Menu CSS

0c3l0tl · #1 (**permalink**) 18/05/2011, 12:42

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

yonaida · #2 (**permalink**) 18/05/2011, 13:35

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.

IsaBelM · #3 (**permalink**) 18/05/2011, 13:54

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;

0c3l0tl · #4 (**permalink**) 18/05/2011, 18:02

Cita:

Iniciado por IsaBelM

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

IsaBelM · #5 (**permalink**) 19/05/2011, 07:34

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 */

0c3l0tl · #6 (**permalink**) 19/05/2011, 11:34

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

IsaBelM · #7 (**permalink**) 19/05/2011, 12:43

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>

0c3l0tl · #8 (**permalink**) 21/05/2011, 16:56

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!!