Problema con href en pestañas

[WorldFox]

Saludos, estoy con una pagina web, y estoy en creando las pestañas principales, lo que ocurre es que yo primero le pongo <a> al texto del div o pestaña, pero lo que ocurre es que cuando le doy un HOVER con CSS a al atributo <a>, lo que ocurre es que solo me cambia de color de fondo el de las letras no el del div entero, y si lo pongo como <a> el div <a><div></div></a> me lo da todo como enlace pero no me cambia de color.

¿Alguien sabe que hacer?

[RafaRG]

corrígeme si lo he entendido mal: lo que quieres es que al hacer hover sobre una pestaña con un enlace, te cambie, no solo el texto, sino también el fondo de la pestaña. bien, en ese caso, debes definir un fondo (background-color) para el hover. te pongo un ejemplo:

Código PHP:

  <style type="text/css">
#pestaña a  {
   color:yellow; //color del enlace
   background-color:red; //color de fondo
   ... //resto de estilo (bordes, sombras, etc)
   }
#pestaña a:hover {
   color:green; //color del enlace en hover
   background-color:black; //color de fondo en hover
   }
</style>
<div id="pestaña"><a href="pagina.html">Enlace 1</a></div>  
   

lo que quiere decir es que, por defecto, la pestaña tendrá fondo rojo y enlace amarillo. al hacer hover, tendrá fondo negro y texto verde. puedes poner los colores que tú quieras.
¿soluciona esto tu problema?
un saludo

[IsaBelM]

una aclaración; en el caso que con <a><div></div></a> lograras lo que pretendes, es un error. ya que un elemento en línea (<a>) no puede contener a un elemento de bloque (<div>)

[WorldFox]

Pero el problema es que la pestaña es más grande que el <a> por lo que se cambia de colo solo el fondo del texto del <a> no el fondo de la pestaña entera.

No se si tendria que hacer un onMouseMove o hacer otra cosa con el hover.

[RafaRG]

pero el código que he puesto sirve para cambiar el fondo del div que encierra al enlace y, al mismo tiempo, para cambiar el color del enlace. si fuese para cambiar solo el enlace, pondría directamente a {... } o especificaría una clase o un id para el enlace.
si lo que quieres es que el div tenga cierto tamaño, debes añadirle un padding para que haga relleno y el enlace tenga más fondo.

[WorldFox]

Tengo
//el codigo css

Código:

.pestaña { height:30px; width:60px; border: 1px solid #CCCCCC;
background-color:#FFFFFF; float:right;
    border-radius: 5px 5px 5px 5px;
    color: #333333;
    font: bold 13px Arial,Sans-serif;
	margin-left:10px;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;  text-shadow: 0 1px 0 #FFFFFF}

.pestaña a { text-decoration:none; color:black; background-color:white}
.pestaña a:hover { text-decoration:none; color:white; background-color:black}


//Una pestaña
<div class="pestaña" ><a href="">Principal</a></div>

Solo se me rellena el fondo de detras de las letras, ¿que padding debo aplicar? porque aparte quiero que te enlace pulsando cualquier parte del div no solo las letras.

[RafaRG]

es que no es así como debes ponerlo. debes ponerlo como te he explicado. para este caso, sería así:
NUEVO CÓDIGO

Código PHP:

  <style type="text/css">
.pestaña a{
    height:30px;
    width:60px;
    border: 1px solid #CCCCCC;
    background-color:#FFFFFF;
    float:right;
    border-radius: 5px 5px 5px 5px;
    color: #333333;
    font: bold 13px Arial,Sans-serif;
    margin-left:10px;
    padding: 3px 10px;
    text-align: center;
    text-decoration: none;  
    text-shadow: 0 1px 0 #FFFFFF;
    }
.pestaña a:hover { 
    text-decoration:none; 
    color:white; 
    background-color:black;
    }
</style>
<div class="pestaña" ><a href="#">Principal</a></div>  
   

con esto se cambia todo el fondo al hacer hover y el div entero hace de enlace.
pruébalo, a ver qué te parece =)

[WorldFox]

Perfecto, muchisimas gracias a todos y sobre todo a ti Rafa.

[RafaRG]

nadaa. que te vaya bien