Dans ce tuto jQuery / CSS3, nous allons ensemble, pas à pas, créer un gabarit de site internet que vous pourrez modifier par la suite pour créer votre propre site. Celui-ci aura la particularité d'avoir un slider en full page, c'est à dire des images qui vont défiler derrière notre contenu en background, tout en gardant de bonnes proportions.
Les étapes de cette formation mini site Internet :
- Nous allons dans un premier temps apprendre comment créer ce slider en full page grâce à un petit plugin très utile. Nous ajouterons les images, et quelques options dans celui-ci pour le paramétrer et arriver à un résultat convaincant.
- Ensuite, nous mettrons un footer en transparence par dessus le slider, et nous y integrerons un copyright ainsi que le menu.
- Puis, nous mettrons le logo et le menu principal du site sur la gauche.
- On ajoutera des boutons précédent et suivant pour faire passer les slides
- Un site aujourd'hui, sans les réseaux sociaux, ce n'est pas envisageable, donc nous rajouterons 3 icônes pour Facebook, Twitter et Google+ sur la droite du site. On fera appel à un autre plugin jQuery pour styliser une infobulle lors du passage de la souris sur ces icônes.
- Il faudra ensuite déplacer l'élément courant sur nos 2 menus lors du click.
- Nous lierons les 2 menus pour déplacer l'élément courant sur les 2 menus en même temps.
- On ajoutera des ancres sur les h2 de chaque contenu et une option dans le plugin pour scroller le contenu lors du click sur un élément de menu.
- On mettra un bouton dans le footer pour pouvoir cacher/montrer tout le contenu pour apprécier les slides en arrière plan.
- Enfin, nous verrons comment animer les éléments au chargement de la page pour donner plus de dynamisme à notre site.
A la fin de ce tutoriel, vous saurez comment créer un site avec un slider d'images en arrière plan qui peut servir par exemple pour un site de photographe pour présenter différentes photos en plein écran de manière élégante.
Le site complet est fourni avec ce tuto pour une meilleure compréhension de la formation.
Bon tuto à tous !!
Jetez un oeil à ces autres tuto jQuery 1.7, CSS 3
Créer un Sticky menu qui…
Dans ce tuto vidéo CSS3 et Jquery, en vidéo, nous allons voir…
Animer la hauteur d'un élément…
Dans ce tuto jQuery en vidéo, nous allons voir comment animer…
Mettre en place un panneau…
Dans ce tuto Jquery gratuit en vidéo, nous allons voir ensemble…
Mettre un background vidéo…
Dans ce tuto Jquery en vidéo, nous allons voir comment ajouter…
Créer un slider et l'intégrer…
A l'aide d'un plugin jQuery, nous allons créer un slider pour…
Créer une lightbox simplement…
Dans ce tuto Jquery en vidéo, nous verrons comment créer une…
Créer un scroll horizontal…
Dans ce tuto Jquery, en vidéo, nous allons voir ensemble comment…
Ajouter une bulle d'info enrichie…
Dans ce tuto jQuery en vidéo, nous allons voir comment créer…
Pour vous faire un avis, voici un extrait de quelques secondes. La version complète et téléchargeable de ce tuto jQuery 1.7, CSS 3 de 1 heure 53 minutes est proposée dans une résolution plus grande que l’extrait suivant :
spykrew07
, Formateur
Salut, moi c’est Adrien, j’ai 27 ans et je suis Graphiste / Webdesigner depuis 5 ans maintenant. Ancien élève de l'ESMA à Montpellier, j’ai travaillé en agence de communication pendant 3 ans et depuis peu je me suis lancé en freelance. Je souhaite partager mes connaissances avec vous membres de tuto.com et j’essaierai d’être le plus didactique possible dans mes tutoriaux. Ma devise : Webdesign is not a job, it’s a passion !
En savoir plus sur spykrew07
Témoignage des clients de spykrew07
![]()
Je viens d'acheter plusieurs de ses tutos et je trouve que Spykrew07 est un excellent formateur. je recommande ses formations!
![]()
Des tuto sympa mais parfois un peu chers.
![]()
Très bon formateur, j'ai acheté beaucoup de ses tuto, le timbre de voix passe bien en continu, et bon ritme d'apprentissage. Je recommande.
![]()
Les tutos wordpress de ce formateur sont tout simplement INDISPENSABLES
![]()
je n'ai pas encore terminé les tutos, mais pour une bille comme moi, je comprends tout. Un grand merci
Lire les autres témoignages
D'autres tuto de spykrew07
Créer un slider et l'intégrer à votre blog Wordpress
A l'aide d'un plugin jQuery, nous allons créer un slider pour vos articles de blog.…
Revisiter le logo de Twitter façon Origami
Dans ce tuto Illustrator en vidéo, nous allons revisiter le logo de Twitter, le célèbre…
Intégrer une image dans un texte
Dans ce tuto Photoshop en vidéo, nous allons voir comment intégrer une image dans un…
Créer une InfoBox scrollable
Dans ce tuto Jquery en vidéo, nous allons voir ensemble comment créer une InfoBox pour…
Notes attribuées par les utilisateurs (31 votes)
Les avis / Questions des utilisateurs (96)
Donnez votre avis ou posez une question au formateur.
Vous souhaitez commenter ce tuto vidéo ? Créez un compte gratuit. Déjà membre ? Identifiez-vous
Ce tuto en résumé ...
Ce tuto jQuery 1.7, CSS 3 d’une durée de 1 heure 53 minutes a été acheté 343 fois et a reçu une note moyenne de 5/5.
Ce tuto a été publié le 27 décembre 2011 par spykrew07, contributeur, ayant reçu une note moyenne de 4,7/5 pour l’ensemble de ses vidéos, dans la catégorie Tuto jQuery webdesign.
Tous les fichiers sources sont fournis avec cette formation. Ces derniers vous permettront de reproduire les manipulations expliquées dans cette formation.
Ce tuto video vous expliquera étape par étape, toutes les manipulations présentées par le formateur.
Toutes nos vidéos sont visionnées par notre équipe, avant d’être mises en ligne, garantissant ainsi la qualité des produits téléchargés.


















(a acheté ce tuto - 20 mai 2012)
" Excellent, une vrai tuerie ce tuto! Très bien expliqué !!! "
(a acheté ce tuto - 20 mai 2012)
" C'est une tuerie ce tuto !!!!!
Merci pour ton travail , c'est excellent !! "
(a acheté ce tuto - 07 mai 2012)
" Bonjour,
il me semble avoir lu dans les commentaires que certains membres rencontrent des problèmes concernant l'animation scroll du contenu, c'est mon cas aussi.
Après plusieurs tentatives je me suis rendu compte que seul le fichier jscroll.js fourni avec le tutoriel fonctionne, le fichier jscrollpane.js téléchargé à partir du site ne fonctionne pas. J'ai essayé de télécharger ce fichier à partir de différents navigateurs en pensant que ce dernier en était la cause mais sans succès... si quelqu'un a une réponse je suis preneur. Merci. "
(a acheté ce tuto - 04 mai 2012)
" ok problème réglé...j'ai laissé tomber l'idée de travailler avec des listes, et je gère plusieurs blocs en javascript...tout est nickel maintenant "
(a acheté ce tuto - 02 mai 2012)
" ps: j'ai tenté de créé un nouveau bloc dans chaque li, en attribuant à ce block l'overflow auto.
<ul><li><div id="nouveaubloc">blabla</div></li></ul> dans index.html
#nouveaubloc {position:relative; height:100%; width:100%; overflow:auto;} dans le css
Sans jscrollpane, aucun souci, le scroll ordinaire apparait et permet de faire défiler le texte...lorsque j'applique jscrollpane $("#nouveaubloc").jScrollPane(); aucun changement...le scroll est toujours là, mais dans sa version ordinaire. "
(a acheté ce tuto - 02 mai 2012)
" Bonjour,
Je viens de mettre mon site à jour. Les différents chapitres du site sont implantés dans une liste (#text ul li)...en overflow:auto. Le site fonctionne très bien. J'essaie d'ajouter jscrollpane pour remplacer la scrollbar par défaut, en appelant la fonction comme suit:
$("#text ul li").jScrollPane();
...la scrollbar et le contenu disparaissent. Comment puis-je m'y prendre pour appliquer jscrollpane sur '#text ul li', et non sur '#text'
Merci d'avance
"
(a acheté ce tuto - 17 avril 2012)
" Bonjour j'ai un petit souci sous IE8 avec le div principal du contenu qui au lieu d'être en transparence disparait complétement, mais à 100% d'opacité quand on le survole. Est ce que vous auriez une solution ?
Bien cordialement,
Sébastien "
(a acheté ce tuto - 16 avril 2012)
" J'ai un petit souci avec la disposition du site suivant la taille de l'écran. Dès que la résolution de l'écran change les éléments ne sont plus à la position d'origine. Merci de m'éclairer.
Sinon super tuto comme d'hab. "
(a acheté ce tuto - 06 avril 2012)
" ...autant pour moi, j'avais oublié qu'ils avaient été passés en display: block... désolé...
"
(auteur de ce tuto - 06 avril 2012)
" @iorbita On les passe en display:block dans le tuto donc on peut leur attribuer une largeur et une hauteur sans problème. "
(a acheté ce tuto - 06 avril 2012)
" Bonjour,
concernant les liens des réseaux sociaux, comment se fait-il qu'on puisse mettre une largeur et une hauteur sur des éléments de type en ligne (dans ce cas la balise <a>), est-ce le fait d'être passé en position fixed? Merci pour cet éclaircissement! :o) "
(auteur de ce tuto - 04 avril 2012)
" @djrayz Tu dois avoir un problème quelque part alors, normalement cela fonctionne sur ie8. Tu as testé à partir de mes sources ? "
(a acheté ce tuto - 03 avril 2012)
" Bonjour,
Très très bon tuto, j'ai appris beaucoup de chose !!
J'ai un seul problème = Internet Explorer 7 8
l'image de font ne load jamais ?
Merci
"
(a acheté ce tuto - 02 avril 2012)
" Tuto sympa, bien expliqué, avec des astuces en jquery bien utile, merci "
(a acheté ce tuto - 01 avril 2012)
" Excellent tuto. Clair et complet !
Un achat à faire pour tous ceux qui veulent apprendre à créer un petit site perso design !!
J'ai une petite question:
Lorsque je redimensionne la fenêtre du navigateur le div "content" garde la même taille qu'à son chargement.
Est-ce du à mes modifications ? et dans le cas contraire, existe-il un moyen pour qu'il se redimensionne en même temps que la fenêtre ? "
(a acheté ce tuto - 27 mars 2012)
" Super! vraiment bien expliqué! J'adore! Bravo a toi! "
(auteur de ce tuto - 27 mars 2012)
" @iorbita OK ça me rassure et je suis content que tu es trouvé ton erreur ! Bonne continuation ;) "
(a acheté ce tuto - 27 mars 2012)
" ...mea culpa, erreur dans l'interprétation des valeurs par défaut du plugin... :o/ "
(auteur de ce tuto - 25 mars 2012)
" @iorbita Je suis désolé, mais la je ne sais pas et je ne comprend pas trop votre problème. Il n'y a aucun soucis de mon coté... montrez moi le résultat en ligne à la rigueur pour que je puisse voir ce qu'il se passe. "
(a acheté ce tuto - 25 mars 2012)
" Le code que j’ai introduit est exactement le même que celui du tutoriel.
J'ai pu remarquer que Firefox et Opera (je n’ai pas encore contrôlé IE) ont tendance à ouvrir une nouvelle fenêtre sur toute la largeur de l’écran ce qui a comme conséquence d’ouvrir l’image de façon disproportionnée et donc tronquée. Je pensais résoudre ce problème avec l’option fit_always mais cela n’a aucune influence sur l’ouverture initiale de la fenêtre. Est-ce qu’il existe une autre façon d’obliger le navigateur à ouvrir la page concernée dans les proportions correctes? Merci. "
(auteur de ce tuto - 25 mars 2012)
" @iorbita C'est sensé fonctionner partout. J'ai testé sur Chrome, Firefox, Safari et ie9 c'est nickel. Un soucis au niveau de ton html, ou de ton fichier site.js peut-être...
Bon courage ! "
(a acheté ce tuto - 25 mars 2012)
" Bonjour,
.... est-ce que le redimensionnement des images est censé fonctionner sur tous les navigateurs? Je travaille sur Mac et personnellement le seul qui gère convenablement le redimensionnement est Chrome. Ni Safari, ni Firefox, ni Opera ne me donnent un résultat satisfaisant. J’ai beau essayer l’option fit_portrait mes images sont toujours tronquées. Seule l’option fit_always arrive à combler cette différence mais hélas avec un rectangle noir comme arrière-fond des images. Existe-t-il une autre solution? Peut-être en combinant des autres options? Merci. "
(a acheté ce tuto - 23 mars 2012)
" Excellent comme tous les tutos de spykrew07! C'est clair net et précis. Merci "
(auteur de ce tuto - 06 mars 2012)
" @0livgraphic Tu n'as qu'à les cacher des le départ tout simplement :
$("#content, #logo, #menu").hide();
Bon courage ;) "
(a acheté ce tuto - 05 mars 2012)
" Excellent tuto ! Explications très claires et précises, le formateur maitrise parfaitement son domaine. Un vrai plaisir !
J'ai cependant une question relative :
je souhaite au lancement de la page, avoir seulement et directement le Background sans avoir l'arrivée des différents éléments (#content,#logo,#menu etc.). Ces différents éléments n'apparaitront qu'au cliquage de l'élément #cacher (apparition/disparition).
Je ne vois pas ou intervenir dans "site.js"...J'ai pensé à augmenter le "delay" mais celui-ci intervient et pour la suite sans se réinitialiser au cliquage de l’élément #cacher.
Comment arriver à ce résultat?
Merci d'avance pour ce coup de pouce et encore félicitation pour vos enseignements. "
(a acheté ce tuto - 03 mars 2012)
" Trés bon tuto pour créer un site propre et rapidement.
Merci au formateur. "
(a acheté ce tuto - 22 février 2012)
" J'ai appris un tas de choses merci beaucoup ! "
(a acheté ce tuto - 21 février 2012)
" tuto vraiment intérressant, même pour les développeurs connaissant déjà assez bien les css et jquery, pleins d'astuces ! félicitation et merci ! "
(a acheté ce tuto - 16 février 2012)
" c bon j'ai régler le problème ,,,,,,,,et merci de m'avoir répondu aussi vite j'espère que tu va ne étonne avec d'autre tuto ,,cio "
(auteur de ce tuto - 15 février 2012)
" @nabilovic ça va être dur de t'aider car je ne vois pas trop le problème que tu as. Le problème est sur tous les navigateurs ? l'infobulle s'affiche t'elle ou pas du tout ? "
(a acheté ce tuto - 15 février 2012)
" bsr svp spy jai un petite souci avec tooltipsy pour la transition et l 'effet bulle ça ne fonction pas chez moi mais sur ton HTML ça marche nickel je sais que ta répondu a cette question et j'ai méme essaye avec la position absolue ça n'a rien donnez j attend votre réponse et merci d avance cio "
(auteur de ce tuto - 10 février 2012)
" @neolab112 Oui c'est volontaire, car je prends le CSS3 avec pincettes. Ce n'est pas encore compatible partout alors qu'avec Jquery ça fonctionne sur presque tous les navigateurs. "
(a acheté ce tuto - 09 février 2012)
" Très bon tuto, on voit que l'auteur maitrise son sujet.
La partie javascript est moins accessible sans connaissance préalable d'un langage de script. N'y a t'il pas certaines fonctionnalités qui auraient pu etre gérées en css3 (animations, scrollbar, classe active...) ou est-ce volontaire de recourir autant au javascript ?
Neolab "
(a acheté ce tuto - 09 février 2012)
" Bonjour spykrew,
en ouvrant le fichier avec mon ie v8, je me susi rendu compte que supersized ne fonctionne pas et que les images sont remplacées par un background gris le chargement tournant dans le vide ...
j ai essayé en regardant la syntaxe et chercher si des conflits supersized IE existaient mais au final je n arrive pas a règler le tire! Tu aurais une parade?
Merci "
(a acheté ce tuto - 09 février 2012)
" Merci pour la réponse rapide, je me suis mal exprimé, en fait actuellement tous les boutons du menu ne peuvent aller sur des liens externes (http://fr.tuto.com par ex), et je voudrais que l'un d'eux puisse servir à cet effet.
Je pensais que "return false;" était responsable de ça.
Christophe
"
(auteur de ce tuto - 09 février 2012)
" @Laendil Tu veux qu'un de tes boutons soir tjs en survrillance c'est bien ça ? Dans ce cas la, tu copies ta classe active, tu la nommes autrement, et tu l'ajoutes à ton li tout simplement. Comme ça le fonctionnement ne sera pas perturbé. Tiens moi au courant si tu es arrivé à ce que tu voulais ;) "
(a acheté ce tuto - 09 février 2012)
" Bonjour,
Tuto très intéressant et très instructif.
J'aimerais cependant ajouter un lien "actif" dans un des boutons du menu, mais la fonction "return false;" empêche de le faire.
J'ai essayé plusieurs solutions qui ne marchent pas.
Est-il possible de créer une exception pour "$("#menu li a mon lien") ?
Je cherche encore de mon côté.
Merci
Christophe "
(auteur de ce tuto - 09 février 2012)
" @twelveflowers Essaye de mettre le .icone en position:absolute plutôt qu'en fixed et normalement le texte devrait apparaître ;) "
(a acheté ce tuto - 08 février 2012)
" Bonjour tres bon tuto, res bien expliquer par contre j'ai une petite question tooltipsy n'affiche pas le texte sous safari. "
(a acheté ce tuto - 07 février 2012)
" Super Tuto...
Clair et Concis,
Comme d'Hab.
Bravo... "
(auteur de ce tuto - 05 février 2012)
" @bibindome J'avais répondu à ces questions dans les commentaires précédents ;) Je te remets les réponses :
1 - Radius : Il suffit de rajouter dans le css les préfixes -moz-border-radius (mozilla), border-radius (ie9), -o-border-radius (opera). Par contre pour ie 7 & 8 tu va devoir passé par du js pour avoir des bords arrondis (modernizr par exemple).
2 - Content mal centré : Modifie la ligne du #content dans le CSS comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}
Merci de ton achat et de ton retour positif, bye !! "
(a acheté ce tuto - 04 février 2012)
" Bonsoir et merci encore!
J ai une petite question! Sur google chrome tout apparait parfaitement et tu expliques comment obtenir les arrondis pour les autres navigateurs mais sur tous les autres navigateurs le container avec le texte central apparait a une position différente...c est le margin du content j'imagine mais a chaque fois la position que je donne n apparait pas correctement pour firefox et IE le bloc apparait une 100taine de pixels plus bas...
que faut il modifier please?
Merci d'avance ;) "
(a acheté ce tuto - 04 février 2012)
" merciiiiiiiiiiiiiiiii pour ta réponse j'esper que je trouverais un tuto pour le formulair..cio "
(auteur de ce tuto - 04 février 2012)
" @nabilovic Il faut tout simplement créer un formulaire et gérer l'envoi du message en ajax pour ne pas avoir de rechargement de page. Regardes sur tuto.com il doit y avoir des tutos la-dessus. Bye !! "
(auteur de ce tuto - 03 février 2012)
" @Tricepad Problème de version mis à jour par l'auteur du plugin !
Donc remplace le fichier mouse.js par celui-ci :
https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js
Et c'est impec !! bye ;) "
(a acheté ce tuto - 03 février 2012)
" Salut Spykrew07,
J'ai toujours un petit problème avec firefox, le plugin "jquery.mousewheel.js" ne fonctionne pas.
Ca marche parfaitement sous chrome, safari, doit-on rajouter une ligne de code ?
Merci pour ton aide. "
(a acheté ce tuto - 02 février 2012)
" Super tuto. Bien expliqué, aucun ennuie et simple à suivre.
+5 "
(a acheté ce tuto - 02 février 2012)
" merci pour ce tuto j'aurais aime te donne 100 au lieu de 5 il sera une ressource d inspiration pour moi ....j'ai juste une question j’armais bien ajoute dans le menu contacte une messagerie ça sera très utile dans mes projet avenir j'attends votre réponse avec impatience, et encore une fois mille merci "
(auteur de ce tuto - 02 février 2012)
" @c2frey Regardes du coté de Modernizr pour tout ce qui est effet css3 sous ie. Pour le background transparent compatible ie, il faut supprimer le rgba et utiliser une image en png avec du noir à 80% que tu répète en x et en y tout simplement ;)
Merci de ton achat et bon courage !! "
(a acheté ce tuto - 01 février 2012)
" Super Tuto et merci.
Par contre peux tu me dire les scripts qu'il faut employer pour que le site passe nickel sous IE car les arrondis et les fonds tramés du Content et Footer ne sont pas pris en compte me semble t-il. Comment y remédier.
Merci par avance Spykrew. "
(a acheté ce tuto - 25 janvier 2012)
" Petite question encore. Qu'est ce qui permet de stopper les déplacements sur l'axe des horizontales ? (pour le contenu centrale) "
(auteur de ce tuto - 24 janvier 2012)
" @oOLucOo C'est bizarre car j'ai fait le tuto sous Chrome et tout fonctionne parfaitement. Tu as essayé depuis les sources fournies avec le tuto ? "
(a acheté ce tuto - 24 janvier 2012)
" Bonjour à tous et bonne année.
Merci pour ce tuto riche en informations et super à suivre.
J'ai un petit soucis concernant tooltipsy (je vois dans les commentaires que je ne suis pas le seul à avoir eu ce problème)
Sur firefox il marche nickel mais sur chrome et safari l'info bulle apparaît en haut à gauche de ma page. Une solution ? "
(auteur de ce tuto - 23 janvier 2012)
" @tricepad Oui tu seras bien calé après tout sa ;) "
(a acheté ce tuto - 23 janvier 2012)
" Bonjour,
Merci pour ta réponse, pour être plus tranquille, j'ai pris Apprenez les Bases du HTML avec HTML & Apprenez les bases du HTML 2ème… avec HTML & Apprenez les bases du CSS pour intégrer votre site web avec CSS.
J'espère que là je serais opérationnel :))
Encore merci, et bravo pour votre travail
Tricepad
"
(auteur de ce tuto - 22 janvier 2012)
" @tricepad Je te conseille ma formation sur le CSS que je viens de mettre sur tuto.com, tu auras certainement la réponse à toutes tes questions et tu sauras intégrer un site web ! http://fr.tuto.com/css/apprenez-les-bases-du-css-pour-integrer-votre-site-web-css,25585.html
Merci de ton achat et ton retour positif ;) Bonne continuation dans ton apprentissage et n'hésites pas si tu as d'autres questions ! "
(a acheté ce tuto - 22 janvier 2012)
" Encore merci pour ce tuto clair, précis, efficace qui m'a appris beaucoup.
Je cherche à intégrer dans la div content
h2 "equipe",
un h3 " exemple"...
Et j'aimerais intégrer une petite photo et mon paragraphe à côté...
Comment dois je faire ?
Merci d'avance !
"
(a acheté ce tuto - 22 janvier 2012)
" Vraiment très bon, à revoir plusieurs fois pour bien tout intégrer !!
Merci beaucoup "
(auteur de ce tuto - 19 janvier 2012)
" @perspectif C'est la classe .jspTrack dans jscroll.css, tu mets #000 au lieu de la couleurs actuelle dans le background ;) Merci de ton retour positif ! "
(a acheté ce tuto - 19 janvier 2012)
" Bonjour,
Félicitations pour ce tuto...clair, précis, efficace, et très beau graphiquement, j'adore. J'ai réalisé un site à partir de ce tuto, mais j'aimerais que la scrollbar soit blanche sur fond noir. Je n'ai pas trouvé la ligne du jscroll.css à modifier pour changer le gris de la barre verticale en noir (ou transparent). Quel paramètre dois-je changer?
Merci d'avance "
(a acheté ce tuto - 19 janvier 2012)
" Merci pour ce tuto très sympa et bien expliqué. "
(a acheté ce tuto - 12 janvier 2012)
" Niiiiiiiiickel ! Merci pour ce tuto qui m'a servi d'intro au js :)
juste une petite question, concernant la div content elle ne se resize pas automatiquement quand on réduit/agrandi la fenetre, il faut rafracihir la page, une soluce?
Encore merci! Loki "
(auteur de ce tuto - 11 janvier 2012)
" @gmaurer Je suis désolé, mais me mettre un vote de 2/5 juste pour ça alors que tout le monde est ravi de ce tuto, je trouve ça un peu juste... J'utilise Notepad++ sur PC, sur Mac vous avec Coda par exemple. Je ne travaille pas du tout sur Mac, mais je ne vois pas en quoi cela bloque pour suivre le tutoriel. Le code et le résultat sur le navigateur sont les même.
Si vous pouviez modifier votre vote, je vous en serai reconnaissant car je ne pense pas que avoir fait de faute dans ce tuto. "
(a acheté ce tuto - 11 janvier 2012)
" Bonjour,
Dommage que votre tutoriel ne parle pas des applications employées pour l'édition des codes html et css. Sur Mac avec BBEdit et CSSEdit, je ne puis effectuer les mêmes opérations démontrées au début du tutoriel. la démonstration très orientée PC est déroutante pour un Mac user.
J'ai aussi acheté la formation Html5 et CSS3
c'est encore pire concernant NotePad ou il n'y a pas d'éditeur équivalent sur Mac.
Merci si vous avez un conseil quelconque.
Cordiales salutations
"
(a acheté ce tuto - 10 janvier 2012)
" Très bon tuto.
Bonne présentation des différents élements.
Bravo et merci. "
(a acheté ce tuto - 09 janvier 2012)
" impeccable merci ;)
Pour Opéra mon pb c'est que le slideshow ne trouve pas les images, du coup on ne voit que le gif animé "in progress" qui tourne , le logo et le menu qui ne s'affichent pas, et les flèches du slideshow qui ne réagissent pas au jquery. Mais j'ai vu que Opéra n'est pas forcément au top concernant les animations.. "
(a acheté ce tuto - 09 janvier 2012)
" Merci beaucoup, très instructif !! "
(auteur de ce tuto - 09 janvier 2012)
" @Fralala Alors pour les réponses à tes questions :
1 - Radius : Il suffit de rajouter dans le css les préfixes -moz-border-radius (mozilla), border-radius (ie9), -o-border-radius (opera). Par contre pour ie 7 & 8 tu va devoir passé par du js pour avoir des bords arrondis.
2 - Content mal centré : Modifie la ligne du #content dans le CSS comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}
3 - Jquery sur Opera : Je ne comprends pas ton problème, tout fonctionne à merveille.
J'espère t'avoir aidé, et merci de ton achat ;) "
(a acheté ce tuto - 09 janvier 2012)
" Bonjour,
Super tutoriel, très instructif et pédagogique !
J'ai plusieurs questions concernant l'optimisation sur les différents navigateurs :
Pour opéra : il semble que le Jquery ne passe pas, je voulais savoir si il y a des choses à rajouter afin que le slideshow tourne dessus.
Pour Firefox et IE : le radius css des menus et du content n'est pas pris en compte, y a t-il une astuce pour y remédier ? Aussi, le content ne se centre pas sur ces deux navigateurs, il se fixe sur le bas de la page. Est il possible d'optimiser ces différents points ?
Merci et encore bravo pour le rendu exceptionnel de ce tutoriel ainsi que les explications claires et concise.
"
(a acheté ce tuto - 07 janvier 2012)
" Excellent ! "
(a acheté ce tuto - 07 janvier 2012)
" Bonjour spykrew07,
j'ai beaucoup apprécié votre tuto et la clarté de l'enseignement.
Je recherche un programmeur webmaster passionné et qualifié pour participer à des projets de webdesign, et serai très heureux de travailler avec vous si disponibilité.
Architecte d'intérieur pendant de longues années, je développe maintenant mon activité dans l'infographie (website & pub).
Je vous propose donc la possibilité de partager mes projets en cours pour travailler en équipe via skype.
Merci de me tenir informé rapidement de votre intérêt.
Chaleureusement,
Bruno Martinez - Designer Graphiste -
Port : + 33(0)6 84 90 11 04
Email : designbm@me.com
Skype : crystal-design.fr "
(a acheté ce tuto - 04 janvier 2012)
" De JP71 Très très bon tuto pour qui veux apprendre ou progresser en HTML5 CSS3 et même un peu de javaScript. Le mini site fonctionne nikel sur google chrome, IExplorer, Safari, Opéra, reste un petit problème sur Firefox les ico-reseau crée un petit bogue, elle disparaisent.....et suprime pendant 2s une partie de l'affichage. Mais vraiment, j'encourage tous ceux qui veulent progresser a acheter ce tuto. En ce qui me concerne je ne suis pas pret de regreter cet achat.....MercIIIII Beaucoup...... "
(a acheté ce tuto - 03 janvier 2012)
" Un tutoriel d'une qualité remarquable.
Clair, concis, le ton est juste et le résultat aussi !
Merci pour ces deux heures de formation à acheter sans hésitation. "
(a acheté ce tuto - 01 janvier 2012)
" Bonjour
@spykrew07 :
J'ai suivi à la lettre le tuto et j'ai beau relire mon code, je ne trouve pas d'erreurs. Je vais me renseigner sur le site de l'éditeur.
Sinon, petite question : comment forcer le centrage de la div "Content" si je désire fixer la largeur de ma div à 800px et non à 50%. Cela est-il faisable ?
Un margin: auto ne fonctionne pas.
Merci de ton aide et de ta réactivité ! "
(auteur de ce tuto - 01 janvier 2012)
" @samn1 Je suis désolé mais je ne peux pas te dévoiler tout ce que j'utilise dans le tuto, sinon il n'a plus aucun interet. Sinon, pour le logo et le graphisme du site, il n'y a pas de sources a donner puisque je suis le créateur. Bonne soirée, et merci d'avance si tu comptes acheter mon tuto ;) "
(n'a pas acheté ce tuto - 01 janvier 2012)
" bonjour,
je voudrais savoir SVP quels sont les outils de travail de programmation que vous avez mis en place pour ce site et les sources de telechargement des logos et animation!
d'avance Merci "
(a acheté ce tuto - 31 décembre 2011)
" Hey niquel sa marche problème de link de la bibliothèque.. merci pour tout. Bonne année. "
(auteur de ce tuto - 31 décembre 2011)
" @mikoud Le site complet est disponible dans les sources livrées avec le tuto. Tu va dans ton compte tuto.com, après dans "vos achats" dans la sidebar tu cliques sur "mes tutos vidéos" et normalement tu as la liste des tutos que tu as téléchargé.
Devant mon tuto, tu dois avoir un bouton "visionner" pour le voir en ligne, et un bouton "télécharger" pour récupérer les sources au format zip.
Si ton dossier img est dans le fichier "architecture" alors le chemin de des images devraient être : architecture/img/image1.jpg ... je ne comprend pas trop ton problème.
Télécharges les sources, et essayes de créer la même structure de dossiers que moi.
Bon courage :D "
(a acheté ce tuto - 31 décembre 2011)
" @spykrew07 je voudrais savoir ou trouve ton ton code source dont tu parles ? la présentation de mon dossier se constitue ainsi. Nom du dossier: Site architecture/img/js/index/style/supersized/
Seul le img est le js sont dans un dossier. Dans le img j'ai 2 img plus l'image progress.gif.
Dans le dossier Js, j'ai deux fichier qui a site.js et aussi supersized.
J'ai modifier le chemin comme dans la vidéo que t'a montrer pour le supersized.css. Toujours le même soucis. Merci "
(auteur de ce tuto - 31 décembre 2011)
" @mikoud Tu as bien mis les bons chemins pour les images ? Par exemple : img/image1.jpg si tes images sont dans le dossier "img" ? Pour appeler jQuery depuis les seveurs de Google, normalement il n'y a aucun problème.
Regardes un peu la source qui est fourni avec le tuto, cela devrait peut-être t'aider à trouver ton erreur.
Si tu ne trouves pas, n'hésites pas à revenir vers moi.
Bonne formation ;) "
(a acheté ce tuto - 31 décembre 2011)
" Bonjour j'ai acheté votre tuto, j'ai un soucis déjà c'est quand je met la ligne de code pour le js, en lui indiquant les photos je sauvegarde est j'actualise sur chrome. Une page noir s'affiche mais aucune photos n'est présente ? est ce normal ? cela proviendrait t'il pas de la bibliotheque de gooogle pour le script ? Merci de votre réponse. "
(a acheté ce tuto - 31 décembre 2011)
" Super, la mousewheel fonctionne ! Merci ! 5/5 pour le support. Perso ça fait une note de 10/5... ^^ "
(auteur de ce tuto - 31 décembre 2011)
" @Trashcom Bonjour ! En effet, je viens de voir ça et j'ai la solution !
Très simple, sur le site du plugin, l'auteur nous met à disposition le script 2010 de mousewheel et du coup il ne prend pas en charge Firefox ! Donc remplace le fichier mouse.js par celui-ci :
https://github.com/brandonaaron/jquery-mousewheel/blob/master/jquery.mousewheel.js
Et le tour est joué ;) Merci de ton achat et de ton retour ! "
(auteur de ce tuto - 31 décembre 2011)
" @Pumbostar Bizarre que tooltipsy ne fonctionne pas sur Chrome, car j'ai fait le tuto justement dessus. Tu as essayé à partir des sources fourni avec le tuto ? "
(a acheté ce tuto - 31 décembre 2011)
" Bonjour,
Merci pour votre formation absolument excellente.
Je constate un léger bug chez moi : sur Chrome et Safari (MAC), le plugin Tooltipsy ne semble pas fonctionner.
Sous Firefox, il marche à la perfection donc je n'arrive pas à cibler le problème.
Merci de votre aide.
Cordialement "
(a acheté ce tuto - 31 décembre 2011)
" Juste le parfait tuto au bon moment. Avec une zoombox de grafikart, me voilà fin prêt pour sortir un pti portfolio sympa! Encore MERCI! "
(a acheté ce tuto - 30 décembre 2011)
" Super, merci pour ce tuto comme on aimerait en avoir plus ! ;o)
Par contre, pour Firefox le mousewheel ne fonctionne pas. Un petit coup de pouce pour résoudre ce problème ?
Merci ! 5/5 "
(auteur de ce tuto - 30 décembre 2011)
" @blockbuster Merci pour ton com ;) C'est vrai que ça change un peu de toutes les maquettes de site que l'on voit en ce moment et qui se ressemblent. "
(a acheté ce tuto - 30 décembre 2011)
" Belle maîtrise ! Aucune lassitude malgré la longueur du tuto (pas de temps de perdu).
Le fix pour IE9 fonctionne très bien;
En prime, un challenge créatif car ce tuto donne vraiment envie de pousser le webdesign plus avant pour concilier ce background supersized et un content à la structure plus développée.
(-: "
(a acheté ce tuto - 29 décembre 2011)
" Je ne suis pas sous IE mais sous Firefox comme c'est le cas sur mes Screenshots. :)
Néanmoins, j'ai remplacé ma ligne par ta ligne de code, et ça marche parfaitement sous Firefox.
JScrollPane me pose toujours le même problème, mais c'est peut être lié à mon navigateur, j'essaierai sur Chrome si j'ai le temps. :)
Encore une fois, très bon tuto, n'ayant jamais fait de JS avant, et très peu de CSS, je n'ai eu aucun mal à comprendre les raisonnements que tu as fais durant les différentes étapes et à finir le tuto.
Gratz :) "
(auteur de ce tuto - 29 décembre 2011)
" @devlwanted Déja merci de ton achat et de ce vote positif ;) Pour ton petit problème, je pense que tu es sous Internet Explorer 9 car quelqu'un m'a déja contacté pour ce content mal centré. En effet sous Chrome cela fonctionne à merveille.
Du coup j'ai regardé un peu le css, et en modifiant la ligne du #content comme ceci :
#content {position:absolute; overflow:auto; top:25%; left:25%; background-color:rgba(255,255,255,0.8); width:50%; height:50%; box-shadow: 0 0 20px #000; -webkit-border-radius:3px; -webkit-transition:0.3s;}
Et du coup ça fonctionne beaucoup mieux sur ie, et toujours sur Chrome ;)
Sinon, pour ton problème avec jscrollpane, je ne comprends vraiment pas pourquoi l'animation ne se fait pas, car je viens de retester mes sources sur Chrome & Internet Explorer et tout fonctionne. Tiens moi au courant.
Bye !
"
(a acheté ce tuto - 29 décembre 2011)
" Edit:
J'ai finalement continué et terminé le tutoriel cette nuit, mais j'ai toujours le même problème du content qui est mal positionné par rapport à la page et aux autres éléments.
Voilà donc le résultat que j’obtiens à la fin du tuto : http://hpics.li/88a265c
j'ai également un autre problème un peu moins gênant mais tout de même, le plugin ScrollPane ne marche pas pour l'animation ("glisser" entre les catégories). Voilà ma ligne de code, j'ai même essayé avec les fichiers sources, ça ne marche pas chez moi. :x
$("#content").jScrollPane({ hijackInternalLinks: true, animateScroll: true });
J'attends avec impatience une réponse pour pouvoir finaliser le site. :)
Enfin, excellent travail encore une fois, clair & très bien expliqué : 5/5. "
(a acheté ce tuto - 28 décembre 2011)
" Salut Spykrew07,
Je suis en train de suivre ton tuto, mais j'ai quelques problèmes vers ~1h14min.
Je suis en train de définir le style dans le CSS de la balise #content, il n'y a a priori pas de faute, mais j'ai un problème lors de l'affiche à l'écran du résultat. Le cadre du contenu devrait normalement apparaître au milieu de la page, et ne pas dépasser une certaine taille (margin de 25% et height de 50%), mais cela ne marche pas chez moi (Voir Screenshot ci-dessous).
Voilà ce qui s'affiche chez moi : http://hpics.li/5c783bf
Le cadre ne s'adapte pas correctement (ne se centre pas, et ne prend pas en compte la hauteur souhaitée, donc pas de scrollbar).
Le résultat est le même avec les fichiers sources fournis, donc le problème ne semble pas venir d'une erreur dans le code.
Je suis sur un écran 24", avec une résolution de 1920*1080.
Je n'ai pour le moment pas encore continué le tuto.
J'espère que tu pourras m'aider :)
Merci par avance !
(Sinon, excellent tuto jusque là, 5/5)
"
(a acheté ce tuto - 28 décembre 2011)
" Exellent tuto !
Très bien expliqué, simple et clair ! "
(auteur de ce tuto - 28 décembre 2011)
" Merci ;) Content que ça t'es plu !! "
(a acheté ce tuto - 27 décembre 2011)
" énorme... "