Foros del Web » Creando para Internet » CSS »

Problema con href en pestañas

Estas en el tema de Problema con href en pestañas en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 26/10/2011, 12:46
 
Fecha de Ingreso: octubre-2011
Mensajes: 230
Antigüedad: 10 años, 3 meses
Puntos: 75
Problema con href en pestañas

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?
  #2 (permalink)  
Antiguo 26/10/2011, 12:58
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 10 años, 6 meses
Puntos: 13
Respuesta: Problema con href en pestañas

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
  #3 (permalink)  
Antiguo 26/10/2011, 13:07
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 13 años, 7 meses
Puntos: 1011
Respuesta: Problema con href en pestañas

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>)
  #4 (permalink)  
Antiguo 26/10/2011, 13:08
 
Fecha de Ingreso: octubre-2011
Mensajes: 230
Antigüedad: 10 años, 3 meses
Puntos: 75
Respuesta: Problema con href en pestañas

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.
  #5 (permalink)  
Antiguo 26/10/2011, 13:17
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 10 años, 6 meses
Puntos: 13
Respuesta: Problema con href en pestañas

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.
  #6 (permalink)  
Antiguo 26/10/2011, 13:59
 
Fecha de Ingreso: octubre-2011
Mensajes: 230
Antigüedad: 10 años, 3 meses
Puntos: 75
Respuesta: Problema con href en pestañas

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.
  #7 (permalink)  
Antiguo 26/10/2011, 14:11
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 10 años, 6 meses
Puntos: 13
Respuesta: Problema con href en pestañas

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;
    
border1px solid #CCCCCC;
    
background-color:#FFFFFF;
    
float:right;
    
border-radius5px 5px 5px 5px;
    
color#333333;
    
fontbold 13px Arial,Sans-serif;
    
margin-left:10px;
    
padding3px 10px;
    
text-aligncenter;
    
text-decorationnone;  
    
text-shadow0 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 =)
  #8 (permalink)  
Antiguo 26/10/2011, 14:27
 
Fecha de Ingreso: octubre-2011
Mensajes: 230
Antigüedad: 10 años, 3 meses
Puntos: 75
Respuesta: Problema con href en pestañas

Perfecto, muchisimas gracias a todos y sobre todo a ti Rafa.
  #9 (permalink)  
Antiguo 26/10/2011, 14:50
Avatar de RafaRG  
Fecha de Ingreso: julio-2011
Ubicación: Córdoba, España
Mensajes: 124
Antigüedad: 10 años, 6 meses
Puntos: 13
Respuesta: Problema con href en pestañas

nadaa. que te vaya bien

Etiquetas: hover, href, pestañas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 04:15.