Pregunta chorra del día, fondo de celda

[1pere3]

Tengo un menú horizontal, mi intención es que al pasar el ratón por encima del texto, el fondo de la celda cambie de color, pero por ahora solo consigo que me cambie el fondo del link y no de la celda.

Código HTML:

.menu a { font-size: 12px; font-weight: bold; color: #FFFFFF; background-color: #B30208; text-decoration: none;}
.menu a:hover { font-size: 12px; font-weight: bold; color: #FFFFFF; background-color: #E80000; text-decoration: none;}

[JavierB]

Hola 1pere3

Añade en .menu a

width:100%; display:block;

Saludos,

[1pere3]

Tks Javier, además he añadido

height: 100%;

porque me fallaba la altura al tener una imagen al lado del menú.

Me sigue fallando algo, el problema es que el texto no hay forma de alinearlo en el centro. No me funciona el valign="middle" en la tr o td ni nada en el CSS externo.

Copio el código actual del CSS.

Código HTML:

.menu a {font-family: arial,verdana; font-size: 12px; font-weight: bold; color: #FFFFFF; background-color: #B30208; text-decoration: none; width:100%; height:100%; display:block; text-transform: uppercase;}
.menu a:hover { font-family: arial,verdana;	font-size: 12px; font-weight: bold;	color: #FFFFFF;	background-color: #E80000; text-decoration: none; width:100%; height:24px; display:block; text-transform: uppercase;}

[axterixv]

podrias mostrar que hay en tu HTML para hacerse una mejor idea de lo que buscas por favor?

[1pere3]

Axterixv, gracias por tu interés. Este es el HTML de la tabla.

Código HTML:

<table width="100%" cellspacing="0" cellpadding="0">
		<tr>
			<td width="319"><img src="images/actualidad-menu.jpg" alt="Cabecera"></td>
			<td class="menu"><a href="index.php">portada</a></td>
			<td width="80px">
			<script type="text/javascript" language="JavaScript1.2">
<!--
stm_bm(["menu3b0f",720,"","blank.gif",0,"","",1,0,250,0,500,1,0,0,"","",0,0,1,2,"default","hand",""],this);
stm_bp("p0",[1,4,0,0,0,0,0,0,100,"",-2,"",-2,50,0,0,"#999999","transparent","",2,0,0,"#000000"]);
stm_ai("p0i0",[0,"NOTICIAS","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,1,1,"#B30208",0,"#F23134",0,"","",3,3,0,0,"#FFFFF7","#000000","#FFFFFF","#FFFFFF","bold 12px Arial","bold 12px Arial",0,0],80,24);
stm_bpx("p1","p0",[1,4,0,0,0,0,0,0,100,"progid:DXImageTransform.Microsoft.Wipe(GradientSize=1.0,wipeStyle=1,motion=forward,enabled=0,Duration=0.60)",5,"",-2,50,0,0,"#999999","transparent","",3]);
stm_aix("p1i0","p0i0",[0,"    ENTREVISTAS ","","",-1,-1,0,"","_self","","","","",0,0,0,"","",0,0,0,0],0,22);
stm_aix("p1i1","p1i0",[0,"    CRÓNICAS "],0,22);
stm_aix("p1i2","p1i0",[0,"    PREVIAS "],0,22);
stm_aix("p1i3","p1i0",[0,"    RESULTADOS "],0,22);
stm_aix("p1i4","p1i0",[0,"    CLASIFICACIONES "],0,22);
stm_aix("p1i5","p1i0",[0,"    OTROS "],0,22);
stm_ep();
stm_ep();
stm_sc(1,["transparent","transparent","","",3,3,0,0,"#FFFFF7","#000000","","",7,9,0,"","",7,9,0,0,200]);
stm_em();
//-->
</script>
			</td>
			<td class="menu"><a href="cronica.php">envía tu crónica</a></td>
			<td class="menu"><a href="partidos.php">partidos</a></td>
			<td class="menu"><a href="enlaces.php">enlaces</a></td>
		</tr>
	</table> 

[1pere3]

alguien me hecha un cable?

[Mikmoro]

Como el selector "a" lo tienes con un height de 100%, y el "a:hover" de 24px, te produce ese efecto. Debes añadir al selector "a" un line-height: 24px;, de esta manera:

.menu a { font-family: arial,verdana;
font-size: 12px;
font-weight: bold;
color: rgb(255, 255, 255);
background-color: rgb(179, 2, 8);
text-decoration: none;
width: 100%;
height: 100%;
display: block;
text-transform: uppercase;
line-height: 24px;
}

.menu a:hover { background-color: rgb(232, 0, 0);
height: 24px;
}

Además, te sobran un montón de reglas del hover. Te las quitado. Prueba a ver qué tal.

Mikel.

[1pere3]

Perfecto, muchas gracias.