Foros del Web » Creando para Internet » CSS »

problemas a:hover

Estas en el tema de problemas a:hover en el foro de CSS en Foros del Web. Hola otra vez, tengo un problema con la funcio hover (respondiendo a mi pregunta anterior, hover solo funciona con a:hover en IE). Pero mi problema ...
  #1 (permalink)  
Antiguo 28/10/2008, 13:25
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
problemas a:hover

Hola otra vez, tengo un problema con la funcio hover (respondiendo a mi pregunta anterior, hover solo funciona con a:hover en IE). Pero mi problema es q cuando utilizo <a href... para hacer un link se me desajusta toda la pagina porque hereda las propiedades de antes, si alguien tiene la amabilidad de ayudarme cuelgo mi codigo para explicarme mejor.

gracias!
  #2 (permalink)  
Antiguo 28/10/2008, 13:27
Avatar de DragonX
Colaborador
 
Fecha de Ingreso: mayo-2002
Ubicación: Funkyland
Mensajes: 8.339
Antigüedad: 15 años, 6 meses
Puntos: 153
Respuesta: problemas a:hover

dejanos ver tu código CSS
  #3 (permalink)  
Antiguo 28/10/2008, 13:38
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problemas a:hover

Te explico, si visitas la pagina www.gartxi.co.cc entenderas lo que estoy haciendo, pero el problema es q IE no lo entiende, y para que lo entienda tengo que hacer todo con <a en vez de con <p (espero q se entienda)

el problema es que los links a los archivos me desbaratan toda la pagina porque se ve que heredan propiedades del a:hover.

En el codigo que cuelgo los links van con <p solo para que se vean bien, pero claro el link no funciona.

He intentado crear mas estilos para a pero siempre me hace la misma jugada.

Espero que se entienda, muchas gracias!!

CSS

ul.franjas {
width:900px;
height:1800px;
margin:0;
padding:0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;


}

ul.franjas li {
display:inline;
margin:0;
padding:0;
}

ul.franjas li a {
display:block;
height:1800px;
width:110px;
border-right:1px solid #f6f6f6;
text-align:justify;
float:left;
outline:none;
text-decoration:none;
}

ul.franjas li a b {
display:block;
font-size:17px;
text-transform:uppercase;
margin-bottom:10px;
}

ul.franjas li a span {
display:none;
padding:20px;
text-align:justify;

}

ul.franjas li a:hover {
width:350px;
font-size:1px; }

ul.franjas li a:hover span {
display:block;
}


a.s1 {background-color:#a0a0a0; color:white;}
a.s2 {background-color:#868645; color:white;}
a.s3 {background-color:#ddbd58; color:white;}
a.s4 {background-color:#dd904e; color:white;}
a.s5 {background-color:#dd6e45; color:white;}


HTML

<ul class="franjas">

<li>

<a href="#" class="s1">
<span>
<img src="imagen/Arbol2.jpg" width="110" height="110">
<b>gearte Produkzioak</b><h5>Goza ezazu geartek eskeintzen dizkizun aukera desberdinekin.</h5>
</span>gearte Produkzioak
</a>
</li>

<li>

<a href="#" class="s2">
<span><b>Komikiak</b>
<p href="komiks/Lorontzi.pdf"><div id="zona1"><img src="imagen/Lorontzi.jpg" height="180" width="110"></p> </div>
<p href="komiks/Arranopolar.pdf"><div id="zona1"><img src="imagen/Arrano.jpg" height="180" width="110" ></p></div>
<p href="komiks/Raul.pdf"><div id="zona1"><img src="imagen/Raul.jpg" height="180" width="110"></p></div>
<p href="komiks/Hegaldia.pdf"><div id="zona1"><img src="imagen/Hegaldia.jpg" height="180" width="110"></p></div>
<p href="komiks/Gajate.pdf"><div id="zona1"><img src="imagen/Gajate.jpg" height="180" width="110"></p></div>
<p href="komiks/Stwarts.pdf"><div id="zona1"><img src="imagen/Stwarts.jpg" height="180" width="110"></p></div>

</span>Komikiak
</a>
</li>
</ul>
  #4 (permalink)  
Antiguo 30/10/2008, 15:37
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problemas a:hover

Nadie sabe nada?
  #5 (permalink)  
Antiguo 30/10/2008, 15:54
Avatar de Null_  
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 9 años, 1 mes
Puntos: 30
Respuesta: problemas a:hover

Hola

No he probado el código, pero te digo que estas en lo correcto con que la pseudo-clase a:hover es solo para los links (porque IE no lo reconoce en otros elemento como el <LI>)
Te recomiendo que uses flash para hacer esa web, la he visto en IE y esta demasiado deforme y no me dan ganas de arreglar tu código.
Y por otro lado pusiste el atributo HREF que no existen para <p>.

Suerte
  #6 (permalink)  
Antiguo 30/10/2008, 17:31
 
Fecha de Ingreso: octubre-2008
Mensajes: 8
Antigüedad: 9 años, 1 mes
Puntos: 0
Respuesta: problemas a:hover

Gracias null, el problema es que tendre q aprender bien el tema del flash, te digo que lo puse con <p> ya que con <a> me hereda todos los atributos de a:hover y me destroza la pagina.De todas maneras, es posible meter un <a> dentro de otro <a>??

Gracias de todos modos, lo intentare con flash.
  #7 (permalink)  
Antiguo 30/10/2008, 18:40
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: problemas a:hover

Se puede hacer perfectamente que un enlace (a) se comporte exactamente igual que un párrafo (p), y no entiendo bien, porque "a" no podría heredar estilos de a:hover, en todo caso al revés.

No obstante, hay también un javascript

http://code.google.com/p/ie7-js/

que hace que cualquier elemento pueda aceptar un hover en IE como en los demás navegadores.
__________________
Visita mi nueva web idplus.org
  #8 (permalink)  
Antiguo 30/10/2008, 19:02
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: problemas a:hover

Cita:
<li>

<a href="#" class="s2">
<span><b>Komikiak</b>
<p href="komiks/Lorontzi.pdf"><div id="zona1"><img src="imagen/Lorontzi.jpg" height="180" width="110"></p> </div>
<p href="komiks/Arranopolar.pdf"><div id="zona1"><img src="imagen/Arrano.jpg" height="180" width="110" ></p></div>
<p href="komiks/Raul.pdf"><div id="zona1"><img src="imagen/Raul.jpg" height="180" width="110"></p></div>
<p href="komiks/Hegaldia.pdf"><div id="zona1"><img src="imagen/Hegaldia.jpg" height="180" width="110"></p></div>
<p href="komiks/Gajate.pdf"><div id="zona1"><img src="imagen/Gajate.jpg" height="180" width="110"></p></div>
<p href="komiks/Stwarts.pdf"><div id="zona1"><img src="imagen/Stwarts.jpg" height="180" width="110"></p></div>

</span>Komikiak
</a>
</li>
</ul>
¿Nadie ha visto el galimatías en el html? O ¿estoy equivocado?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
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




La zona horaria es GMT -6. Ahora son las 17:23.