Imprimer la Page | Close Window

[Tuto]Chouette, c'est responsive !

Imprimé depuis: openElement Website
Categorie:

openElement


Nom du Forum: Tutoriaux utilisateurs
Description du Forum: Ecrivez ou consultez des tutoriaux OpenElement
Pas de questions dans cette rubrique merci.
URL: http://forum.openelement.com/en/forum_posts.asp?TID=20701
Date: Mar 30 2020 à 1:00am
Version logiciel: Web Wiz Forums 10.18 - http://www.webwizforums.com


Sujet: [Tuto]Chouette, c'est responsive !
Posté par: Larsene
Sujet: [Tuto]Chouette, c'est responsive !
Posté le: Mar 30 2015 à 2:44pm
Et voilà ! Un petit tutoriel sur une façon de travailler et des astuces pour rendre un site "responsive". Cette page est très simple, mais démontre bien l'intérêt de ce travail.

Le but est de montrer l'usage des panneaux d'éléments en mode "relative" (et l'intérêt de leur imbrication, ainsi que le travail avec des tailles variables (pourcentages et pixels).

On voit également comment modifier les éléments créés sous l'éditeur OE en utilisant des medias queries dans des blocs de code CSS, qui permettent l'ajustement en fonction du périphérique disponible.

Plus classique, on va également jouer avec les calques, les classes personnalisées, l'intérêt de renommer les ID des éléments, etc.



Apparences sur différents appareils :

    

Le résultat est visible ici : http://stalagtic.com/demo_owl" rel="nofollow - demo_owl

Le didacticiel en vidéo : http://www.youtube.com/watch?v=J5Y7_EXdEg8&feature=youtu.be" rel="nofollow - ici ! http://https://youtu.be/J5Y7_EXdEg8" rel="nofollow -

Pour plus de confort, je vous redonne ci-dessous les scripts utilisés. Voir la vidéo pour le déroulé.

1- création du calque comportant le menu, et script comportant les media queries css
.barremenu{
background-color:rgba(27,37,58,0.8) !important;
width:100% !important;
position : fixed !important;
z-index:9999 !important;
}

@media screen and (max-width: 640px) {
.titrebarremenu{
font-size:20px !important 
}   
#WEBoutonMenu{
display:inline-block !important;
}
#WEMenuPrincipal{
display:none !important;
}
}

@media screen and (min-width: 640px) and (max-width: 1170px) {
.titrebarremenu{
font-size:24px !important;
}   
.menu{
margin-left:9% !important;
}
#WEBoutonMenu{
display:none !important;
}
  #WEMenuPrincipal{
display:inline-block !important;
}
}

@media screen and (min-width: 1170px) {
.titrebarremenu{
font-size:32px !important;
}   
.menu{
margin-left:20% !important;
}
#WEBoutonMenu{
display:none !important;
}
#WEMenuPrincipal{
display:inline-block !important;
}   
}


2 code CSS de la page :

.ombre{
-moz-box-shadow: 0px 0px 8px 0px #000000;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-o-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
}

@media screen and (max-width: 640px) {
    .grandpanneau{
    width:100% !important;
    clear:both !important;
  }   
  .content {
  width:100% !important;
  }
   .ombre{
  width:100% !important;
  margin: 5% 0% !important;
  }
  .titrepage{
  font-size:32px !important;
  }
  .backimage{
  height:300px !important;
  }
   
  #WENews {
  display:none !important;   
  }
}

@media screen and (min-width: 640px) and (max-width: 1170px) {
   .grandpanneau{
  width:80% !important;
    clear:both !important;
  }
  .content {
  width:100% !important;
  }
   .titrepage{
  font-size:48px !important;
  }
  #WENews {
  display:none !important;   
  }
}

@media screen and (min-width: 1170px) {
   .grandpanneau {
    display:block;
    width:90% !important;
    max-width:1350px !important;
  }
   .illustration{
   height:300px !important
   }
  #WENews {
      display:inline-block!important;
   }  
}


3- code HTML / header (sur page ou calque, peu importe)
<meta name="viewport" content="width=device-width,initial-scale=1" />


Et si ce tutoriel vous a plu 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

[édition terminée (à priori)]




Réponses:
Posté par: Bridet
Posté le: Mar 30 2015 à 4:23pm
Larsène, vous a plût, non mais sérieux?

Où qu'il est le résultat?

Sinon, je bloque sur les tutos vidéo, car il est plus laborieux de les appliquer pas à pas mais il faut vivre avec son temps.

Mais je t'aime hein!



Posté par: Larsene
Posté le: Mar 30 2015 à 4:42pm
Merci Bridet !

C'est en cours d'édition et d'upload.

Je pense qu'une vidéo permet de mieux se rendre compte d'un résultat, notamment quand il s'agit d'utiliser un certain nombre de panneaux d'éléments, les positionnements, etc.

L'idée n'est de toute façon de l'appliquer tel quel mais bien de voir comment on peut faire pour appliquer ces idées à ses propres créations !


Posté par: brolysan
Posté le: Mar 30 2015 à 4:43pm
Courage Larsène, chouette ton initiative en tout cas!


Posté par: Maurice306
Posté le: Mar 30 2015 à 5:00pm
Bonjour,

Comme ils disent CHOUETTE ! une remarque, tout de même il faut bien que je m'y mette ! Wink

Je pense que le menu minimisé sur de petits écrans cache une partie des textes sur le coté gauche ? à vérifier, Embarrassed


-------------
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: Larsene
Posté le: Mar 30 2015 à 5:02pm
Le menu utilisé est bêtement celui de OE... il s'affiche donc en surimpression le temps de la selection de la destination, c'est tout ...


Posté par: Maurice306
Posté le: Mar 30 2015 à 8:33pm
OK, j'ai fais le test en réduisant au max et le menu rentre sur la gauche ce qui fait disparaître une partie comme j'ai fais ce type de menu avec un panneau info, en suivant le tuto de Brolysan et comme là l'affichage est corec ça a attiré mon attention. 

Autrement, c'est comme "d'AB" Thumbs Up Thumbs Up Thumbs Up 


-------------
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: Larsene
Posté le: Mar 30 2015 à 9:19pm
sur un périphérique mobile ? tablette ou smartphone ?? sinon, oui, sur PC, si tu réduit le navigateur à moins de 280px de large, le menu OE va bugger, car c'est sa taille fixe... (mais un smartphone avec un écran de moins de 280 de large ... il en reste bcp ?

Après il est souvent plus judicieux de faire un menu via un panneau d'élément ... d'ailleurs, le code d'affichage/masquage de ce menu ... qui l'a filé à brosylan (mode innocent)  ? Beer


L'idée ici est bien de montrer l'intérêt du responsive - même pour Bridet LOL - et sa facilité de mise en oeuvre, sans pour autant partir d'un modèle


Posté par: Maurice306
Posté le: Mar 30 2015 à 10:53pm
Il est vrai que ça ouvre des portes ! de pouvoir créer ce type de pages dont certain éléments disparaissent au profit de l'important pour un mobile. Je vois déjà Bridet saliver de plaisir à refaire son site LOL

Pour le style de menu avec le panneau info c'est impec Thumbs Up


-------------
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: brolysan
Posté le: Mar 31 2015 à 8:55am
super boulot Larsène. Et comme tout...Beer


Posté par: Bridet
Posté le: Mar 31 2015 à 10:00am
Très bien et beau! Et pour une fois vue à peu près identique sur ip4, mais effectivement le menu est un peu mordu sur la gauche. http://vervoz.be/IMG_0914.PNG

Hé oui, je salive! Mais là je vais me contenter d'attendre que par magie (genre l'arrivée d'un plus opiniâtre encore que moi), mon problème de responsive illisible sur smartphone  se résolve Party . Car c'est là ma réserve à ce sujet (ainsi que les sites qui se ressemblent).




Posté par: Larsene
Posté le: Mar 31 2015 à 10:46am
Bon, bien que le sujet ne sois pas là, la largeur du menu a été modifiée, puisque ça gêne ^^


Par contre, Bridet, le texte est bien lisible, là, non ?

Sinon, procéder comme suit :

1- définir une classe personnalisée sur le corps de texte de l'article
2- dans la media queries (<640px), indiquer :
.corpsarticle{  font-size:20px !important;}


Et miracle, le texte de l'article sera un peu plus grand sur smartphone ...

Je conseillerais de ne pas utiliser de modèle en responsive, pour bien comprendre les règles de fonctionnement ...


Posté par: Bridet
Posté le: Mar 31 2015 à 11:00am
Bah, ça gênait peu, je le concède, mais bon quitte à faire, autant parfaire.
Oui, oui Larsène, c'est super bien lisible même sans lunettes!
Mais là je vais rester sur mon modèle responsive, pas trop le courage de "rattaquer"

Dmit m'avait conseillé ceci pour agrandir la police  sur mobile  en css header:

@media (max-width:768px) {
  .police-mobile { font-size: 120% !important; }
}

@media (max-width: 640px) {
  .police-mobile { font-size: 140% !important; }
}

mais ça ne semble pas marcher, OE me met le panneau d'exclamation jaune  en disant : Use of !important...




Posté par: Larsene
Posté le: Mar 31 2015 à 12:42pm
Oui, ça marche aussi, le principe est d'ailleurs le même ! Dmit augmente la taille de la police par rapport à la taille d'origine, alors que je fixe spécifiquement la taille selon l'écran.

Le "Use of !important" est juste une information indiquant une surcharge de style (ce qui est généralement une "astuce" plutôt qu'autre chose) mais ça marche en principe sans pb.


Posté par: brolysan
Posté le: Mar 31 2015 à 6:35pm
petit don pour encourager le bonhomme Wink


Posté par: Larsene
Posté le: Mar 31 2015 à 8:52pm
Oh, merci ! Embarrassed


Posté par: Maitre Cake
Posté le: Apr 05 2015 à 4:15pm
Bonjour,

J'ai l'impression que je suis le seul dans ce cas, mais quand j'essaie de visualiser la vidéo, l'image se fige à 2 minutes au moment du clic sur l'icone openelement.
Donc, au final, je ne visualise pas les manips, même si j'ai le son.Cry

J'ai le problème sous Firefox et depuis l'appli youtube sous android.

C'est dommage, c'est vraiment le tutoriel que j'attendais ! Un grand merci merci pour l'initaitive en tout cas.Clap


Posté par: Larsene
Posté le: Apr 05 2015 à 7:40pm
Oups ! je vais le corriger de suite ! Un petit problème de Virtual Dub ...

N'hésitez pas à voir mes autres tutoriels en attendant : http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne


Posté par: Maurice306
Posté le: Apr 06 2015 à 4:54am
Message posté par Larsene Larsene a écrit:

Oups ! je vais le corriger de suite ! Un petit problème de Virtual Dub ...

N'hésitez pas à voir mes autres tutoriels en attendant : http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20090&title=les-tutos-de-larsne

Désolé Larsene, mais un homme averti en vaut deux (voir MP) Wink


-------------
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: Maitre Cake
Posté le: Apr 06 2015 à 9:15am
Merci. J'attends tout ça avec impatience.Big smile


Posté par: Larsene
Posté le: Apr 06 2015 à 10:51am
C'est mis à jour !


Posté par: brolysan
Posté le: Apr 06 2015 à 11:08am
Chouette Wink.

Allez, petite fermeture de mon PC, le temps de tout réinstaller sur un SSD de 1To, arrivé samedi !! yeahhh


Posté par: Larsene
Posté le: Apr 06 2015 à 12:09pm
SSD de 1To ! et tu roules en ferrari aussi !! Pig


Posté par: brolysan
Posté le: Apr 06 2015 à 12:25pm
Message posté par Larsene Larsene a écrit:

SSD de 1To ! et tu roules en ferrari aussi !! Pig

Non, pourquoi? tu crois que c'est hors de prix un SSD maintenant? -Chacun mets ces sous où ca lui est le plus utile. Certains c'est le tunning voiture, d'autres la course à la carte vidéo, moi, c'est dans un minimum de rapidité et de fluidité pour mes programmes essentiels : Photoshop, Illustrator, Indesign et OpenElement. Wink


Posté par: Larsene
Posté le: Apr 06 2015 à 12:30pm
Euh, ah, certes.... Bon, il est vrai que je n'ai ni voiture, ni même une bonne connexion à internet, donc ...  Big smile

Profite bien ! un PC avec un bon SSD, c'est de la bombe quand même !


Posté par: brolysan
Posté le: Apr 06 2015 à 12:52pm
Message posté par Larsene Larsene a écrit:

Euh, ah, certes.... Bon, il est vrai que je n'ai ni voiture, ni même une bonne connexion à internet, donc ...  Big smile

Profite bien ! un PC avec un bon SSD, c'est de la bombe quand même !
je confirme, juste passage d'un 240Go à une 1To. Malgré tout, content de retrouver une nouvelle jeunesse, tout réinstaller, ca a du bon Wink.
Et pour être dans la confidence, c'est aussi mon cadeau d'anniversaire malgré tout ! LOL


Posté par: Mick OE
Posté le: Apr 06 2015 à 1:03pm
Merci pour le tuto ! pour info on travail pour rendre possible l'ajout d'élément en position relative directement dans le cadre principal "Content" et "Footer"

-------------
Cordialement, L'équipe openElement


Posté par: brolysan
Posté le: Apr 06 2015 à 1:04pm
Message posté par Mick OE Mick OE a écrit:

Merci pour le tuto ! pour info on travail pour rendre possible l'ajout d'élément en position relative directement dans le cadre principal "Content" et "Footer"

Bien ça, super news!!! Clap


Posté par: nico38
Posté le: Apr 06 2015 à 1:06pm
Message posté par Mick OE Mick OE a écrit:

Merci pour le tuto ! pour info on travail pour rendre possible l'ajout d'élément en position relative directement dans le cadre principal "Content" et "Footer"


ah oui ce serait vraiment bien !


Posté par: Larsene
Posté le: Apr 06 2015 à 1:13pm
Oui, ce serait une très bonne nouvelle et simplifierais l'ajout d'un cadre supplémentaire !

Et ... Bon anniversaire ! Wink


Posté par: Maurice306
Posté le: Apr 11 2015 à 10:39am
Bonjour à tous,

J'ai un petit problème avec les Panneaux d'éléments, qui comportent des "CLASSES PERSO" je ne sais pas pourquoi est-ce qu'il y a une limitation à les imbriquer sur une page Question Voilà ce qui ce passe :

J'ai fais un calque menu (Larsene) que j'applique à cette page ;

1) j'ai positionné un Panneau d'élément (PE00) avec deux Texte Simple-ligne, pour le titre et sous titre, avec fond noir;

2) J'ai positionné un autre Panneau d'élément (PE1) avec des marges extérieures dans lequel j'ai mis deux autres Panneau d'élément (PE2 et PE3) le premier à 70% et le second à 30% de largeur ;

3) Lorsque je veux monter le panneau PE3 sur le haut à coté du panneau PE2, avec la flèche de panneau, il descend sous le panneau PE2 et la flèche pour le faire remonter disparaît ;

4) Si je fais centrer pour le panneau PE1, le panneau PE3 remonte à coté du panneau PE2 mais la marge gauche du panneau PE1 disparait et le panneau PE3 reste toujours impossible à faire monter en haut à coté du panneau PE2 ;

En plus, j'ai positionné les panneaux en relative, sur la page plein écran à 100%, et lors de la prévisualisation, ils ne se réduisent pas, alors que le panneau PE00 du titre lui réagit parfaitement ;

Je joint les images :
http://www.hostingpics.net/viewer.php?id=920331cran1.jpg" rel="nofollow">

http://www.hostingpics.net/viewer.php?id=700164cran2.jpg" rel="nofollow">

http://www.hostingpics.net/viewer.php?id=155002cran3.jpg" rel="nofollow">

http://www.hostingpics.net/viewer.php?id=583244cran4.jpg" rel="nofollow">

http://www.hostingpics.net/viewer.php?id=258743cran5.jpg" rel="nofollow">

http://www.hostingpics.net/viewer.php?id=508567cran6.jpg" rel="nofollow">



-------------
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: Larsene
Posté le: Apr 11 2015 à 10:48am
Maurice, j'ai déplacé ton message, pas du tout lié à la version 1.48R4, mais plutôt à ce tuto.

Les captures sont insuffisantes pour se rendre compte. Il faudrait le voir en live.

Néanmoins, attention, OE modifie parfois la largeur en %. Vérifie qu'il ne l'a pas modifié à 70,04% ou 30,25% .... auquel cas les panneaux ne s'affichent plus côte à côte.

Outre une page responsive, bien régler la largeur d'affichage à 100%.

Si ça marche dans le tuto, il n'y a aucune raison pour que ça ne marche pas pour toi !


Posté par: Maurice306
Posté le: Apr 11 2015 à 11:15am
Merci Larsene,

J'avais en effet, avec la version précédente, fait un essai qui fonctionnait parfaitement et me suis fait un tuto pour la suite de mes essais, celui que j'ai réalisé à partir de ta vidéo et que j'ai mis en application.

Voulant voir ce que donnerait un montage intégral d'un site, j'ai recommencé avec un panneau cadre noir pour le titre, et le reste avec les éléments de ta vidéo que je site ci-en-haut.

Il n'y a pas ton Panneau d'élément titre puisque je l'ai désolidarisé.

Pour voir les images en grand format il faut cliquer dessus.



-------------
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: Larsene
Posté le: Apr 11 2015 à 11:42am
Les images ne sont pas suffisantes pour t'aider. Une visu live serait mieux !


Posté par: Maurice306
Posté le: Apr 11 2015 à 12:47pm
Je ne peux pas le mettre en ligne, si tu veux voir ce que ça donne, je peux te le faire passer par Dropbox, je vais faire un autre essais sur une page neutre.

-------------
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: Maurice306
Posté le: Apr 11 2015 à 1:00pm
Je confirme l'erreur sur OE 1.48R4, Je teste sur une autre page et positionne un panneau 90% avec marges extérieures de 5% en relative, dedans je positionne deux panneaux l'un à 70% l'autre à 30%.

Lorsque je monte sur le même niveau les deux panneau, il est impossible de coller sur le haut le panneau 30%, avec les outils de centrage. Il descent toujours en dessous, en jouant sur le centrage de OE il reprend sa position, mais lorsqu'il s'agit de le coller sur le haut du panneau dans lequel il est positionné, il repart sur le bas et les outils flèche disparaissent.


-------------
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: Larsene
Posté le: Apr 11 2015 à 1:26pm
Non, ce n'est pas lié à OE, ou alors à une manip pas mentionnée ici.

En suivant ton parcours, voilà ce que j'obtiens : http://www.stalagtic.com/demo_owl/Page.htm" rel="nofollow - http://www.stalagtic.com/demo_owl/Page.htm


Posté par: Maurice306
Posté le: Apr 11 2015 à 2:15pm
A priori il semblerait que mes test se révèlent concluants, mais pour ce qui est de déplacer les panneaux à l'intérieur des panneaux, c'est pas bien compris, il faudra que je détaille au calme.

Je vais tenter de mettre en ligne pour avis !


-------------
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: Maurice306
Posté le: Apr 11 2015 à 4:10pm
Je me suis aperçu que lorsqu'il bug, je ferme et à la réouverture tout est bien positionné.

-------------
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: Larsene
Posté le: Apr 11 2015 à 4:49pm
en ligne ?


Posté par: Maurice306
Posté le: Apr 11 2015 à 5:27pm
Voilà je cherchai à trouver les remarques de Google qui trouve que les polices sont trop petites.

J'ai positionné le script que Dmit avait donné à Bridet, mais ou je me suis planté dans le positionnement, ou alors Ermm Confused Ermm

le lien,  http://locleucate.free.fr/Mon-site-responsive/index.htm" rel="nofollow - http://locleucate.free.fr/Mon-site-responsive/index.htm
MERCI ! de me faire toutes les remarques, si j'arrive à progresser peut être que Bridet ce lancera t-elle Wink


-------------
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: Maurice306
Posté le: Apr 11 2015 à 5:38pm
Dans le panneau de droite je tente de positionner un autre élément Texte simple-ligne, mais c'est impossible, il n'y a pas moyen de le faire monter j'ai une fenêtre d'erreur

-------------
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: Maurice306
Posté le: Apr 11 2015 à 5:52pm
j'ai regardé sur mon portable Samsung Galaxy "S"plus et effectivement tout apparaît minus, donc pour le mobile j'ai pas fait une réussite. Il faut que je tourne le smartphone latéralement pour que ce soit potable !
il y à un zoom qui pour le format du mien est insuffisant.

Alors que le site mobile que j'ai fait spécifiquement avec des panneaux en relative, c'est bon


-------------
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: Larsene
Posté le: Apr 11 2015 à 6:17pm
Message posté par Maurice306 Maurice306 a écrit:

Dans le panneau de droite je tente de positionner un autre élément Texte simple-ligne, mais c'est impossible, il n'y a pas moyen de le faire monter j'ai une fenêtre d'erreur


Tu nous facilites pas la tâche pour t'aider, hein .... c'est quoi ce message d'erreur ?


Posté par: Larsene
Posté le: Apr 11 2015 à 6:21pm
Message posté par Maurice306 Maurice306 a écrit:

j'ai regardé sur mon portable Samsung Galaxy "S"plus et effectivement tout apparaît minus, donc pour le mobile j'ai pas fait une réussite. Il faut que je tourne le smartphone latéralement pour que ce soit potable !
il y à un zoom qui pour le format du mien est insuffisant.

Alors que le site mobile que j'ai fait spécifiquement avec des panneaux en relative, c'est bon


Qu'est ce qui apparaît minus ? Qu'est ce qui n'est pas une réussite ? Qu'est ce qui fonctionne bien ? Pas très clair ton message ....

Dans ce tuto, les textes en version mobiles doivent être bien lisible. Au pire, il est très facile de les agrandir pour un mobile, grâce aux média queries...


Posté par: Maurice306
Posté le: Apr 11 2015 à 9:23pm
Message posté par Larsene Larsene a écrit:

Message posté par Maurice306 Maurice306 a écrit:

Dans le panneau de droite je tente de positionner un autre élément Texte simple-ligne, mais c'est impossible, il n'y a pas moyen de le faire monter j'ai une fenêtre d'erreur


Tu nous facilites pas la tâche pour t'aider, hein .... c'est quoi ce message d'erreur ?

Sur le Panneau de droite, au dessus de "L'immeuble" je voulais ajouter un élément Texte simple ligne pour un titre du style "Ma location" ou "Un aperçu de la location", il m'est impossible de le faire.

Je place le Texte simple ligne dans le Panneau d'élément de droite, je clique sur la flèche bleu pour le faire monter, il se déplace vers la gauche, avec la flèche verte je tente de le déplacer vers le haut, mais il repart vers la gauche et la flèche bleu est active pour le descendre alors qu'il est toujours en bas du panneau et repositionné sur la gauche. une fenêtre d'erreur apparait avec ce msg :

Message : La référence d'objet n'est pas définie à une instance d'un objet.
LastTrace : openElement.WebElement.Page.MoveControlToSide(String[] idArray, String destID, EnuSideName sideName)
Params : 
MethodeName : Void MoveControlToSide(System.String[], System.String, EnuSideName)
Stamp : 4/11/2015 10:20:03 PM
OSFullName : Microsoft Windows 8.1
AvailablePhysicalMemory : 4.62 Go 
TotalPhysicalMemory : 7.89 Go 
AvailableVirtualMemory : 1.21 Go 
TotalVirtualMemory : 2 Go 
WorkingSet : 288.68 Mo 
PagedMemorySize : 331.77 Mo 
TotalMemory : 35.54 Mo 

ExTrace : 
à openElement.WebElement.Page.MoveControlToSide(String[] idArray, String destID, EnuSideName sideName) dans openElement\WebElement\Page\PageControls.vb:ligne 437
à openElement.Forms.PageEditFromJs._MoveControlToSide(String idjsArray, String destID, Int16 sideName) dans openElement\Form\Page\PageEditFromJs.vb:ligne 1014

OETrace : 
à openElement.Forms.PageEditFromJs.TrapError(Exception ex, String infosParams) dans openElement\Form\Page\PageEditFromJs.vb:ligne 27
à openElement.Forms.PageEditFromJs._MoveControlToSide(String idjsArray, String destID, Int16 sideName) dans openElement\Form\Page\PageEditFromJs.vb:ligne 1021
à openElement.My.MyApplication.Main(String[] Args) dans 17d14f5c-a337-4978-8281-53493378c1071.vb:ligne 82


-------------
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: nico38
Posté le: Apr 11 2015 à 9:31pm
Suivant comme sont positionner les éléments, il faut parfois appuyer sur la fleche bleue qui monte, ensuite appuyer sur la flèche de gauche, puis re-bleue, puis re-gauche (ça dépend si les éléments sont sur la même "ligne" ou non)
après c'est peut être les autres éléments qu'il faut descendre.


Posté par: Maurice306
Posté le: Apr 11 2015 à 9:36pm
Message posté par Larsene Larsene a écrit:

Message posté par Maurice306 Maurice306 a écrit:

j'ai regardé sur mon portable Samsung Galaxy "S"plus et effectivement tout apparaît minus, donc pour le mobile j'ai pas fait une réussite. Il faut que je tourne le smartphone latéralement pour que ce soit potable !
il y à un zoom qui pour le format du mien est insuffisant.

Alors que le site mobile que j'ai fait spécifiquement avec des panneaux en relative, c'est bon


Qu'est ce qui apparaît minus ? Qu'est ce qui n'est pas une réussite ? Qu'est ce qui fonctionne bien ? Pas très clair ton message ....

Dans ce tuto, les textes en version mobiles doivent être bien lisible. Au pire, il est très facile de les agrandir pour un mobile, grâce aux média queries...

L'ensemble est très bien, et fonctionne comme je souhaite, sauf que lorsque je le teste sur Google il me dit que le texte est trop petit illisible, dans les titre et le corps du panneau affiché.

http://www.hostingpics.net" rel="nofollow">

Je pense que le panneau devrait prendre tout l'écran à ce format, car sur mon smartphone c'est la même chose, même le menu est tout petit, il n'y a que si je fais pivoter l'écran qu'il y a un léger zoom.

En début de code j'ai positionné cela pour agrandir le texte :
.ombre{
-moz-box-shadow: 0px 0px 8px 0px #000000;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-o-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
}

@media (max-width:320px) {
  .police-mobile { font-size: 160% !important; }
}
@media (max-width: 640px) {
  .police-mobile { font-size: 140% !important; }
}

Mais je pense que cela n'agit pas car le panneau texte reste réduit dans l'écran.

Je ne sais pas si j'ai été plus clair


-------------
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: Maurice306
Posté le: Apr 11 2015 à 9:43pm
Message posté par nico38 nico38 a écrit:

Suivant comme sont positionner les éléments, il faut parfois appuyer sur la fleche bleue qui monte, ensuite appuyer sur la flèche de gauche, puis re-bleue, puis re-gauche (ça dépend si les éléments sont sur la même "ligne" ou non)
après c'est peut être les autres éléments qu'il faut descendre.

Salut nico38,

C'est exactement ce que je fais sans résultat, et de plus lorsque je veux avoir accès au Style pour cet élément le bloc reste vide avec l'avertissement "Aucun élément n'est sélectionné" alors que j'ai sélectionné l'élément Texte simple-ligne en question.


-------------
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: nico38
Posté le: Apr 11 2015 à 10:09pm
il faut peut être ça dans code source  html header (dans un calque si ta page hérite : ça permet de ne pas répéter le code):
<meta name="viewport" content="width=device-width">


Posté par: Larsene
Posté le: Apr 11 2015 à 10:10pm
Je pense surtout que tu as oublié de suivre une étape du tutoriel : définir le viewport avec le script
<meta name="viewport" content="width=device-width,initial-scale=1" />


Il ne devrait pas y avoir de bords sur les côtés. regarde le rendu en consultant la démo du tuto depuis ton mobile ...


Posté par: Maurice306
Posté le: Apr 11 2015 à 11:17pm
Message posté par Larsene Larsene a écrit:

Je pense surtout que tu as oublié de suivre une étape du tutoriel : définir le viewport avec le script
<meta name="viewport" content="width=device-width,initial-scale=1" />


Il ne devrait pas y avoir de bords sur les côtés. regarde le rendu en consultant la démo du tuto depuis ton mobile ...

Merci Larsene de me remettre sur les rails , Clap

En effet, j'avais omis ce script pensant qu'il n'agissait pas directement sur le graphisme, mais qu'il signalait que c'était une page pour mobile.

Et voila le résultat :

http://www.hostingpics.net" rel="nofollow">

Bridet il n'y a plus qu'à plancher un petit peu, ce n'est pas tout simple mais si j'y suis (en partie) parvenu, une fille tenace et volontaire ............. Thumbs Up

Par contre toujours le problème de l'impossibilité de rajouter un élément Texte simple-ligne au Panneau d'élément où j'ai le message d'erreur signalé sur un post plus haut.

Je pense que Dmit devrait regarder s'il n'y a pas un bug, éventuellement je peux envoyer le projet.




-------------
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: Maurice306
Posté le: Apr 12 2015 à 12:02am
Bonjour à tous

Je crois que le programme analyse du code Css déconne un peu, car il me signale ces erreurs notamment le point-virgule alors qu'ils sont bien sur tous.

Désolé ! Les erreurs suivantes ont été trouvées : (5)

URI :  http://locleucate.free.fr/Mon-site-responsive/index.htm" rel="nofollow - http://locleucate.free.fr/Mon-site-responsive/index.htm

71.ombreimpossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
71.ombreLa propriété progid n'existe pas : DXImageTransform
71.ombreErreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
72.ombreErreur lors de l'analyse grammaticale. }
124Erreur lors de l'analyse grammaticale. }


-------------
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: Larsene
Posté le: Apr 12 2015 à 7:44am
Message posté par Maurice306 Maurice306 a écrit:

Merci Larsene de me remettre sur les rails , Clap

En effet, j'avais omis ce script pensant qu'il n'agissait pas directement sur le graphisme, mais qu'il signalait que c'était une page pour mobile.



Pourtant, si tu suis bien le tuto vidéo, j'explique que ce code permet un affichage correct du site sur un mobile ...

Le tuto est en fait assez simple. Pour ceux qui en ont besoin, je pense mettre à disposition les projets exemples Open Element sur mon site en vente Paypal à 2.5€ pour me permettre d'en proposer d'autres...

Le côté esthétique de ce tuto n'est pas mal non plus, n'est-ce pas ?


Posté par: Larsene
Posté le: Apr 12 2015 à 7:46am
Message posté par Maurice306 Maurice306 a écrit:

une fenêtre d'erreur apparait avec ce msg :

Message : La référence d'objet n'est pas définie à une instance d'un objet.
LastTrace : openElement.WebElement.Page.MoveControlToSide(String[] idArray, String destID, EnuSideName sideName)
Params : 
MethodeName : Void MoveControlToSide(System.String[], System.String, EnuSideName)
Stamp : 4/11/2015 10:20:03 PM
OSFullName : Microsoft Windows 8.1
AvailablePhysicalMemory : 4.62 Go 
TotalPhysicalMemory : 7.89 Go 
AvailableVirtualMemory : 1.21 Go 
TotalVirtualMemory : 2 Go 
WorkingSet : 288.68 Mo 
PagedMemorySize : 331.77 Mo 
TotalMemory : 35.54 Mo 

ExTrace : 
à openElement.WebElement.Page.MoveControlToSide(String[] idArray, String destID, EnuSideName sideName) dans openElement\WebElement\Page\PageControls.vb:ligne 437
à openElement.Forms.PageEditFromJs._MoveControlToSide(String idjsArray, String destID, Int16 sideName) dans openElement\Form\Page\PageEditFromJs.vb:ligne 1014

OETrace : 
à openElement.Forms.PageEditFromJs.TrapError(Exception ex, String infosParams) dans openElement\Form\Page\PageEditFromJs.vb:ligne 27
à openElement.Forms.PageEditFromJs._MoveControlToSide(String idjsArray, String destID, Int16 sideName) dans openElement\Form\Page\PageEditFromJs.vb:ligne 1021
à openElement.My.MyApplication.Main(String[] Args) dans 17d14f5c-a337-4978-8281-53493378c1071.vb:ligne 82


Oui, là j'ai la même.... Je vais la reporter également sur le fil de la 1.48R4. Temporairement, déplace le contenu de ce cadre ailleurs, place ton titre, puis re-glisse les autres éléments dans l'ordre dans le cadre...


Posté par: Larsene
Posté le: Apr 12 2015 à 8:10am
Message posté par Maurice306 Maurice306 a écrit:

Bonjour à tous

Je crois que le programme analyse du code Css déconne un peu, car il me signale ces erreurs notamment le point-virgule alors qu'ils sont bien sur tous.

Désolé ! Les erreurs suivantes ont été trouvées : (5)

URI :  http://locleucate.free.fr/Mon-site-responsive/index.htm" rel="nofollow - http://locleucate.free.fr/Mon-site-responsive/index.htm

71.ombreimpossible de trouver un point-virgule avant le nom de la propriété, ajoutez-le.
71.ombreLa propriété progid n'existe pas : DXImageTransform
71.ombreErreur lors de l'analyse grammaticale. DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
72.ombreErreur lors de l'analyse grammaticale. }
124
Erreur lors de l'analyse grammaticale. }

C'est l'analyse de Google ?

1- il te manque un point virgule dans le bloc .noir (ce qui peut fausser l'analyse de la suite)
2- aux lignes indiquées, je n'ai pas ce code dans la source de la page avec Firefox
3- si tu utilises un autre navigateur que IE, ils ne savent pas interpréter le code spécifique qui lui est destiné.


Posté par: Maurice306
Posté le: Apr 12 2015 à 3:05pm
Bonjour Larsene,

Non c'est sur le W3C que j'ai lancé pour voir s'il y avait des erreurs HTML et Css, par curiosité puisque tout semble fonctionner correctement.

Cordialement


-------------
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: Larsene
Posté le: Apr 12 2015 à 6:49pm
Ah, le W3C ! ben t'as pas fini d'en trouver alors LOL

Surtout que Internet Explorer ne le respecte pas et qu'il emploie ses propres codes et définitions (c'est le qui est utilisé ici
filter:progid:DXImageTransform.Microsoft.Shadow(color=#000000, Direction=NaN, Strength=8);
) bien en dehors des standards !!


Posté par: Maurice306
Posté le: Apr 12 2015 à 8:21pm
OK ! c'était de la curiosité Big smile

Mais il y a un petit truc que je voudrais comprendre et régler si c'est possible.

A priori l'affichage est bon en partie sur les différent écrans, sauf que sur un écran (Tablette) de 768 x 1024 px le menu texte s'affiche sous le titre et l'image du menu caché aussi.

Ce serait bien si j'arrivais à résoudre ce double affichage, j'ai surement fait une boulette quelque part en faisant, défaisant, Je ne sais pas si la longueur du menu texte y est pour quelque chose, car lorsque je n'avais mis que trois botons liens cela ne se produisait pas.

Il doit être possible de le faire disparaître un peu plus tôt, par exemple lorsque le panneau de droite se cache Embarrassed c'est visible sur :
http://ami.responsivedesign.is/?url=http%3A%2F%2Flocleucate.free.fr%2FMon-site-responsive%2Findex.htm" rel="nofollow - http://ami.responsivedesign.is/?url=http%3A%2F%2Flocleucate.free.fr%2FMon-site-responsive%2Findex.htm



-------------
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: Larsene
Posté le: Apr 12 2015 à 10:02pm
Facile ! relis ton code !

@media screen and (min-width: 6400px) and (max-width: 1170px)



cette media queries, servant à masquer le menu - entre autres - aux résolutions intermédiaires ne risque pas de fonctionner !! (elle peut pas être au minimum de 6400px et au max de 1170px !!)

Enlève un 0 et tout ira bien !


Posté par: Larsene
Posté le: Apr 12 2015 à 10:05pm
Promis, le didacticiel fonctionne parfaitement. il n'y a rien à y modifier pour que l'affichage soit bon sur un grand nombre d'écrans.

En l'occurence, il est bien prévu et expliqué comment les boutons de menu apparaissent et disparaissent ! Big smile

Mais chaque chose a son importance ...Geek


Posté par: Maurice306
Posté le: Apr 13 2015 à 9:30am
Merci Larsene pour ta patience, Thumbs Up

Je ne dirais pas comme Bridet "mon héro " mais Heart y est.

Comme pour moi c'est un tout petit peu compliqué "scripts etc..." en tentant des adaptations je me suis  perdu dans le tout ne voyais pas les erreur que j'avais produites.

Heureusement les yeux pros veillent Clap , je vais poursuivre mon expérience de site, je pense qu'il pourrait être assez bien adapté pour les différents écrans restant sobre pour les petis formats et un peu plus explicatifs pour les PC



-------------
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: Maurice306
Posté le: Apr 15 2015 à 12:07pm
Bonjour à tous,

Bon je crois avoir fais le tour de la question, bien-sur pas tout seul Embarrassed , c'est un site assez sobre, je crois assez judicieux pour l'indispensable.

J'ai regardé le rendu sur quelques smartphones, il me parait corect, quoique j'ai un peu galéré pour les éléments qui doivent s'afficher en pop-up, mais à priori c'est correct.

Bridet, ma chère, si tu es tenté pour ton site, c'est vraiment facile avec le tuto, que j'ai copié sur une feuille c'est plus pratique que sur l'écran qui reste indispensable pour tout comprendre.

Si vous avez le temps de le parcourir et me faire vos remarques, je pourrais l'améliorer, MERCI.

http://locleucate.free.fr/Mon-site-responsive/index.htm" rel="nofollow - http://locleucate.free.fr/Mon-site-responsive/index.htm


-------------
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: Maurice306
Posté le: Apr 15 2015 à 12:38pm
Voilà Larsene, un petit geste pour tous tes bien faits Wink et t'encourager Beer

-------------
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: Vanessa262003
Posté le: Apr 15 2015 à 2:56pm
Bonjour,

Et surtout merci pour ce tuto qui m'a enfin éclairé sur la technique du responsive
Il me restera plus un jour de courage d'essayer de le faire (j'utilise pour le moment une version mobile de mon site)

Je me posais une question néanmoins enfin deux :

- Chacune de mes pages (hormis le contenu) est basé actuellement sur la même mise en page, serait il alors possible sur le calque menu de mettre les codes css (et la mise en page de ce fait) de la page accueil dans le calque menu ce qui faciliterait alors la création des futures pages ? il ne resterait alors qu'à modifier le texte, les images mais la mise en page serait identique ?

- Je possède une image de fond de page qui se positionnent sur l'ensemble de la page et non juste en haut de page, est il possible de l'intégrer dans un modele responsive et qu'elle s'adapte du coup elle aussi à la taille de l'écran?


Posté par: Maurice306
Posté le: Apr 15 2015 à 3:25pm
bonjour,

je pense que vous devriez (ce que j'ai fait et qui marche bien) faire le calque menu, et mettre le script de page dans le BaseCalque à laquelle il faut lui affecter le calque menu.

Chaque page recevant le BaseCalque

En ce qui concerne l'image de fond de page, elle s'adaptera à la dimension de l'écran sans difficulté.


-------------
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: Larsene
Posté le: Apr 15 2015 à 3:58pm
Déjà, merci Maurice ! Embarrassed C'(est vraiment chouette de ta part ! ça aide bien !

@Vanessa
1- Pas complètement, non. Le problème est que chaque élément est propre à la page, même si la mise en page est identique. Seuls les élements qui ne sont pas modifié sur une page peuvent être repris sur un calque.

2- Oui, aucun problème, c'est tout à fait possible. Tu peux piquer le code nécessaire sur mon tuto http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=tuto-volet-daccueil-fluidit-et-abeilles" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20188&title=tuto-volet-daccueil-fluidit-et-abeilles
correspondant au redimensionnement du panneau qui comprend la photo plein écran.

@Maurice :

Oui, tout à fait. Le menu sur un calque est très pertinent. Il est d'ailleurs conçu comme cela dans ce tuto. Il sera donc déjà présent sur chaque page qui comportera le calque de menu.


Il est également possible de dupliquer une page. Ainsi, il ne reste qu'a changer "le différentiel" !




Posté par: Vanessa262003
Posté le: Apr 15 2015 à 4:00pm
Encore merci pour les réponses

Je ne manquerai pas de tester tout ça!


Posté par: Maurice306
Posté le: Apr 15 2015 à 4:15pm
Message posté par Larsene Larsene a écrit:


Il est également possible de dupliquer une page. Ainsi, il ne reste qu'a changer "le différentiel" ??

Salut Larsene, 

bon pour un apéro !

C'est quoi le différentiel Pig J'ai affecté le script page au BaseCalque, et comme toutes les pages sont conçues à l'identique ça ne semble pas poser de PB 


-------------
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: Larsene
Posté le: Apr 15 2015 à 4:28pm
Voilà ce que j'entends par différentiel : Dupliquer la page --> changer ce qui doit l'être sur la nouvelle page par rapport à l'ancienne.

Tant qu'on fonctionne avec les scripts sur des classes personalisées ou des ID personnalisés, ça va. Sinon, OE change le nom des ID en cas de copier coller d'éléments d'une page à l'autre.

Bon, ce tuto, c'est plutôt une initiation / découverte des principes du responsive avec OE, hein ! Le résultat manque de plein de choses pour en faire un vrai site (mais il est assez facile de compléter en gardant l'idée) !


Posté par: Maurice306
Posté le: Apr 15 2015 à 9:44pm
OK, ce n'a pas été le cas pour moi, car j'ai crée chaque page en donnant la Classe Perso à chaque élément, mais très important et bon à savoir, qu'en cas de copier-coller il faut contrôler et éventuellement modifier les ID des éléments.

-------------
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: Dmit OE
Posté le: Apr 16 2015 à 8:08pm

@media screen and (min-width: 1170px) {
   .grandpanneau {
    display:block;
    width:90% !important;
    max-width:1350px !important;
  }
   .illustration{height:300px !important}
  #WENews {
      display:inline-block!important; }  
  }
}


Il y a 4 { ouvrant et 5 } fermant, une erreur


Posté par: Larsene
Posté le: Apr 16 2015 à 8:29pm
Bien vu. une remise en forme du code trop rapide !

Merci !


Posté par: Dmit OE
Posté le: Apr 16 2015 à 8:36pm
Une petite donation? Embarrassed


Posté par: Larsene
Posté le: Apr 16 2015 à 8:40pm
T'inquiète, ça va se faire, mais plutôt début du mois prochain, que j'ai mon salaire... un peu tendu en ce moment pour moi. Mais faut savoir partager....

[off]hum, hum ... je contribue pas assez à OE ? dernière fois, cétait en ... janvier, non ? Sleepy[/off]


Posté par: Dmit OE
Posté le: Apr 16 2015 à 8:46pm
C'etait une blague-reference a votre bouton de donation au debut


Posté par: Maurice306
Posté le: Apr 17 2015 à 6:43pm
Coucou,

Me revoilà, Bon !, comme je disais à Brolysan j'ai un mobile préhistorique, mais lorsque j'ai visualisé son site le menu était fixe en haut de l'écran alors que chez moi pas.

Sur PC le menu et le titre restent bien en haut d'écran lors du défilement "haut -><- bas" mais sur mon mobile le menu et le titre disparaissent au défilement vers le haut.

Y a t-il une solution pour le fixer en haut de la fenêtre du mobile ?


-------------
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: Larsene
Posté le: Apr 17 2015 à 6:56pm
La barre de menu est forcément fixée en haut de l'écran, par le code :
.barremenu{
position : fixed !important;
}

Et cela fonctionne même sur mon vieux xperia active, en 480x320 ...

vérifie en regardant le tuto et le résultat depuis ton smartphone, ça fonctionne bien !


Posté par: brolysan
Posté le: Apr 17 2015 à 6:57pm
j'aurais pas dit mieux !


Posté par: Dmit OE
Posté le: Apr 17 2015 à 10:59pm
Il y a un bug horrible sur tous les Androids avant la version 2.quelquechose pour les positions fixed. Par exemple sur mon Galaxy Tab 1.


Posté par: Maurice306
Posté le: Apr 19 2015 à 6:55pm
Message posté par Dmit OE Dmit OE a écrit:

Il y a un bug horrible sur tous les Androids avant la version 2.quelquechose pour les positions fixed. Par exemple sur mon Galaxy Tab 1.

Message posté par Larsene Larsene a écrit:

La barre de menu est forcément fixée en haut de l'écran, par le code :
.barremenu{
position : fixed !important;
}

Et cela fonctionne même sur mon vieux xperia active, en 480x320 ...

vérifie en regardant le tuto et le résultat depuis ton smartphone, ça fonctionne bien !

Bonjour à tous J'ai vérifié le code est bon, je pense que c'est comme le dit Dmit un bug d'Androids, car même l'affichage des fenêtres pop-up c'est pas correct.

Comme je n'ai que celui-là je n'ai pas pu contrôler sur autre chose. Entre Google et Androids ils ne finiront pas de nous causer des PB.

Par contre je ne vois pas pourquoi l'image et le titre du site de Brolysan reste en haut de l'écran et le mien avec le code est mobile ?


-------------
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: Larsene
Posté le: Apr 20 2015 à 7:47am
On parle bien d'Android (sans S). Android appartient à Google depuis une dizaine d'années.... Je ne trouve pas qu'il nous pose de problèmes, au contraire (bon, sauf pour la vie privée...)

Par contre, je ne comprends pas ce que tu veux dire sur le site de Brolysan ...


Posté par: brolysan
Posté le: Apr 20 2015 à 8:12am
je ne vois pas non plus...et tu as raison, le menu du haut reste volontairement fixé en haut, c'est voulu...


Posté par: Maurice306
Posté le: Apr 20 2015 à 9:51am
Bon je reprends, Il y a des jours où la tête et les pieds vont pas bien ensembles Confused oui Android sans "S" et en fait je suis assez satisfait de ce mobile même si à un moment il y avait quelques bug du style blocage des notifications, mais bon.

Lorsque j'ai visionné le site de Brolysan sur mon mobile, le menu reste bien fixe en "haut de l'écran" quand je fais défiler vers le haut, la fenêtre de recherche se cache mais pas le menu ni le titre.

Lorsque je fais la même chose avec le site que j'ai construit "en Essais responsive" le menu et le titre montent collé à la fenêtre de recherche et disparaissent, par contre le titre se place bien sous l'image menu "trois traits" alors que chez Brolysan ils restent cote à cote et l'image menu "trois traits n'est pas visible.

Pour changer de page, il faut que je fasse défiler la page vers le bas pour accéder au menu "image trois barres" ce n'est pas le cas sur PC.




-------------
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: Larsene
Posté le: Apr 20 2015 à 9:53am
donc une erreur de script sur ton site, à vérifier !

le site de Brolysan utilise ce même type de menu que dans ce tutoriel


Posté par: Maurice306
Posté le: Apr 20 2015 à 10:14am
Il doit y avoir un truc quelque part, mais où ,

Je viens de copier-coller le script du tuto, à part la couleur de fond c'est toujours pareil.

Bon je n'en fait pas une fixation, cars lorsque je fais le test sur le site ci-après le comportement est bon :  http://mobiletest.me/samsung_galaxy_y_emulator/#u=locleucate.free.fr/Mon-site-responsive/index.htm" rel="nofollow - http://mobiletest.me/samsung_galaxy_y_emulator/#u=locleucate.free.fr/Mon-site-responsive/index.htm

Mais si comme le dit Dmit c'est un bug du logiciel du smartphone !, ce devrait présenter le même phénomène pour le site de Brolysan et pour le mien.

Quoique il y a quelque chose peut être sur le site de Brolysan, puisque son titre ne passe pas sous le menu ?


-------------
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: brolysan
Posté le: Apr 20 2015 à 11:00am
ben déjà, le test avec ton lien est assez "bizarre".
Mon site fait bien 640 pixels de large. Et en résolution iphone 5 (donc 640 px de large), celui ci ne s'affiche pas correctement.

Si je vais sur http://www.emulateurmobile.com/" rel="nofollow - un autre site pour générer une version mobile, pas de souci.


Posté par: Maurice306
Posté le: Apr 20 2015 à 1:46pm
Merci Brolysan pour ton attention.
Oui le lien est un sous/sous répertoire FREE pour faire des essais, j'ai un peu compliqué, je vais modifier le lien.

Ton site pour les test est super, 

je constate que pour ton site le menu et titre s'affiche très bien, alors que sur mon mobile le texte ne se modifie pas et donc je n'ais pas accès à l'image menu, ce qui est aussi le cas pour mon site où le texte ne se modifie pas non plus.

Je confirme que Dmit a raison (encore une fois) il y a des bugs avec cette série de Android.

Soucis clôture, Nuke



-------------
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: brolysan
Posté le: May 02 2015 à 12:05pm
allez Larsène, je vais tester à fond ton tuto tiens.
J'ai une envie de responsive la...Party


Posté par: Larsene
Posté le: May 02 2015 à 5:35pm
Très bonne chose pour tes clients Thumbs Up


Posté par: brolysan
Posté le: May 02 2015 à 5:36pm
Message posté par Larsene Larsene a écrit:

Très bonne chose pour tes clients Thumbs Up

Surtout refaire un site que j'ai en attente depuis des mois...le mien! hahaha


Posté par: Larsene
Posté le: May 02 2015 à 5:38pm
J'ai vu ça ! Big smile Mais le mien est carrément en vrac... Mais ça avance !


Posté par: brolysan
Posté le: May 02 2015 à 5:42pm
Message posté par Larsene Larsene a écrit:

J'ai vu ça ! Big smile Mais le mien est carrément en vrac... Mais ça avance !

les cordonniers les plus mal chaussés!!!!


Posté par: Sunhouse
Posté le: May 07 2015 à 8:46am
Bonjour

Comme demandé je reprends ici mon post débuté là :
http://forum.openelement.com/fr/forum_posts.asp?TID=20904&title=problme-de-menu-responsive" rel="nofollow - http://forum.openelement.com/fr/forum_posts.asp?TID=20904&title=problme-de-menu-responsive

En résumé : j'ai collé le code avec les media queries mais mon menu ne réagit pas :
- pas de disparition du menu portable sur grand écran
- pas de changement dans le menu principal

Et je pense qu'il s'agit du fait que ce code est absent :

<meta name="viewport" content="width=device-width,initial-scale=1" />

Ce a quoi on m'a répondu :
glisser bloc code source (header + html puis copier coller le code en question

Ok, mais je comprends pas. Glisser à partir de quoi ? J'ai essayé de créer un bloc de code en précisant bien header et html mais je ne le trouve nulle part dans le code global...

Voici ce que j'ai fait en image : 

http://www.hostingpics.net/viewer.php?id=314792viewport.jpg" rel="nofollow - http://www.hostingpics.net/viewer.php?id=314792viewport.jpg

Je précise à nouveau que je suis débutant sous Openelement. J'ai très envie de continuer avec ce logiciel prometteur mais à ce niveau, le temps d'apprendre, j'ai besoin de vous.

Merci encore  et excellente journée.

PS : désolé de ne pas avoir posté au bon endroit la première fois


Posté par: Larsene
Posté le: May 07 2015 à 9:12am
Cliquez sur code source, au dessus de votre page, puis sur l'icône avec un petit + (Ajouter).

Dans la boite de dialogue, choisissez type : HTML, emplacement : HEADER.

Coller le code ensuite.

Il est d'usage, pour vous aider au mieux sans perdre de temps, de donner également un lien vers la page web en développement.



Posté par: Sunhouse
Posté le: May 07 2015 à 10:06am
Ok, merci.

En fait, j'ai tout repris a zéro. Et même sans coller ce bout de code, j'arrive au bout de la partie Menu du tuto, et ça fonctionne.

Par contre, la page en développement est encore en local sur Openelement. Je vais tacher de la mettre sur un service gratuit pour test.

Merci encore !!


Posté par: brolysan
Posté le: May 18 2015 à 1:38pm
Une demande tiens. Dans le cas où je souhaite que mon menu reste centré "milieu" de ma page jusqu'au redimensionnement, tu modifies comment ton code (vu que le bloc "barremenu" n'est pas centré)?


Posté par: Larsene
Posté le: May 18 2015 à 3:34pm
tu le mets dans un autre bloc DIV


Posté par: brolysan
Posté le: May 18 2015 à 3:57pm
Message posté par Larsene Larsene a écrit:

tu le mets dans un autre bloc DIV

il me semble que j'avais testé pourtant cette soluce.... je vais recommencer mon menu du coup.


Posté par: Larsene
Posté le: May 18 2015 à 4:35pm
et.... uniquement dans des blocs en relative, hein.... Smile



Imprimer la Page | Close Window

Forum Software by Web Wiz Forums® version 10.18 - http://www.webwizforums.com
Copyright ©2001-2014 Web Wiz Ltd. - http://www.webwiz.co.uk