Foros de daboweb
MULTIMEDIA, Video digital, Grabación, Diseño gráfico, Diseño web, Programación => Webmasters - Diseño Web - Programación - Diseño gráfico => Mensaje iniciado por: Flugtelero en 08 de Agosto de 2007, 07:31:28 pm
-
Hola, se me ha ocurrido intentar sustituir unos iconos de navegación por un menú horizontal CSS, pero no hay manera de que se muestre correctamente ni en IE ni en Firefox. Con el primero la lista aparece incluida en un especie de "seudodiv" embrionario del mismo color y anchura que el contenedor general; con Firefox la última de las cinco pestañas se fusiona con la primera... ¡desde abajo!
Para clarificar mejor la cosa, los códigos son, por un lado, el que citaba en www.daboweb.com/foros/index.php/topic,31091.0.html (http://www.daboweb.com/foros/index.php/topic,31091.0.html); y por otro, éste creado por Eric Meier y tomado de la lista ofrecida en www.xyberneticos.com/index.php/2007/05/03/lista-de-menu-en-css-para-tus-disenos/ (http://www.xyberneticos.com/index.php/2007/05/03/lista-de-menu-en-css-para-tus-disenos/) :
HTML
<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>
CSS
#navlist
{
padding: 0 1px 1px;
margin-left: 0;
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;
}
¿Alguien sabe cómo "domesticar" el menú de marras? |o|
-
¿Donde está el css de #navcontainer?
Con el código que has puesto veo el menú bien, identico, en Firefox, IE6 y 7, Opera y Netscape pero en Safari no queda bien.
Así que no creo que el problema tiene su origen este código sino en otra parte de tu código. :)
-
Gracias por tu respuesta, WillyN, la verdad es que el dichoso menú me tiene de los nervios :panic:. Anteriormente probé otro que tampoco me funcionaba; y el caso es que no sé qué puede estar fallando. El resto del código de la página es simple a más no poder...
Saludos
P.D: a todo esto, ¿cuál es el defecto que tiene en Safari?
-
En vez de botones se ven rayitas, o sea, los botones tienen una altura de 3 pixels como mucho. :blind:
¿Por qué no publicas el código completo de la página para poder ver mejor qué y cómo están las cosas?
-
Recojo tu sugerencia, WillyN; de todas formas, primero intentaré alguna cosilla más a ver si soluciono el entuerto. Si no tengo éxito (cosa bastante probable, a juzgar por los resultados hasta ahora) ya pondré aquí el código íntegro, aunque es básicamente el incluido en el post cuyo link añadí al abrir este asunto. De hecho, si bien no lo tengo delante ahora mismo, no creo que me dejase en el tintero nada -o nada relevante al menos- que suponga una novedad a lo ya expuesto. Pero insisto: si tras la prueba que voy a hacer no hay cambios, podrás verlo aquí en su totalidad.
Un saludo y gracias ;-)
-
Si yo veo el menú perfectamente con el código que pones aquí es obvio que hay algo en el resto del código que está causándete problemas.