Bien, tengo un menú hecho con sprite, es decir, una imagen con todos los estados de una serie de botones de la navegación principal de una web.
Esta web usará wordpress 3.0.1 como CMS.
Lo curioso es que cuando adapto mi html a wordpress, en la parte que corresponde a enlazar los estilos utilizo la función que llama a la hoja de estilos y los carga, pero no me carga la parte de este menú hecho con sprites.
Es posible que esté mal escrito el código css de este menú? Resulta que cuando lo pruebo previo a la adaptación del html a WP, el menú funciona perfectamente, vamos, que se muestran todos los botones y sus estados funcionan perfectamente.
Este es un extracto del código que tengo en el archivo index.php
Código HTML :
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title><?php bloginfo('name'); ?><?php wp_title();?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />
<?php wp_head(); ?>
</head>
<body>
<div id="container">
<div id="header">
<div id="logo">
<h1>CR LOGO</h1>
</div><!--fin logo-->
<div id="CRDG">
<h1>Ocupación</h1>
<h1>Mi nombre</h1>
</div><!--fin CRDG-->
<ul id="menu_header">
<li><a href="#" class="inicio">INICIO</a></li>
<li><a href="#" class="portfolio">PORTFOLIO</a></li>
<li><a href="#" class="souvenir">SOUVENIR</a></li>
<li><a href="#" class="sobreMi">SOBRE MI</a></li>
<li><a href="#" class="contacto">CONTACTO</a></li>
</ul> <!--fin menu-->
</div><!--Fin header-->
<div class="separador"></div><!--fin separador--> Y este es el extracto de códido del archivo style.css que no carga del todo, puesto que el firebug me dice que sí que carga por lo menos las dimensiones, pero la parte visual no.
Código :
/* ==> MENU: <== */
#menu_header { float:left; list-style: none; margin: 0 0 0 8px; padding: 0; width:560px;}
#menu_header li { float: left; }
#menu_header li a { text-indent: -999999px; overflow: hidden; display: block; height: 56px;}
/* ==> MENU: Estados de cada botón: reposo, sobre, activo <== */
.inicio { background: url(../images/menu.png); width: 112px; background-position: 0px 0px;}
.inicio:hover { background: url(../images/menu.png); background-position: 0px -56px; }
.inicio:active { background: url(../images/menu.png); background-position: 0px -112px; }
.portfolio { background: url(../images/menu.png); width: 112px; background-position: -112px 0px;}
.portfolio:hover { background: url(../images/menu.png); background-position: -112px -56px;}
.portfolio:active { background: url(../images/menu.png); background-position: -112px -112px;}
.souvenir { background: url(../images/menu.png); width: 112px; background-position: -224px 0px;}
.souvenir:hover { background: url(../images/menu.png); background-position: -224px -56px;}
.souvenir:active { background: url(../images/menu.png); background-position: -224px -112px;}
.sobreMi { background: url(../images/menu.png); width: 112px; background-position: -336px 0px;}
.sobreMi:hover { background: url(../images/menu.png); background-position: -336px -56px;}
.sobreMi:active { background: url(../images/menu.png); background-position: -336px -112px;}
.contacto { background: url(../images/menu.png); width: 112px; background-position: -448px 0px;}
.contacto:hover { background: url(../images/menu.png); background-position: -448px -56px;}
.contacto:active { background: url(../images/menu.png); background-position: -448px -112px;}
Creo que es un problema de css en wordpress, así que posteo en esta sección. Pero si es un problema de la función de WP, siento las molestas de que lo tengan que cambiar de sección en los foros.
Un saludo y gracias.
