MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación > Webmasters - Diseño Web - Programación - Diseño gráfico
Centrar elementos en IE (SOLUCIONADO)
WillyN:
En IE6 también lo veo igualito.
Sospecho que el problema tiene que ver con el resto del código que estás usando.
Si pones un enlace a una página donde tienes incorporado el menú se puede mirar más a fondo el asunto.
Rododendro:
Si cuando dices que lo ves igualito en IE6 te refieres a verlo tal y como aparece en la página del ejemplo, pues la verdad es que yo también lo veo tal cual. Lo que pasa es que en las pruebas que estoy haciendo en local se ve de esa misma forma, lo que significa entre otras cosas... a la izquierda. He usado Google para buscar información; y en varias páginas y blogs donde se explica cómo crear un menú con CSS, entre los comentarios añadidos por los visitantes casi siempre hay alguno con la misma duda que yo: "sí, me funciona bien, pero ¿cómo puedo centrarlo?"
WillyN:
Lo puedes centrar colocándolo en un div al cual pones en el css la siguiente propiedad:
--- Código: ---margin: 0 auto;
--- Fin del código ---
Rododendro:
Y tomando como referencia el código del menú, ¿dónde iría ese añadido? ¿Te refieres simplemente a dejar el código igual, pero "encerrándolo" en un div horizontal, transparente, algo mayor que el menú y dándole ese "margin: 0 auto;" que mencionas?
WillyN:
Así queda centrado:
--- Código: ---<html>
<head>
<style type="text/css">
body {
text-align:center; /* center #navcontainer in IE5 */
}
#navcontainer {
margin: 0 auto;
}
#navlist {
width: 100%;
padding: 0 1px 1px;
font: bold 12px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
border-top: 1px solid gray;
display: inline;
}
#navlist li a {
padding: 0.25em 0.5em 0.25em 0.75em;
border-left: 1em solid #AAB;
background: #CCD;
text-decoration: none;
}
#navlist li a:link {
color: #448;
}
#navlist li a:visited {
color: #667;
}
#navlist li a:hover {
border-color: #FE3;
color: #FFF;
background: #332;
}
</style>
</head>
<body>
<div>
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</div>
</div>
</body>
</html>
--- Fin del código ---
Para verlo tal cual copias este código, lo pegas en un documento, lo guardas como p.ej. menu.html y lo abres en tu navegador.
Navegación
[#] Página Siguiente
[*] Página Anterior
Ir a la versión completa