[Tuto] Volet d'accueil, fluidité et abeilles
Imprimé depuis: Forum openElement
Categorie: openElement
Nom du Forum: Scripts pour votre site
Description du Forum: Exemple de scripts utilisables dans les blocs de codes
URL: https://forums.openelement.uk/fr/forum_posts.asp?TID=20188
Date: 19 Mar 2024 à 07:36 Version logiciel: Web Wiz Forums 12.04 - http://www.webwizforums.com
Sujet: [Tuto] Volet d'accueil, fluidité et abeilles
Posté par: Larsene
Sujet: [Tuto] Volet d'accueil, fluidité et abeilles
Posté le: 30 Nov 2014 à 19:25
Hello,
Ce tutoriel fait partie de la collection des http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne" rel="nofollow - Tuto Vidéos de Larsène
Il
va vous expliquer comment réaliser une page d'accueil comme celle-ci,
avec une photo pleine page avec un menu en bas de la fenêtre, qui va s'ajuster en haut de la fenêtre au scroll et dont la partie haute est fluide et s'ajuste à l'écran d'affichage.
Il permet de vois les outils de OpenElement permettant une page fluide, découvrir comment utiliser les panneaux d'élément en mode relative plutôt que absolute, complété par du script jquery, et aborde le principe des éléments "volants" dont la position est définie par un script jquery soit en fixed soit en relative selon un évènement (ici, le scroll sur la page)
Sur
la capture précédente, on voit bien le menu qui s'ajuste en bas de la fenêtre. On voit moins l'effet au scroll et au redimensionnement ! (les photos sont miennes)
L'exemple est visible ici : http://stalagtic.com/BeesDemo.htm" rel="nofollow - http://stalagtic.com/BeesDemo.htm
Tutoriel disponible ici : https://www.youtube.com/watch?v=wq9inenYV_4" rel="nofollow - https://www.youtube.com/watch?v=wq9inenYV_4
Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé.
Code CSS
.hand{ cursor:pointer; }
.titre { font-size: 15vw !important; text-shadow: 0px 0px 3px #000; }
.soustitre { font-size: 3vw !important; text-shadow: 0px 0px 1px #000; }
.panneaumenu{ -moz-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5); -webkit-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5); -o-box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5); box-shadow: 0px 02px 2px 0px rgba(255, 192, 0, 0.5); z-index:100000 !important; } |
Code JAVASCRIPT
function larsene() { var hauteur = $(window).height(); var largeur = $(window).width(); /*redimensionnement panneau élément photo*/ $("#panneauhaut").css({width:largeur,height:(hauteur-40),top:'0px',left:'0px','z-index':'0','position':'absolute'}); /*redimensionnement corps de page*/ var top = hauteur-40; $("#corpspage").css({top:(top+40)+'px',left:'0px'}); /* div ancre ancre*/ $("#ancre").css({top:top+'px',left:'0px'}); /*placement menu*/ $("#menu").css({width:largeur,top:top+'px',left:'0px'});
/*dimensionnement de xBody*/ var hauteurXBody = $("#corpspage").height(); if (hauteurXBody<(2*hauteur)){ $("#XBody").css({height:(2*hauteur)+'px'}); } /*repositionnement correct du menu*/ var scroll = $(window).scrollTop(); var positioninitiale=$("#ancre").position().top - scroll;
if (positioninitiale<0){ $("#menu").css({position: "fixed", top: 0}); } if (positioninitiale>0){ $("#menu").css({position: "relative",top :positioninitiale+scroll}); } }
$(document).ready(function() { larsene();
$(document).on('scroll', function(){ var scroll = $(window).scrollTop(); var positioninitiale=$("#ancre").position().top - scroll;
if (positioninitiale<0){ $("#menu").css({position: "fixed", top: 0}); } if (positioninitiale>0){ $("#menu").css({position: "relative",top :positioninitiale+scroll}); } });
});
/*au redimensionement*/ $(window).resize(function() { larsene(); });
/*clic scroll vers contenu page*/ $("#bouton_page").click(function(){ $('html, body').animate({ scrollTop: $("#corpspage").offset().top }, 1000); });
/*clic vers top*/ $("#bouton_top").click(function(){ $('html, body').animate({ scrollTop: 0 }); });
|
Et
si ce tutoriel vous a plût et qu'il vous apporte de l'aide et des
idées, n'hésitez pas à me faire un don, au regard du travail nécessaire
pour le construire, le réaliser, le mettre en ligne, le commenter, etc ! https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=G39GM7UC9EDWG&lc=FR&item_name=Larsene%20%2d%20%20Tutoriels¤cy_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Réponses:
Posté par: Larsene
Posté le: 30 Nov 2014 à 22:19
ça y est tuto vidéo chargé !
|
Posté par: brolysan
Posté le: 01 Dec 2014 à 10:13
les scripts ont disparus?
edit : non, Chrome qui a "buggé"
tu penses qu'il y a moyen de bidouillé ton tuto pour le rendre un brin responsive? Le menu par exemple et les blocs de texte/image?
|
Posté par: Larsene
Posté le: 01 Dec 2014 à 10:30
Bien sûr, le rendre responsive est assez simple via du jQuery.... Mais dépasse le cadre que je voulais donner à ce tuto.
On a déjà une partie haute qui est presque responsive. Pour le rendre complètement responsive :
1 - ajuster le menu pour le rendre en déroulant passé une certaine taille écran 2 - ajuster le contenu bas sur plusieurs colonnes et modifier celles-ci en fonction de la largeur ecran (côte à côte au dela d'une certaine largeur, en dessous l'une de l'autre en dessous)
Je trouve que le livre blanc responsive de Miratech est assez bon à ce sujet : http://miratech.fr/v5bis/wp-content/themes/miratech/blog/Responsive-design-miratech.pdf" rel="nofollow - http://miratech.fr/v5bis/wp-content/themes/miratech/blog/Responsive-design-miratech.pdf
|
Posté par: Larsene
Posté le: 01 Dec 2014 à 10:32
Un menu responsive, prochain tutoriel alors !
|
Posté par: brolysan
Posté le: 01 Dec 2014 à 11:05
tu vois, en te poussant un peu !!!
|
Posté par: brolysan
Posté le: 01 Dec 2014 à 11:12
Cadeau pour te motiver
|
Posté par: Larsene
Posté le: 01 Dec 2014 à 21:13
Merci ! Bon va falloir que je me remette au travail alors ....
Bon en tout cas, j'espère que ça va bien aider les gens à se lancer à utiliser Open Element ! Je trouve que voir faire en vidéo, ça aide pas mal ...
|
Posté par: brolysan
Posté le: 02 Dec 2014 à 09:05
je vais aussi améliorer mon tuto pour les mobiles tiens...
|
Posté par: Larsene
Posté le: 05 Dec 2014 à 18:13
Un petit édit, spécial brosylan
Oui, j'aborde bien comment scroller spécifiquement vers un élément selon son ID. C'est plus précisément cette partie du code ....
/*clic scroll vers contenu page*/ $("#bouton_page").click(function(){ $('html, body').animate({ scrollTop: $("#corpspage").offset().top }, 1000); }); |
On peut adapter pour scroller spécifiquement vers une position définie :
/*clic scroll vers contenu page*/ $("#bouton_page").click(function(){ $('html, body').animate({ scrollTop: 850 }, 1000); }); |
Rha, là, là, m^me avec la grippe je fait un petit tuto d'entraînement sur OE....
|
Posté par: brolysan
Posté le: 05 Dec 2014 à 19:01
pas bien de se moquer!!!!
|
Posté par: Maurice306
Posté le: 06 Dec 2014 à 15:48
Larsene a écrit:
Merci ! Bon va falloir que je me remette au travail alors ....
Bon en tout cas, j'espère que ça va bien aider les gens à se lancer à utiliser Open Element ! Je trouve que voir faire en vidéo, ça aide pas mal ...
|
Ce forum est extraordinaire, du fait de ceux qui l'animent ! OE est un logiciel super (extraordinaire aussi), mais en plus de la connaissance qui en transpire, il émane, par les sujets qui y sont démontré par ceux cités ci-en-haut, une envie de créer, et c'est vrai que les tutos vidéos de Larsene parlent deux même et paraissent à la porté des plus novices . Continuez
------------- La vie est belle !!!....., elle est comme chacun se la fait. Ne soyez pas pressé, partez plus tôt, car il n'y a pas de personnes pressée elles ne sont qu'en retard !!!
|
Posté par: michael84320
Posté le: 05 Feb 2015 à 08:57
Bonjour, et felicitation pour ce tuto et tous les autres qui me permettent de progressser.
j'ai appliqué scrupuleusement le tuto et cela fonctionne parfaitement. j'essaye d'adapter a mes besoins et là je n'y arrive plus.. ma fenetre de menu fait 200px de haut, quels sont les ajustements à faire ?
merci
|
Posté par: Larsene
Posté le: 05 Feb 2015 à 09:28
Il faut juste modifier la hauteur dans le script JAVASCRIPT :
[code]/*redimensionnement panneau élément photo*/ $("#panneauhaut").css({width:largeur,height:(hauteur-40200),top:'0px',left:'0px','z-index':'0','position':'absolute'}); /*redimensionnement corps de page*/ var top = hauteur-40200; $("#corpspage").css({top:(top+40200)+'px',left:'0px'});
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 02:39
Bonsoir à tous (ou bonjour ?),
Merci beaucoup pour ce tuto vraiment bien expliqué et facile à reproduire. Cependant après diverses tentatives de modifications du code, je n'ai malhereusement pas réussis à faire ce que je voulais.
Ma question est donc:
Est il possible avec les codes fournis de faire la même chose, mais que le #panneauhaut ne prenne pas toute la fenêtre ? (Je me doute que c'est possible, mais je n'ai pas réussis à trouvé ce qu'il fallait modifier).
J'ai essayé de suprimer / modifier un peut tout, mais sans une réel connaissance du java, j'ai juste réussis à tout positionner comme je le voulais, sauf que le menu ne bougeait plus
En gros:
Je n'arrive pas à cromprendre comment modifier la taille du #panneauhaut, sans qu'il y ai un vide entre celui-ci et le #panneaumenu.
Désolé pour ce message cafouillie, n'hésiter pas si je n'ai pas été assez précis !
Merci
|
Posté par: Larsene
Posté le: 03 Mar 2015 à 09:05
Hello !
Il faut effectivement une petite connaissance du javascript (attention, rien à voir avec Java)
Pour le dimensionnement du panneau haut :
/*redimensionnement panneau élément photo*/ $("#panneauhaut").css({width:largeur,height:(hauteur-40),top:'0px',left:'0px','z-index':'0','position':'absolute'});
|
il faut modifier les variables largeur et hauteur. Le 40 ici représente la hauteur du menu.
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 15:24
J'allais dire que j'avais déjà essayé, mais je ne devais pas avoir les idées claire hier soir... Je remplacais "les +/-40" par le même chiffre à chaque fois ! J'ai donc réussis à faire ce que je voulais, mais n'y a t'il pas un moyen plus "sûr" que ce code ?
/*redimensionnement panneau élément photo*/ $("#WEe5977f6820").css({width:largeur,height:(hauteur-865),top:'0px',left:'0px','z-index':'0','position':'absolute'}); /*redimensionnement corps de page*/ var top = hauteur-830; $("#WEdc7ca2a3c8").css({top:(top+100)+'px',left:'0px'}); |
Je suis pas sûr des -830 / -865, j'y suis allé un peut à taton.
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 15:45
Voilà ce que donne le http://img11.hostingpics.net/pics/922419test.jpg" rel="nofollow - site avec le code:
Code Javascrip:
function larsene() { var hauteur = $(window).height(); var largeur = $(window).width(); /*redimensionnement panneau élément photo*/ $("#WEe5977f6820").css({width:largeur,height:(hauteur-865),top:'0px',left:'0px','z-index':'0','position':'absolute'}); /*redimensionnement corps de page*/ var top = hauteur-830; $("#WEdc7ca2a3c8").css({top:(top+100)+'px',left:'0px'}); /* div ancre ancre*/ $("#WE1e49788a95").css({top:top+'px',left:'0px'}); /*placement menu*/ $("#WEe8056c63ff").css({width:largeur,top:top+'px',left:'0px'});
/*dimensionnement de xBody*/ var hauteurXBody = $("#WEdc7ca2a3c8").height(); if (hauteurXBody<(2*hauteur)){ $("#XBody").css({height:(2*hauteur)+'px'}); } /*repositionnement correct du menu*/ var scroll = $(window).scrollTop(); var positioninitiale=$("#WE1e49788a95").position().top - scroll;
if (positioninitiale<0){ $("#WEe8056c63ff").css({position: "fixed", top: 0}); } if (positioninitiale>0){ $("#WEe8056c63ff").css({position: "relative",top :positioninitiale+scroll}); }
}
$(document).ready(function() { larsene();
$(document).on('scroll', function(){ var scroll = $(window).scrollTop(); var positioninitiale=$("#WE1e49788a95").position().top - scroll;
if (positioninitiale<0){ $("#WEe8056c63ff").css({position: "fixed", top: 0}); } if (positioninitiale>0){ $("#WEe8056c63ff").css({position: "relative",top :positioninitiale+scroll}); }
});
}); |
Code Css:
.hand{cursor:pointer; }
.menu{ -moz-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8); -webkit-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8); -o-box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8); box-shadow: 0px 05px 5px 0px rgba(0, 0, 0, 0.8); z-index:100000 !important; } |
|
Posté par: Larsene
Posté le: 03 Mar 2015 à 15:47
Non, c'est trop ! ça veut dire que la taille de ton menu haut ferait 830 pixels de haut ?!!
Cela ne rendrait pas bien sur la plupart des écrans d'affichages en dessous du 27" !
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 15:56
En fait, je pense que ce code n'est pas du tout ce qu'il me faut, j'ai essayé de le modifier, mais rien à faire. En fait je voudrais seulement la partie menu qui scroll et qui bloque sur le #panneauhaut. Avec ce code, le #paneauhaut prend toute la fenêtre alors que je voudrais un #panneauhaut de +/-100px
|
Posté par: Larsene
Posté le: 03 Mar 2015 à 16:02
Attention, le panneau haut n'est pas le menu (c'est la photo qui s'ajuste à la taille écran, qui au scroll fait apparaître le contenu du site à proprement parlé) !
Ce n'est effectivement pas tout à fait le code qu'il te faut, si tu ne veux qu'un menu qui reste en haut de page ...
Il te suffit de définir un panneau d'élément en "fixed" (qu'il reste en haut) , largeur =100%, hauteur =100 pixels, z-index=9999 (qu'il reste au premier plan) ....
Rien de plus !
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 16:36
J'ai essayé avec
.menu { position: fixed !important; top: 0px; }
|
Le menu reste bien toujours visible mais ne se colle pas en haut de la page, il reste toujours un écart de 100px une fois la banniere disparu.
|
Posté par: Larsene
Posté le: 03 Mar 2015 à 16:43
Discuter en l'air, c'est difficile. Il faut une adresse de site où vérifier
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 17:16
Effectivement ce sera mieux comme ça. Désolé pour le temps de réponse, j'ai eu des petit problème avec l'hebergeur.
http://nuckhy.606h.net/" rel="nofollow - site
|
Posté par: nuckhy
Posté le: 03 Mar 2015 à 18:55
Preblème résolut, j'essayais de modifier le code alors qu'il fallait simplement mettre l'ancre au niveau du menu (elle était un petit peut en dessous).
Bref merci bien pour ton aide, et désolé de ne pas avoir assez réfléchis avant de venir ici.
Bonne soirée !
|
Posté par: brolysan
Posté le: 27 Mar 2015 à 09:04
petite demande concernant ton tuto. Si je veux remplacer l'image principal par un slider plein écran, tu aurais une piste? Je bosse sur un petit site web qui collerait en parti à ton tuto.
|
Posté par: Larsene
Posté le: 27 Mar 2015 à 09:24
Tu peux utiliser un slider classique comme Cycle2, et redimensionner son div...
|
Posté par: brolysan
Posté le: 27 Mar 2015 à 10:49
Je vais voir ca...merci, je te montre dés que j'ai fini
|
Posté par: Larsene
Posté le: 27 Mar 2015 à 12:09
J'espère bien !
|
Posté par: brolysan
Posté le: 01 Avr 2015 à 13:20
Re Larsène, j'essaye d'adapter ton tuto à mon projet, avec au lieu des images, un slider (cycle2 en l'occurence).
Dis moi si ca te semble cohérent...
|
Posté par: Larsene
Posté le: 01 Avr 2015 à 13:32
oui, c'est possible. Regarde aussi ma réponse sur l'autre fil ...
|
Posté par: Ribol
Posté le: 09 Juil 2015 à 21:01
Bonjour,
Remarquable didacticiel conçu et présenté avec beaucoup de pédagogie. Je l'ai
suivi à la lettre et il fonctionne hormis le changement de la taille de la police
du titre et du sous-titre. Ne connaissant pas le code JavaScript, je pense que le
script qui suit qui est à l'origine de la taille de la police:
/*redimensionnement panneau élément photo*/
$("#WE6f6b1f05bb").css({width:largeur,height:(hauteur-40),top:'0px',left:'0px','z-index':'0','position':'absolute'});
Un grand merci d'avance à qui pourra m'aider.
|
Posté par: Larsene
Posté le: 09 Juil 2015 à 21:55
Merci pour vos retours !
N'hésitez pas, si vous voyez le bouton "faire un don"....
Non, le code qui change la taille du titre est du CSS :
.titre { font-size: 15vw !important; text-shadow: 0px 0px 3px #000; } C'est - comme le précise le didacticiel, une taille de police "Viewport" qui s'adapte ainsi à la taille de l'écran.
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Ribol
Posté le: 09 Juil 2015 à 23:26
Quelque chose m'échappe. J'ai copié ce code et
suivi à la lettre le didacticiel mais ma police ne varie toujours pas d'un iota
au redimensionnement. (Ni dans Chrome ni dans Firefox). Faut-il une police particulière ou y-a-t-il autre chose?
Ce code suffit-il ?
|
Posté par: Larsene
Posté le: 10 Juil 2015 à 08:53
Oui, ce code suffit. Veillez à bien mettre la classe personnalisée "titre" pour que cela fonctionne !
sinon, envoyez un lien vers votre tentative pour voir ce que vous avez manqué
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Ribol
Posté le: 10 Juil 2015 à 11:32
Effectivement ce code suffit. Mon erreur venait du fait que
j'affectais le mot "titre" à la classe personnalisée du cadre
principal et non au bloc de texte.
|
Posté par: yan
Posté le: 12 Juil 2015 à 22:56
Bonjour, j'ai essayé de créer une page en utilisant le style de ce thème mais sans titre, sans sous titres et sans panneau menu, j'utilise le menu de chouette c'est responsive,
Dans cette page, on retrouve ma barre de menu tout en haut, un panneau avec limage de fond avec l'image de mon bouton fleche vers le bas et un panneau element pour le contenu.
Comment faire a ce moment la pour faire foncionner le scroll et utilise le bouton fleche, j'ai essayer de supprimer des lignes du code java etant donner que je n'ai pas de panneau menu, .....
ca fonctionne pas
erci
|
Posté par: brolysan
Posté le: 18 Nov 2015 à 14:40
tiens, pendant que j'y suis, faudrait peut être pensé à "harmoniser" ton tuto suite aux dernières mises à jour d'OE. Et par la même occasion, si le temps de voir pour le "mixer" avec le tuto "responsive".
------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie
|
Posté par: Larsene
Posté le: 18 Nov 2015 à 16:13
Ben oui. J'ai travaillé sur le dernier dont je t'avais envoyé le lien, mais du coup, has been. Je suis obligé de le refaire avec la dernière version de OE. Mais ce sera utile pour aborder le nouveau mode de travail en relative dans la page et les déplacements d'éléments dans ce mode de travail
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Bridet
Posté le: 18 Nov 2015 à 17:47
Posté par: MicroVinc
Posté le: 18 Nov 2015 à 18:57
Je pense qu'il faut attendre encore un peu une version un peu plus stable... il y a quelques bugs avec les media sur la dernière version... Pour ma part j'ai combiné les deux en attendant...
------------- -Éléments pour OpenElement : https://goo.gl/Wq3Cpp" rel="nofollow - ICI -Tutoriels pour OpenElement : https://goo.gl/NdpS1i" rel="nofollow - ICI
La Bretagne, un État dans l'État
|
Posté par: brolysan
Posté le: 29 Dec 2015 à 16:11
avec la dernière version, pour la partie sections, quels sont les bons paramètres?J'ai testé mais le code ne s'adapte plus correctement du coup
------------- https://sensode.com" rel="nofollow - Sensode https://www.creads.fr/blog/graphiste-freelance2/parole-de-brolysan-45-ans-graphiste" rel="nofollow - Biographie
|
Posté par: Cubix3
Posté le: 05 Jan 2016 à 22:48
bonjour et meilleurs voeux pour cette nouvelle année
pourriez vous nous indiquer comment créer une fenetre modale automatique qui s'ouvrirait lorsque l'ont arrivent sur la page index du site et qui se ferme manuellement pour laisser place a la page index merci
|
Posté par: Larsene
Posté le: 06 Jan 2016 à 10:01
Regardez le premier post, c'est indiqué dans les codes complémentaires
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Hugues
Posté le: 06 Avr 2016 à 17:19
Bonjour,
J'ai plusieurs soucis en voulant adapter le modèle sur mon site
1) Dans le panneau d'éléments "Panneau Contenu", je n'arrive pas à mettre l'image de fond en plein ecran alors que pour le "panneauhaut" pas de soucis. que dois-je faire (je suis de niveau...ben plutôt nul )
2) J'aimerai rajouter d'autres panneaux d'éléments à la suite du "panneau contenu" qui défilent comme les premiers (pour les années suivantes) mais je n'y arrive pas non plus car ils viennent se superposer...
Voici http://www.fuscaworld.com/h50.htm" rel="nofollow - la page du site en question
D'avance merci
|
Posté par: Hugues
Posté le: 14 Avr 2016 à 14:37
Finalement j'ai changé le modèle du site Je n'ai plus besoin d'aide Merci quand même
|
Posté par: Larsene
Posté le: 15 Avr 2016 à 08:44
Il suffisait de copier coller ce panneau haut autant de fois que nécessaire, en lui affectant les mêmes classes personnalisées...
Bon usage de OE, soit via une créativité libre (tutoriels) soit via un modèle !
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Hugues
Posté le: 15 Avr 2016 à 12:51
Merci pour la réponse,
J'aurais aimé suivre ce modèle mais curieusement, entre autres choses, "l'ancre" notamment avait tendance à se déplacer d'un panneau d'élément à l'autre lorsque je quittais Open élément... J'ai donc repris le modèle "ResponsiveCenter01" et j'ai en effet recopier le panneau à chaque fois que nécessaire. C'est dommage car votre modèle me permettait d'avantage de comprendre le fonctionnement des pages "Responsive". Ceci dit, avec le temps, je commence à maitriser un peu plus le logiciel et il est très efficace
Merci pour votre aide
|
Posté par: Larsene
Posté le: 16 Avr 2016 à 10:16
Hello,
Il me semble avoir reçu qqch de ta part :-)
Envoies-moi donc ton projet qui suit ce tuto via WeTransfer, je regarde, je corrige et t'indique comment le développer !
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Hugues
Posté le: 16 Avr 2016 à 18:27
Merci de me proposer ton aide, mais comme je l'ai dit j'ai repris le modèle "Responsive01" pour retravailler mon site. Je n'ai plus les sauvegardes précédentes basés sur ton modèle "abeille".
Pour le reste...bah de rien, c'est pas grand-chose
|
Posté par: Larsene
Posté le: 17 Avr 2016 à 11:40
Bon, tant pis, c'est dommage, il n'y avait vraiment pas grand chose à faire ...
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Bridet
Posté le: 29 Mai 2016 à 12:56
Tiens, ton lien http://stalagtic.com/BeesDemo
nous fait une 404 ...
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus
|
Posté par: Larsene
Posté le: 29 Mai 2016 à 21:16
Tiens, merci, c'est corrigé !
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Hobby001
Posté le: 30 Mai 2016 à 00:44
La correction n'a pas traversé l'Atlantique.
------------- https://denislafrance.net" rel="nofollow - https://denislafrance.net https://www.youtube.com/playlist?list=PLWg7A6YtIr7VtnP3HvRpMhx8tFJET_fih" rel="nofollow - , Formation vidéo sur OE
|
Posté par: Larsene
Posté le: 30 Mai 2016 à 08:41
Hobby001 a écrit:
La correction n'a pas traversé l'Atlantique. |
J'ai corrigé le lien dans le post 1...
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: PHILDEN71
Posté le: 30 Mai 2016 à 15:52
Bonjour,
j'ai bien suivi le tuto mais me concernant, la barre de menu disparaît lorsque je scrolle ! je bloque, rien à faire. quelqu'un a une idée ? Merci d'avance Philden71
|
Posté par: Larsene
Posté le: 30 Mai 2016 à 16:38
Et donc, comment il faut écrire que quand il y a un souci, il FAUT FOURNIR LE LIEN DE SON SITE ????
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: PHILDEN71
Posté le: 30 Mai 2016 à 17:13
TOUT SIMPLEMENT PARCE QUE LA PAGE N’ÉTAIT PAS PUBLIÉE (TEST D'UNE EVENTUELLE MISE A JOUR) CE QUI EST CHOSE FAITE MAINTENANT... http://www.clubautunplongee.fr/Club.htm" rel="nofollow - voici le lien
|
Posté par: Larsene
Posté le: 30 Mai 2016 à 17:55
Merci. Simplement, avant de poster, publiez votre site, nous ne pouvons rien faire sans.
1- attention, le code CSS est incorrect, faites bien un copier coller de celui-ci. Notamment, pas d'espace entre le point et la classe : .panneaumenu (entre autre) 2- dans votre code, remplacez #menu par #WE0254af9bcb (partout, il en reste deux...)
et c'est tout !
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Bridet
Posté le: 30 Mai 2016 à 18:43
Larsene a écrit:
Et donc, comment il faut écrire que quand il y a un souci, il FAUT FOURNIR LE LIEN DE SON SITE ????
|
Ah, ça, c'est bien visible sur un smartphone! ;-)
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus
|
Posté par: PHILDEN71
Posté le: 30 Mai 2016 à 18:52
Posté par: Bridet
Posté le: 30 Mai 2016 à 19:04
SUPER! ;-D
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus
|
Posté par: Larsene
Posté le: 30 Mai 2016 à 19:11
Bridet a écrit:
Larsene a écrit:
Et donc, comment il faut écrire que quand il y a un souci, il FAUT FOURNIR LE LIEN DE SON SITE ????
|
Ah, ça, c'est bien visible sur un smartphone! ;-)
|
Ah, là là.... si tu comptais les centaines de messages juste pour rappeler aux forumeurs que sans ce lien, il est très difficile ou impossible de les aider ....
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: Bridet
Posté le: 30 Mai 2016 à 19:14
Oui, je sais et ne comprends même pas pourquoi il faut leur dire!
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus
|
Posté par: Julienb
Posté le: 22 Juin 2016 à 16:11
Bonjour à tous, :)
Merci pour ce magnifique tuto ! J'ai pu l'adapter sans trop de difficulté. L'affichage est néanmoins lent (on voit bien le site avant et après l'execution du script).. Est ce du au serveur ? A la taille de mon code ? Placement header, body, etc ?
Pourrait on, plutot que de placer les bloc les uns après les autres, les mettre en tampon et tout charger d'un coup ?
Merci pour vos réponses !
|
Posté par: Bridet
Posté le: 22 Juin 2016 à 16:27
Si ton affichage est lent, ce n'est pas dû au principe du responsive ni aux scripts mais probablement bien au poids des images que tu as utilisées. Je te conseille de faire les frais de guideline (le rapport en bas à droite) qui aide beaucoup dans ce genre de problèmes et dans le référencement (un beau site mal référencé ne sera jamais vu) ET qui donne un peu d'aide aux développeurs "open" ... Il y a néanmoins une possibilité d'optimiser tes images sans payer dans OE.
------------- http://accessit.be" rel="nofollow - Les Billets d'une Bobonne Bougonne - http://gite.vervoz.be" rel="nofollow - Gîte Le Vicus
|
Posté par: Larsene
Posté le: 23 Juin 2016 à 10:05
Julienb a écrit:
Bonjour à tous, :)
Merci pour ce magnifique tuto ! J'ai pu l'adapter sans trop de difficulté. L'affichage est néanmoins lent (on voit bien le site avant et après l'execution du script).. Est ce du au serveur ? A la taille de mon code ? Placement header, body, etc ?
Pourrait on, plutot que de placer les bloc les uns après les autres, les mettre en tampon et tout charger d'un coup ?
Merci pour vos réponses ! |
Avec un LIEN, nous pourrons t'aider, sans lien, pas d'aide possible (si ce n'est conjectures) !
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: gepeliryc
Posté le: 28 Mai 2017 à 15:23
Bonjour, Quelle est la grandeur d'image d'arrière plan car je n'arrive pas à obtenir la même chose que vous? D'avance, merci de votre réponse
------------- Philippe Geelen
|
Posté par: Larsene
Posté le: 29 Mai 2017 à 09:30
L'image d'arrière plan est dimensionné selon la taille du navigateur...
Je ne comprends pas vraiment votre question. auriez-vous un lien pour voir votre essai et vous guider ?
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
Posté par: gepeliryc
Posté le: 01 Juin 2017 à 09:35
Voici le lien d'une de mes pages. Au fait la taille de l'image est résolu. Seul problème: J'ai suivi votre tuto à plusieurs reprise et voici ce que j'obtiens (voir lien ci-dessous) http://www.gepeliryc.be/lafriteliryc1.htm" rel="nofollow - http://www.gepeliryc.be/lafriteliryc1.htm Un énorme blanc !!! Pourquoi? Merci d'avance pour votre réponse
------------- Philippe Geelen
|
Posté par: Larsene
Posté le: 06 Juin 2017 à 10:17
Parce que votre page n'est pas conçue en mode responsive, mais en mode absolute.
Envoyez moi votre projet via We Transfer pour corriger
------------- http://goo.gl/KXxG5Y" rel="nofollow - Tutos | https://goo.gl/EtcEUi" rel="nofollow - Don | https://bit.ly/2YwprN3" rel="nofollow - Image Sublime
|
|