[CSS 3] Transitions : soucis centrage et affichage (hidden ?) [Résolu]

[khany]

Bonjour à tous et toutes !

Je me suis lancée dans les transitions accessibles depuis CSS3 mais, bien qu'étant arrivée au résultat voulu, je n'ai plus rien de centré, hélas !

Je patauge depuis entre le CSS et les divers endroits où l'on peut définir un "center" mais sans succès !

Bon, ceci est ma première étape, après j'ai d'autres petites choses à vous demander

Voici : La page en cause

Dites-moi ce que vous voulez savoir niveau CSS et autre, je posterai le code adéquat !

D'avance, merci !

[rotrevrep]

Code :

#demoSliderContainer{text-align:center;}

ceci fonctionne-t-il ?

[khany]

dans le CSS, j'ai :

Code :

#demoSliderContainer .options {padding: 3px 10px; text-align: center; min-height: 15px}

Honnêtement, au début de mes tests, tout était centré puis, à un moment ... plus de centrage !

[khany]

Je reviens vers vous pour un autre petit souci !

Je suis arrivée à faire un scale sur des vignettes mais, j'aimerais que, lorsque l'image s'agrandit, elle passe "à l'avant-plan" !

Bref pas comme chez moi : page de test

Je ne sais pas vraiment quelle propriété utiliser ! Je pense que c'est "opacity" mais je ne sais pas où la mettre !

Merci beaucoup !

PS : personne ne trouve pour le centrage (message précédent) ?

[Bovino]

Envoyé par khany

Je suis arrivée à faire un scale sur des vignettes mais, j'aimerais que, lorsque l'image s'agrandit, elle passe "à l'avant-plan" !

Il faut ajouter un z-index suffisant sur la propriété img:hover

[Bovino]

Envoyé par khany

personne ne trouve pour le centrage (message précédent) ?

Il faut supprimer la propriété width de la div #entete

[khany]

Pour le centrage : oh merci ! Je comprends maintenant. J'ai fait mon index d'abord avec le code CSS3 puis j'y ai ajouté les entête et pied de page généraux et, là, tout s'est gâché mais je ne pensais pas du tout au "width" !

Je teste avec le z-index et je pense même que je vais diminuer la taille des vignettes car cela rend très bien ! J'aimerais aussi adoucir l'effet mais, là, je vais chercher


Un e question générale : je vois des codes préfixés -ms-transform ... cela fonctionne donc pour IE maintenant ?

Merci !

[khany]

Pour le centrage, c'est impec ! Merci.

Par contre, pour le z-index, je n'y arrive pas On dirait que l'ajout de cet élément ne change rien à rien.
Pouvez-vous m'en dire un peu plus ?
Merci

[Bovino]

La page HTML peut être vue comme un empilement de calques dont la position est déterminée par l'emplacement dans le flux.
Pour les éléments positionnés (comme c'est le cas dans ta page), il est possible de préciser à quel emplacement dans la pile se trouve l'élément, du plus bas au plus haut.
En précisant un z-index élevé sur le :hover, tu permet à l'image survolée d'être "au-dessus" des autres.

Dans ta page, le z-index est négatif, ce qui n'est pas conforme et ne correspond pas à ce que tu souhaites. Mets une valeur positive à la place et ça marchera

[khany]

J'avais mis un positif avant j'ai mis d'abord le "width" de mon image, puis le double mais rien ne changeait.
Du coup, j'ai testé le négatif ... pour voir ! Voilà pourquoi la dernière version est en négatif !

Merci pour l'explication.

EDIT : je viens de mettre z-index: 1000; et aucun changement, il doit y avoir quelque chose dans mon CSS général qui perturbe le fonctionnement du z-index

[NoSmoking]

Bonjour,

Un e question générale : je vois des codes préfixés -ms-transform ... cela fonctionne donc pour IE maintenant ?

http://msdn.microsoft.com/en-us/libr...x#2dtransforms

[khany]

Merci, je garde ce lien précieusement pour suivre les évolutions !

Le web c'est pas évident quand on a eu fini ses études alors qu'internet n'existait pas encore Donc, désolée pour les questions "basiques"
Faut s'y faire

Merci

[Bovino]

En fait, il n'y a que sur Chrome que ça ne fonctionne pas tel quel semble-t-il (et je testais sur Firefox ).
En rajoutant une propriété position: relative; sur les images, ça semble fonctionner.

[khany]

Ah oui, je suis sous Chrome

Par contre, le même effet présenté sur des démos fonctionne très bien sur Chrome alors, je n'ai pas testé sous FF !

Je teste toujours le site sous IE (faut bien), Chrome et FF principalement. Opéra et Safari nettement plus rarement.

Je vais tester cela de ce pas ! Merci !

[khany]

Désolée, hier je n'ai pas pu tester ! ah la famille !!!

La solution est impeccable sous Chrome. Un grand merci !

Puis-je abuser et vous demander comment je peux faire pour que les images de l'index (celui de la première question) comprenne des images aléatoires existant dans le dossier "images-intro" et numértotée de 1 à 15 par exemple.

Afficher juste une image aléatoirement, je le fais via :

Code :

<img src="http://www.khanysims.be/images-intro/<?php echo rand(1,15); ?>.jpg" alt="Création Khany Sims">

mais, là, il s'agit d'une succession d'image aléatoire.

Pouvez-vous me donner une piste ?

Merci

[Bovino]

Je ne suis pas sur qu'il y ai une solution en CSS pour ça...
Au pire, je te renvoie vers ce script : Fondu enchainé.

[khany]

OK merci !

je connais bien ce script, il est vraiment bien ! Je vais m'en tenir à mon index actuel, comme mes images évoluent rapidement au fil des publications, je les changerai assez souvent !

Un grand merci à tous !