Problema color menu css en blog

kahlo84 · #1 (**permalink**) 31/05/2011, 17:24

Hola, le estoy añadiendo un menú al blog de mi hermana, pero no consigo hacer que aparezca una imagen que tengo alojada en imageshack cuando se pasa el cursor por el botón. No hay manera de quitar el color gris que aparece y ya le he dado mil vueltas, a ver si me podéis echar un cable.

El CSS es este:

Código:

<style type='text/css'>

.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://img838.imageshack.us/img838/7158/menunegro.jpg) center center repeat-x;
}

.solidblockmenu li{
display: inline;
}

.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}

.solidblockmenu li a:visited{
color: white;
}

.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: url(http://img801.imageshack.us/img801/6749/menurosa.jpg) center center repeat-x;
}

</style>

Y este el el html

Código:

<ul class="solidblockmenu">
<li><a href="http://www.bdebelleza.blogspot.com" title="">Inicio</a></li>
<li><a href="http://bdebelleza.blogspot.com/2010/06/sorteos.html" title="">Sorteos</a></li>
<li><a href="http://bdebelleza.blogspot.com/2010/06/premios.html" title="">Premios</a></li>
</ul>
<br style="clear: left"/>

kahlo84 · #2 (**permalink**) 01/06/2011, 06:47

Alguien me puede echar una mano? El blog en cuestión es este: www.bdebelleza.blogspot.com

Ventru3 · #3 (**permalink**) 01/06/2011, 08:00

A mi si me funciona. Solo he reseteado el margin y el padding del html y el body y he añadido el wrapper para centrarlo y le he quitado un center que no hacia falta.

Código HTML:

Ver original<!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" xml:lang="es" lang="es">
 
<head>
    <meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
    <meta content="Beastak" name="Efbeezy">
</head>
 
<body>
 
<style type='text/css'>
 
html, body {
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
}
 
.solidblockmenu{
margin: 0;
padding: 0;
float: left;
font: bold 13px Arial;
width: 100%;
overflow: hidden;
margin-bottom: 1em;
border: 1px solid #625e00;
border-width: 1px 0;
background: black url(http://img838.imageshack.us/img838/7158/menunegro.jpg) center repeat-x;
}
 
#wrapper {
    margin: 0px auto;
    width: 600px;
}
 
.solidblockmenu li{
display: inline;
}
 
.solidblockmenu li a{
float: left;
color: white;
padding: 9px 11px;
text-decoration: none;
border-right: 1px solid white;
}
 
.solidblockmenu li a:visited{
color: white;
}
 
.solidblockmenu li a:hover, .solidblockmenu li .current{
color: white;
background: url(http://img801.imageshack.us/img801/6749/menurosa.jpg) center repeat-x;
}
 
</style>
<div id="wrapper">
 
    <ul class="solidblockmenu">
        <li><a href="http://www.bdebelleza.blogspot.com" title="">Inicio</a></li>
        <li><a href="http://bdebelleza.blogspot.com/2010/06/sorteos.html" title="">Sorteos</a></li>
        <li><a href="http://bdebelleza.blogspot.com/2010/06/premios.html" title="">Premios</a></li>
    </ul>
 
</div>
 
</body>
 
</html>

alexg88 · #4 (**permalink**) 01/06/2011, 08:35

Tienes otra regla css que se superpone a la regla que utilizas para poner la imagen.

La regla que se superpone es la siguiente:

Código CSS:

Ver original.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: none repeat-x scroll 0 -100px #444444;
  color: #FFFFFF;
}

Revisa la css con el validador de la w3c ya de paso.

kahlo84 · #5 (**permalink**) 01/06/2011, 08:59

Hola, muchisimas gracias por responder. He modificado el código y sigue sin salirme, he probado con Firefox, Chrome y Explorer y nada, sigue saliendo el color #141414 en el botón cuando paso el cursor.

Incluso he probado a poner otro menú que he encontrado en una página de recursos copiandolo entero y sale todo bien excepto el color #141414 que parece que no hay manera de quitarlo...

kahlo84 · #6 (**permalink**) 01/06/2011, 09:02

Cita:

Iniciado por alexg88

Tienes otra regla css que se superpone a la regla que utilizas para poner la imagen.

La regla que se superpone es la siguiente:

Código CSS:

Ver original.tabs-inner .widget li.selected a, .tabs-inner .widget li a:hover {
  background: none repeat-x scroll 0 -100px #444444;
  color: #FFFFFF;
}

Revisa la css con el validador de la w3c ya de paso.

Muchas gracias! He borrado esa regla y ahora si que funciona, uff me estaba ya volviendo loco... jejej
Ahora mismo me pongo también a revisar la css con el validador. Muchas gracias a todos! un saludo.

kahlo84 · #7 (**permalink**) 13/11/2011, 11:15

Vuelvo a este post de hace un tiempo porque vuelvo a tener un problema con el mismo menú. La cosa es que he ido añadiendo categorías y ahora se me ha quedado algo pequeño.

Estoy probando con el código y quitando el overflow si lo veo más grande (más de lo que me gustaría) pero sale muy a la derecha.

Cómo podría hacer para ajustarlo al ancho del blog? Llevo ya tiempo con esto y me estoy volviendo loco :S

Muchísimas gracias por vuestro tiempo, un saludo!

rege · #8 (**permalink**) 15/11/2011, 06:35

Cambia el width actual por el que necesites:

Código:

.tabs-outer {
    display: block !important;
    margin: 0 auto;
    position: relative;
    width: 900px;
}

kahlo84 · #9 (**permalink**) 15/11/2011, 11:58

Muchas gracias por tu respuesta, con ese código he conseguido que salga el menú entero, pero por más que modficio los 900px al menú no se le cambia el tamaño, y tampoco puedo alinearlo ni centrarlo :S

Un saludo!