Ver Mensaje Individual
  #1 (permalink)  
Antiguo 30/06/2009, 11:49
javi_cassi
 
Fecha de Ingreso: enero-2008
Mensajes: 268
Antigüedad: 16 años, 3 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 13:08