Foros del Web » Creando para Internet » CSS »

Dudas Hover y Active

Estas en el tema de Dudas Hover y Active en el foro de CSS en Foros del Web. Hola chicos!!! Cómo andáis por estos lares del foro??? Bueno, como véis vuelvo a darle de nuevo a esto de CSS, y parece que desde ...
  #1 (permalink)  
Antiguo 30/06/2009, 12:49
 
Fecha de Ingreso: enero-2008
Mensajes: 268
Antigüedad: 9 años, 11 meses
Puntos: 11
Dudas Hover y Active

Hola chicos!!!
Cómo andáis por estos lares del foro???

Bueno, como véis vuelvo a darle de nuevo a esto de CSS, y parece que desde la competencia de enero hasta hoy se me ha olvidado casi todo... en fin.... desastre.

El caso es que estoy tratando de hacerle una web a un amigo, y ya está casi casi terminada. Sólo me faltan alguno retoques. La web: www.vientoymar.org

El caso es que uno de sus apartados, concretamente en este:
http://www.vientoymar.org/vuelta_al_...ripulacion.php

estoy haciendo un menu con la tripulacion.
Como véis, parece que está bien (no hagáis caso de la foto del barco del fondo, ya la cambiaré en su momento) Y digo esto, porque cuando haces el rollover, se ven bien los datos de cada persona. Eso está muy bien......
peeeeeeeeeeeeeeeeeeeeeeerooooooooooo tengo varios problemas:

- el primero es que en el ie6 no me funciona para nada. HORROR!!!! Y no sé por qué.
- Y el segundo es que además del hover, hago un active de manera que cuando pinchas sobre cada persona se te queda la informacion debajo. Como podréis ver funciona, pero si acontinuiacion hago rollover sobre otra persona se me solapa la informacion de uno y otro. Cómo puedo solucionar esto. He estado pensando y no veo modo alguno (creo qeu al final tendré que quitar el hover) Por cierto, la solucion de darle back ground no vale, porque se supone que la imagen del barco llegará hasta abajo por lo que no quiero ponerle fondo.

Así que ete ahí mi problema.
A ver si me podéis ayudar con el tema que me tiene frito.

Os adjunto el codigo html y el css para realizarlo todo.
Muchas gracias de antemano. Que tengáis un buen día.

HTML
EDITO (sólo os pongo dos a´s para no poner todo el codigo, que no aporta nada.
Cita:
<div id="tripulantes">
<a class="trip" href="#nogo"><b>Ángel Sáinz de la Maza</b>
<span><img src="images/trip1.jpg" alt="Gelo" title="Gelo"/><br />
<ul>
<li>Comunidad Autónoma: Cantabria</li>
<li>Residencia: Astillero</li>
<li>Año nacimiento: 1.947</li>
<li>Profesión: Corredor de Seguros</li>
<li>Titulación náutica: Capitán de Yate</li>
<li>Experiencia en navegación de altura a vela:</li>
<ul><li>1.992-2004-2005 Cruce del Atlántico</li>
<li>1994- Azores-Vigo</li>
<li>2001 Azores-Fuengirola</li>
<li>2004-2006-2007-2008 Mediterráneo: Cerdeña, Mesina, Eólidas,
Jónicas, Túnez, Malta, Montenegro, Croacia, Atenas, Creta </li>
</ul>
</ul>
</span>
</a>
<a class="trip" href="#nogo"><b>Josefina Gonzalez</b>
<span><img src="images/trip2.jpg" alt="Piru" title="Piru"/><br />
<ul>
<li>Comunidad Autónoma: Cantabria</li>
<li>Residencia:Santiago de Cudeyo</li>
<li>Año nacimiento: 1.947</li>
<li>Profesión: Funcionaria Autonómica</li>
<li>Titulación náutica: Patrón de Yate</li>
<li>Experiencia en navegación de altura a vela:</li>
<ul><li>2004-2005 Cruce del Atlántico</li>
<li>2004-2006-2007-2008 Mediterráneo. Cerdeña, Mesina, Eólidas,
Jónicas, Túnez, Malta, Montenegro, Croacia, Atenas, Cíclades, Creta </li>
</ul>
</ul>
</span>
</a>
</div>
CSS

Cita:
#tripulantes {
height:315px;
position:relative;
width:460px;
}

.trip {
cursor:pointer;
display:inline;
float:right;
margin:7px 10px;
text-decoration:none;
width:200px;
}

.trip span {
display:none;
width:440px;
}

.trip span img {
float: right;
padding: 25px 0px 0px 10px;
}

.trip:hover span {
display:block;
left:6px;
position:absolute;
top:100px;
z-index:20;
}

.trip:focus span, .trip:active span {
visibility: visible;
display:block;
left:6px;
position:absolute;
top:100px;
z-index:10;
}

Última edición por javi_cassi; 30/06/2009 a las 14:08
  #2 (permalink)  
Antiguo 30/06/2009, 16:49
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Dudas Hover y Active

Hola Javi:
Cuanto tiempo. Encantado con tu vuelta.
Bueno, lo más relevante que veo en un vistazo superficial:
Tienes alojado en un enlace (<a...>) elementos que no puede contener, como es una lista de definición.
Creo que la superposición de los datos es porque su contenedor no tiene fondo para ocultar el anterior: .trip span
Los problemas con ie6, entre otras cosas, seguramente se deban a que aplicas las speudoclases a elementos que no son enlaces (.trip:hover span)

No se si será fallo mio, pero me parece que algunas propiedades no las está aplicando, según veo en fierebug.

Lo que intentas hacer, me recuerda bastante a las cajas que utilicé en Enero. El código provenía de aquí, quizás te ayude.

Un saludo, y disculpa la brevedad de la respuesta.

P.D.: Me gustó uno de los objetivos declarados: " Expandir la Cultura Marítima y de la Buena Mesa del Mar Cantábrico" ¿admiten acoplados?
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++

Última edición por kseso?; 30/06/2009 a las 16:55
  #3 (permalink)  
Antiguo 01/07/2009, 01:15
 
Fecha de Ingreso: enero-2008
Mensajes: 268
Antigüedad: 9 años, 11 meses
Puntos: 11
Respuesta: Dudas Hover y Active

Hola Kseso, gracias por contestar!!!!

Cita:
Creo que la superposición de los datos es porque su contenedor no tiene fondo para ocultar el anterior
Sí, seguro que es eso, es más, si le pongo background sale perfectamente, pero si hago esto pierdo la transparencia con la imagen de fondo (ahora la del barco es pequeña, pero se supone que llegará hasta el final). Por eso mi pregunta, queria saber si alguien sabía hacerlo de algun otro modo. No sé, cambiandole alguna otra propiedad en el hover, o algo así... seguiré investigando.

Y sí, el propósito es hacer parecido a lo que hiciste en la competencia... estudiaré los códigos.

Bueno, pues gracias por la ayuda prestada, a ver si lo saco pronto. Y respecto a lo de la buena mesa.... supongo qeu si

Ale, un abrazo y que tengáis buen día.
Por cierto, si a alguien se le ocurre como arreglar el problema de la superpoosicion que me diga!!!
  #4 (permalink)  
Antiguo 01/07/2009, 01:33
Avatar de ivor  
Fecha de Ingreso: abril-2005
Ubicación: Venezuela
Mensajes: 673
Antigüedad: 12 años, 7 meses
Puntos: 2
Respuesta: Dudas Hover y Active

La solución está en jQuery, podrías hacer un Slide 'On Click' y 'On Hover' respecto a IE echale una ojeadita a este selector de navegadores con Javascript... salva vidas ;) http://rafael.adm.br/css_browser_selector/
__________________
Twitter: ipad
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 14:08.