Problème pour positionner des éléments absolu

Bonjour à tous,

Je ne sais pas si je vais avoir de l'aide en ce jour de fête du travail mais je me résigne à poster ici... En espérant trouver de l'aide

Vous trouverez le site que je suis en train de réaliser à cette adresse (dropbox est juste réservé aux tests, ne vous scandalisez pas )

http://dl.dropbox.com/u/37161677/www/cgp/index.html

Les problèmes que je n'arrive pas à résoudre :
1/ Les gouttes d'eau ne sont pas centré, elles sont en position 'absolute'. J'ai pourtant essayé de les placer dans un bloc mais cela ne change pas. Enfin si mais je n'ai pas le résultat recherché.
2/ Quand je descends dans la page, le résultat est pas mal mais là il y'a deux sous-problèmes :
a) on descends à l'infini, l'ascenseur devient de plus en plus petit...
b) quand on reviens en position initiale tout est décalé.

Est-ce que je suis assez clair ? Quelqu'un(s) peut-il m'aider ?

Merci à vous et bonne fin de journée.

(au fait, c'est du tchèque au niveau du texte principal, pas d'affolement )

Salut,

Tu devrais nous expliquer ce que tu essayes de faire, car j'ai l'impression que tu te compliques beaucoup la vie.

Si tu veux simplement mettre une image de fond il faut passer par CSS et la répéter en x ou y et non charger plusieurs fois la même image dans l'HTML (en plus tu leurs as mis un attribut alt, hors ce sont des images décoratives, si elles doivent obligatoirement être dans le HTML elle doivent avoir un attribut alt mais vide). Donc avec une propriété type

background: url("image.png") repeat;

Si par contre ton but est de réalisé un effet parallaxe je te conseil ce tutoriel sur l'effet parallax.

En espérant t'avoir fourni quelques pistes de recherche le temps que tu nous précises ce que tu cherches à faire.

Oui c'est bien l'effet parallaxe que je veux réaliser. J'en ai essayé plusieurs et lu aussi plusieurs articles dont celui-ci (c'est d'ailleurs lui le coupable puisque tout est partie de là )

Les goûtes d'eau bougent comme je le voudrais (il y'a toutefois quelques ajustement à faire, notamment ajouter une couche de flou mais là-dessus je n'ai pas de problèmes).

Par contre le bloc 'parallax' n'est pas centré, ça c'est déjà mon premier problème. Le deuxième c'est quand tu descends l'ascenseur c'est infini, je n'ai pas de solutions actuellement là-dessus.
Et enfin quand tu reviens les éléments ne sont pas positionné comme au départ.

Par contre j'ai effectivement un bloc div 'background' pour ajouter les points sur mon background dégradé. J'ai opté pour cette solution car si je les mets directement sur Photoshop le poids de l'image explose. Là ça me permet, certes, d'ajouter un bloc div supplémentaire mais de gagner en poids fichier. Par contre, un autre problème se pose, quand tu descends, les points remontent. Autrement dis, ils ne restent pas en place ou ne garde pas la taille de la fenêtre.
Modifié par MagicCarpet (01 May 2012 - 14:16)

Je crois que la première chose sur laquelle il faut se pencher c'est le fait que tu cherches un effet qui se produit au scroll de la page, et qu'ici le contenu est trop court pour pouvoir jouir d'un tel effet. Si tu comptes mettre plus de contenu je te conseil de d'abord structurer ta page et ensuite appliquer le js/css nécessaire. Si par contre ton contenu se limite à ce que je vois sur la page, je pense que tu te fourvoies en essayant d'appliquer ce type d'effet sur une page avec si peu de contenu ^^.

Sinon tu peux prendre directement les source du tuto et remplacer par tes images, et là ça fonctionnera à coup sûr.
Modifié par Gili (01 May 2012 - 17:42)

En fait j'avais mis un deuxième div en guise de 2° 'page' pour mettre le tout en place justement. Car bien sûr quand tu scroll pour aller vers le bas il y'aura un nouveau contenu car il doit y avoir une galerie photo sur la page suivante.

Donc si je comprends bien, je ne m'en occupe pas pour le moment et je continu ?

Par contre, est-ce qu'il y'aurait un moyen de centrer le bloc parallaxe horizontalement ?
A ce sujet je me rends compte que j'ai parlé de le centrer mais il s'agit bien d'un centrage horizontal, non vertical.

Oui franchement crées l'entièreté de ta page, et ensuite seulement applique la couche de javascript, comme dans le tuto en fait ^^.

Chez moi ton bloc #parallax est centré horizontalement.

Bonsoir à tous !!!

Bon le site ou du moins l'organisation à quelque peu changé. Plus d'effet parallaxe quand on descends dans la page car le background avec les gouttes restera là en permanence.

Seul le contenu changera, car nous avons opté pour une navigation horizontale. Mais pour le moment j'ai deux problèmes à résoudre :

1/ Le menu en haut à droite (avec les ronds oranges) ne sont pas aligné verticalement. J'ai pourtant vu un article sur ce site qui parle de cette mise en forme mais impossible de les aligner pour le moment.

2/ Plus problématique, et là je peux pas avancer tant que ceci n'est pas réglé... Quand je clique sur le 2° rond (c'est le seul pour le moment qui doit fonctionner), tout le bloc de texte doit partir vers la gauche. Pour cela je voudrais utiliser le plugin easing que j'ai déjà utilisé avec succès. Mais là, rien ne se passe... A cause de la position relative dans mon CSS ? Erreur dans le JS ? Bref, si quelqu'un pouvait me guider... J'ai essayé plusieurs choses et cherché sur le net mais pour le moment sans succès.

Je vous redonne le lien avec les dernières modifications :
http://dl.dropbox.com/u/37161677/www/cgp/index.html

Merci à tous, d'avance, pour vos réponses.
Modifié par MagicCarpet (17 Jun 2012 - 18:18)

Personne ?

MagicCarpet a écrit :
1/ Le menu en haut à droite (avec les ronds oranges) ne sont pas aligné verticalement. J'ai pourtant vu un article sur ce site qui parle de cette mise en forme mais impossible de les aligner pour le moment.

Avec des LI en display:inline-block (plutôt que juste inline, afin que la hauteur de l'image soit prise en compte dans le calcul de la hauteur du LI) et du vertical-align:middle, ça devrait le faire.

MagicCarpet a écrit :
Erreur dans le JS ?

En effet, c'est une erreur dans ton code JavaScript. Si tu avais regardé les erreurs enregistrées par la console d'erreur du navigateur ou de tout outil de débugging utilisé (Web Inspector, Firebug, etc.), tu aurais d'ailleurs pu trouver cette information sans poser la question.
Je te laisse donc voir de quelle erreur il s'agit en analysant le message d'erreur retourné.

Arf, il manqué le .js dans la déclaration au niveau du HTML.
Ok pour le menu en haut à droite, merci pour ta réponse.

Mais maintenant que le JS fonctionne j'aimerais faire l'animation souhaité. Car le mouvement pour 'fermer' la zone de texte était pour un essai.

Se que j'essaye de faire depuis quelques temps maintenant c'est quand tu cliques sur le menu, le bloc de texte (avec un effet) par sur sa gauche et sort de la page alors que dans le même temps le bloc de la page suivante arrive par la droite.

En gros, je change de page. Est-ce le margin: 0 auto; dans le CSS qui 'bloque' ? Ou encore le code qui ne va pas ? J'ai essayé plusieurs trucs et regardé sur le net mais pour le moment je n'arrive à rien.

Bonne fin de soirée.


PS : en gros, est-ce que ma 'structure' HTML est bonne ou bonne à jeter ? (pour obtenir le résultat recherché)
Modifié par MagicCarpet (19 Jun 2012 - 21:33)

Pour ton effet, il te faut:
- Des blocs de contenu déjà présents dans le DOM, avec un premier bloc affiché au centre du viewport et les suivants placés en dehors du viewport.
- Utiliser JavaScript pour animer la position des blocs, sans doute en changeant la valeur de la propriété left.

Pour combiner ça avec un centrage horizontal, tu peux avoir un conteneur centré via margin:0 auto et positionné en relatif, et placer tes blocs en absolu comme enfants de ce conteneur. Ainsi un bloc affiché sera en left:0, un bloc masqué à droite sera en left:2000px par exemple, et un bloc masqué à gauche en left:-2000px. La valeur exacte à utiliser (plutôt que 2000px) peut éventuellement être calculée en JavaScript en fonction de la largeur détectée du viewport.

Ok mais à moins que je ne comprenne pas ta question, j'ai fais tout cela (enfin pas la bloc de la page suivante car je n'arrive même pas à déplacer le bloc actuel).

Mais en gros, j'ai bien un bloc div qui contient tous les éléments qui compose mon texte au centre de la page. Il est d'ailleurs placé avec un margin 0 auto. Et il est aussi en relatif.

J'utilise jQuery pour faire une animation avec un effet, je te met le code ici :

$('#gallery').click(function() {
    	$('#article').animate({
    		left: '-=200'
    	}, 'slow', 'easeOutBounce');
});

Attends, en te relisant, en fait je met un bloc div qui sert de 'fenêtre' et tous mes blocs qui composent mes pages à l'intérieur de ce div (en absolute donc) que j'anime avec le code ci-dessus. Est-ce bien ça ?

Dernier point, le viewport pour toi, c'est l'espace HTML du navigateur ou cette 'fenêtre' ?

Merci, après ta prochaine réponse je pense que j'aurais tous les éléments pour y arriver
Modifié par MagicCarpet (20 Jun 2012 - 22:01)

MagicCarpet a écrit :
Attends, en te relisant, en fait je met un bloc div qui sert de 'fenêtre' et tous mes blocs qui composent mes pages à l'intérieur de ce div (en absolute donc) que j'anime avec le code ci-dessus. Est-ce bien ça ?

Oui, c'est ça.

MagicCarpet a écrit :
Dernier point, le viewport pour toi, c'est l'espace HTML du navigateur ou cette 'fenêtre' ?

Le viewport, selon la spécification CSS, c'est la zone de visualisation du navigateur. C'est-à-dire la zone "utile" du navigateur qui affiche une page web donnée.