Imprimer la Page | Fermez la fenêtre

[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: 25 Jan 2022 à 17:58
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&currency_code=EUR&bn=PP%2dDonationsBF%3abtn_donate_SM%2egif%3aNonHosted" rel="nofollow">Faire un don



-------------
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é" Big smile

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 !!! Big smile


Posté par: brolysan
Posté le: 01 Dec 2014 à 11:12
Cadeau pour te motiver Wink


Posté par: Larsene
Posté le: 01 Dec 2014 à 21:13
Merci Big smile ! 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...Wink


Posté par: Larsene
Posté le: 05 Dec 2014 à 18:13
Un petit édit, spécial brosylan Wink

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!!!! Clown


Posté par: Maurice306
Posté le: 06 Dec 2014 à 15:48
Message posté par Larsene Larsene a écrit:

Merci Big smile ! 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 ! Tongue 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 novicesThumbs Up Clap 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 Stern Smile


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 ! Wink


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 Wink


Posté par: Larsene
Posté le: 27 Mar 2015 à 12:09
J'espère bien !Smile


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".... Geek

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". LOL

-------------
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
Thumbs Up


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 Wink


-------------
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/index.htm" rel="nofollow - Quand on veut mettre quelque chose en ligne, on se fait prendre par quelque chose de gros


Posté par: Larsene
Posté le: 30 Mai 2016 à 08:41
Message posté par Hobby001 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
Message posté par Larsene 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
RESOLU

Handshake


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
Message posté par Bridet Bridet a écrit:

Message posté par Larsene 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
Message posté par Julienb 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



Imprimer la Page | Fermez la fenêtre

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net