Forums Développement Multimédia

Aller au contenu

slide vertical full css3 (pb sur firefox)

CODE HTML CSS

6 réponses à ce sujet

#1 Mr Wide

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 125 messages

Posté 29 December 2013 - 15:41 PM

Bonjour j'essaye de faire une gallerie slideshow vertical full css3.
hors, ca marche sur chrome, mais sur firefox non (les 2 dernières versions)

sur firefox le slide et saccadé. une personne aurait une petite idée ?

Au cas ou je joint le code. Merci


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document sans nom</title>
<style type="text/css">
#slideshow {
background-color: rgba(204,255,102,1);
height: 322px;
width: 130px;
position: relative;
overflow: hidden;
}

#scontent {
list-style-type: none;
position: absolute;
margin-top: -80px;
heigt: 322px;
-webkit-transition: top 1s;
-moz-transition: top 1s;
-o-transition: top 1s;
transition: top 1s;
}
#scontent li{
display:block;
margin-bottom: 20px;
margin-left: -26px;

}
#slideshow:target #scontent {
top:105px;

</style>
</head>

<body>


<div id="slideshow">
<ul id="scontent">
<li><img src="../site_de_didier/images/bhuda_p.jpg" width="100" height="77" alt="site bhuda"></li>
<li><img src="../site_de_didier/images/topoutremer_p.jpg" width="100" height="77" alt="site top outremer"></li>
<li><img src="../site_de_didier/images/fabio_p.jpg" width="100" height="77" alt="site fabio"></li>
<li><img src="../site_de_didier/images/bhuda2_p.jpg" width="100" height="77" alt="site buhda2"></li>
</ul>
</div>
<a href="#scontent">Prev</a> - <a href="#slideshow">Next</a>


</body>
</html>


#2 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 29 December 2013 - 20:14 PM

Salut,

Tu aurais la page sur le net ?
j'ai utilisé ton code, mais les 3 images sont affichées en même temps et les erreurs dans le css me font dire que tu as peut-être essayé de simplifier le code pour poster (ce qui est une bonne chose)


heigt: 322px; //manque le h
// + manque l'accolade fermante à la fin '}'
 

"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#3 Mr Wide

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 125 messages

Posté 29 December 2013 - 20:46 PM

Bonjour dcz switcher,
Merci d'avoir répondu aussi vite. Non je n'ai pas la page sur le net.

Comme j'ai tattonné un bon moment pour essayé et modifié..le css Image IPB. Comme je test en local le cache des navigateurs prenaient le dessus (surement...)

Mais même après avoir corrigé les Fautes sur la css. ça fonctionne bien sur chrome et ça saccade sur Firefox (vider le cache) donc pas de transition ????. Image IPB

PS : j'ai suivi le tuto de Geoffrey C. sur un site très connu qui parait assez simple pourtant... sauf qu'il est en slide horizontal et passer en vertical ne devrait pas poser de problèmes.???

#4 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 30 December 2013 - 11:41 AM

Salut Mr Wide,

J'ai regardé le tuto de chez Alsacréations, il a l'air en effet plutôt simple, du moins le début, à mettre en oeuvre.

Tu ne souhaites vraiment pas utiliser de JS ?

Comme le dit Geoffrey, l'utilisation exclusive du CSS implique beaucoup de balises

Tu peux utiliser le JS pour piloter le défilement et le CSS pour l'animer, ce qui garanti un bonne fluidité (CSS) et un code épuré (JS)
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#5 Mr Wide

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 125 messages

Posté 30 December 2013 - 12:34 PM

Bonjour dcz switcher,
il est simple, mais mon étonnement est du, au le fait que mozilla n'effectue pas la transition alors que sur le tableau des compatibilité il est censé le gérer... Et je crois que c'est plus mon code qu'il ne gère pas (car mal écrit) plutôt que l'inverse. Une logique qui me rend perplexe car je n'ai "juste" remplacé qu'un left par un top...

Voir le messagedcz.switcher, le 30 December 2013 - 11:41 AM, dit :

Tu ne souhaites vraiment pas utiliser de JS ?
Comme le dit Geoffrey, l'utilisation exclusive du CSS implique beaucoup de balises
Tu peux utiliser le JS pour piloter le défilement et le CSS pour l'animer, ce qui garanti un bonne fluidité (CSS) et un code épuré (JS)
C'est ce que j'ai fini par faire...
Mais le JS je ne le maîtrise pas du tout, encore moins le php... donc moins maléable vu ce que je compte obtenir au final. (multi slide qui intéragissent sur des div).

Donc beaucoup plus complexe.... et si une simple gallerie vertical ne marche pas, ça m'inquiète pour la suite... :roll:

#6 dcz.switcher

  • Community Manager
  • PipPipPipPipPipPipPipPip
  • 2532 messages

Posté 31 December 2013 - 11:10 AM

Pourtant chez moi, ça fonctionne sans problème

MacOS 10.9 / Firefox 26

Pour tester :
http://jsfiddle.net/LdDA5/
"Ce que l'on conçoit bien s'énonce clairement et les mots pour le dire arrivent aisément"

embryon de site

#7 Mr Wide

    Ceinture Marron

  • Members
  • PipPipPipPipPipPip
  • 125 messages

Posté 31 December 2013 - 13:11 PM

Bonjour dcz switcher,
Imcompréhensible... ça fonctionne chez moi aussi sur les 2 navigateurs.
Donc j'ai du loupé un truc...
Il ne me reste plus qu'a le refaire et retester entièrement (plus simple vu la quantité de code).
Meilleurs Voeux



1 utilisateur(s) li(sen)t ce sujet

0 membre(s), 1 invité(s), 0 utilisateur(s) anonyme(s)

authorised training centre

Centre de Formation Mediabox - Adobe et Apple Authorised Training Center.

Déclaré auprès de la Direction du Travail et de la Formation Professionnelle

Mediabox : SARL au capital de 62.000€ - Numéro d'activité : 11 75 44555 75 - SIRET : 49371646800035

MEDIABOX, 23, rue de Bruxelles, 75009 PARIS

FFP