28172 sujets

CSS et mise en forme, CSS3

Bonjour,

L'objectif initial est simple : un diaporama, permettant de voir une photo et quand on passe la souris sur la photo, permettre d'avoir des flèches gauche et droite qui s'affichent pour naviguer vers la photo suivante ou précédante.

Cela fonctionne sans problème sur IE 6 et 7, mais pas sous FF (les flèches n'apparaissent pas du tout en superposition).

Le code CSS utilisé pour les flèches :


#navg {
position: relative;
width : 150px;
height: 200px;
left: 15px; 
top: -400px;
}

#navd {
position: relative;
width : 150px;
height: 200px;
left: 177px;
top: -400px;
}

#navg:hover {
background: url(/img/icones/fleche-g.gif) top left no-repeat;
}

#navd:hover {
background: url(/img/icones/fleche-d.gif) top right no-repeat;
}


l'affichage de la photo elle-même :
<div id="photo">
<img src='http://www.lerepairedesmotards.com/img/stunt/stunt-bike-show/stunt-bike-show-2008-1.jpg' width='465' height='700' alt='' class='border-gray' />
	<a id='navg' href='?photoid=71'><img src='/img/clear.gif' width='150' height='150' alt='Photo pr&eacute;c&eacute;dente' /></a>
	<a id='navd' href='?photoid=2'><img src='/img/clear.gif' width='150' height='150' alt='Photo suivante' /></a>
</div>

Le problème vient en partie d'un div englobant le tout qui est en float:left et relative.

les boutons s'affichent si je passe en absolute, mais du coup la grande photo centrale s'affiche en superposition par rapport au pied de page.

donc, le seul moyen que j'ai trouvé et de faire du relative et d'utiliser ensuite un top negatif (au moins ok sous IE).

L'exemple de la page du problème :
diaporama

Toute idée est la bienvenue... je sèche complètement là !

Merci
Modifié par Mikachu (07 Jul 2008 - 09:59)
La seule solution que j'ai trouvée a été de remplacer le relatif par de l'absolu; ce qui a permis de supprimer les position en négatif également.
çà marche sous IE et FF sauf que...
le fait d'être passé en absolu, la photo et sa légende passaient désormais par dessus le pied de page (dans le cas des photos verticales).

cas typique de sortie de flux...

J'ai bien trouvé la solution présentée là avec un overflow :
alsacreations
pour rajouter un div wrap...
mais si je fais çà, mes flèches de directions ne sont plus bien placées !

J'ai fini par "tricher" : j'ai forcé mon menu latéral à être plus long que le div du diaporama (plus de contenu et de liens).

Smiley murf
Modifié par ElMotard (10 Jul 2008 - 16:32)